bug(material/table): matNoDataRow styling not working in v15

mrmokwa commented 1 year ago

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

v14

Description

matNoDataRow directive not working as expect in previous version

Expected Behavior

https://v14.material.angular.io/components/table/examples

Actual Behavior

https://material.angular.io/components/table/examples

Environment

Angular: 15
CDK/Material: 15
Browser(s): Chrome

mrmokwa commented 1 year ago

As workaround, we can add to global styles something like:

.mat-mdc-no-data-row {
      td {
         padding: 17px;
      }
   }

rob4226 commented 1 year ago

I noticed the same thing. It appears there were inline styles applied in v14 that are no longer applied in v15. It seems to releate to the classes class="mat-row" and class="mat-cell". I tried changing them to mat-mdc-row and mat-mdc-cell but that didn't do anything.

<!-- Row shown when there is no matching data. -->
<tr class="mat-row" *matNoDataRow>
  <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
</tr>

Above code from: https://v15.material.angular.io/components/table/examples#table-filtering

Here is a screenshot of the inline styles applied to the no data row in v14, whereas in v15 the same code produces no inline syles:

v14 row:

v14-inline-tr

v14 cell:

v14-inline-td

Based on the updated v15 styles for tables the workaround I made is: https://material.angular.io/guide/mdc-migration#table

tr.mat-row {
  height: 52px;

  td.mat-cell {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }
}

ChristofferGersen commented 1 year ago

I used the following workaround:

<tr class="mat-mdc-row mdc-data-table__row" *matNoDataRow>
  <td class="mat-mdc-cell mdc-data-table__cell" colspan="1000">No data</td>
</tr>

crisbeto commented 1 year ago

The expectation was that users would provide the styling for the no data row. This was fine when we only had one class for styling in the pre-MDC component, but now that more are required, we should come up with a better solution.

angular / components