Skip to content

bug(MatTable): *matNoDataRow not properly styling in flex mode #22349

@dkimmich-onventis

Description

@dkimmich-onventis

Reproduction

Steps to reproduce:

  1. Use *matNoDataRow in a flex MatTable

Expected Behavior

No Data Row is properly styled with a padding, like in the non-flex table:

image

Actual Behavior

No Data Row is missing proper styling:

image

Additional information

The code for the *matNoDataRow in non-flex tables is part of the documentation:

<tr class="mat-row" *matNoDataRow>
  <td class="mat-cell" colspan="4">No data</td>
</tr>

But how to do it with the flex table? I've tried several things, no luck so far:

<div class="mat-row" *matNoDataRow>
  <div class="mat-cell">No data</div>
</div>
<div *matNoDataRow>No data</div>
<div mat-row *matNoDataRow>
  <div mat-cell>No data</div>
</div>
<mat-row *matNoDataRow>
  <mat-cell>No data</mat-cell>
</mat-row>

Sure I could add the styles manually, but I was hoping that there was an official solution.

Environment

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: material/table

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions