Angualr Material Table RTL

[albahrawy]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

it is a small bug in css of the table.
in the _data-table-theme.scss we have

@mixin cell-padding(
  $leading-padding: $cell-leading-padding,
  $trailing-padding: $cell-trailing-padding,
  $row-checkbox-density-scale: null,
  $query: feature-targeting.all()
) {
  $feat-structure: feature-targeting.create-target($query, structure);

  .mdc-data-table__cell,
  .mdc-data-table__header-cell {
    @include feature-targeting.targets($feat-structure) {
      padding: 0 $trailing-padding 0 $leading-padding;
    }
  }
}

we are using $leading-padding and $trailing-padding for padding the cell which usually is 16px
but in the "_table-flex-styles.scss" file

`mat-cell,
mat-header-cell,
mat-footer-cell {

    // Note: we use `first-of-type`/`last-of-type` here in order to prevent extra
    // elements like ripples or badges from throwing off the layout (see #11165).
    &:first-of-type {
        padding-left: $row-horizontal-padding;

        [dir='rtl'] &:not(:only-of-type) {
            padding-left: 0;
            padding-right: $row-horizontal-padding;
        }
    }

    &:last-of-type {
        padding-right: $row-horizontal-padding;

        [dir='rtl'] &:not(:only-of-type) {
            padding-right: 0;
            padding-left: $row-horizontal-padding;
        }
    }
}`

for LTR it works fine because we set only padding-left for the first-of-type and padding-right for the last-of-type, and still get the original one in (data-table-theme.scss) which will be in my case 16 and 24 cool.

in RTL we set them equal to zero which breaks what we have in the data-table-theme.scss

Reproduction

StackBlitz link:
Steps to reproduce:
1.
2.

Expected Behavior

Actual Behavior

Environment

• Angular:
• CDK/Material:
• Browser(s):
• Operating System (e.g. Windows, macOS, Ubuntu):

[crisbeto]

I'm not quite sure what the bug report is about here. Is it that the padding is different between the flex and non-flex tables or that the flex tables get the extra trailing padding in RTL?

[albahrawy]

you can see here https://stackblitz.com/edit/fqnds4?file=src%2Fexample%2Ftable-basic-example.html

it is related to flex and RTL with first-of-type & last-of-type