Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
dkimmich-onventis opened this issue Mar 26, 2021 · 3 comments · Fixed by #22350 · May be fixed by #23153
Open

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

dkimmich-onventis opened this issue Mar 26, 2021 · 3 comments · Fixed by #22350 · May be fixed by #23153
Labels
area: material/table P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@dkimmich-onventis
Copy link

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
@dkimmich-onventis dkimmich-onventis added the needs triage This issue needs to be triaged by the team label Mar 26, 2021
crisbeto added a commit to crisbeto/material2 that referenced this issue Mar 26, 2021
@crisbeto
fix(material/table): switch back to class-based styling for flex tables
5cb3860 
In an earlier PR we switched the flex-based table styles to target the tag names, rather than classes in order to support flex tables in MDC. The problem with targeting tag names is that it doesn't allow our styles to be applied to other elements within the table. E.g. in angular#22349 the user isn't able to target the "no data" row.

These changes switch back to targeting classes and add some styles to prevent the flex-specific styles from bleeding into the table-based ones.

Fixes angular#22349.
@crisbeto crisbeto self-assigned this Mar 26, 2021
@crisbeto crisbeto added has pr P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed needs triage This issue needs to be triaged by the team labels Mar 26, 2021
@crisbeto crisbeto mentioned this issue Mar 26, 2021
Merged
crisbeto added a commit to crisbeto/material2 that referenced this issue Mar 26, 2021
@crisbeto
fix(material/table): switch back to class-based styling for flex tables
18ba520 
In an earlier PR we switched the flex-based table styles to target the tag names, rather than classes in order to support flex tables in MDC. The problem with targeting tag names is that it doesn't allow our styles to be applied to other elements within the table. E.g. in angular#22349 the user isn't able to target the "no data" row.

These changes switch back to targeting classes and add some styles to prevent the flex-specific styles from bleeding into the table-based ones.

Fixes angular#22349.
wagnermaciel pushed a commit that referenced this issue Jul 12, 2021
@crisbeto
fix(material/table): switch back to class-based styling for flex tabl…
c76a09e 
…es (#22350)

In an earlier PR we switched the flex-based table styles to target the tag names, rather than classes in order to support flex tables in MDC. The problem with targeting tag names is that it doesn't allow our styles to be applied to other elements within the table. E.g. in #22349 the user isn't able to target the "no data" row.

These changes switch back to targeting classes and add some styles to prevent the flex-specific styles from bleeding into the table-based ones.

Fixes #22349.
wagnermaciel pushed a commit that referenced this issue Jul 12, 2021
@crisbeto @wagnermaciel
fix(material/table): switch back to class-based styling for flex tabl…
749dcbf 
…es (#22350)

In an earlier PR we switched the flex-based table styles to target the tag names, rather than classes in order to support flex tables in MDC. The problem with targeting tag names is that it doesn't allow our styles to be applied to other elements within the table. E.g. in #22349 the user isn't able to target the "no data" row.

These changes switch back to targeting classes and add some styles to prevent the flex-specific styles from bleeding into the table-based ones.

Fixes #22349.

(cherry picked from commit c76a09e)
crisbeto added a commit to crisbeto/material2 that referenced this issue Jul 12, 2021
@crisbeto
fix(material/table): switch back to class-based styling for flex tables
96144c1 
In an earlier PR we switched the flex-based table styles to target the tag names, rather than classes in order to support flex tables in MDC. The problem with targeting tag names is that it doesn't allow our styles to be applied to other elements within the table. E.g. in angular#22349 the user isn't able to target the "no data" row.

These changes switch back to targeting classes and add some styles to prevent the flex-specific styles from bleeding into the table-based ones.

Fixes angular#22349.
@crisbeto crisbeto linked a pull request Jul 12, 2021 that will close this issue
Open
@crisbeto crisbeto reopened this Jul 12, 2021
@dexster
Copy link

dexster commented Jul 28, 2021 •
edited

Does the commit include a fix for this error when using matNoDataRow on a flex table or do I need to submit a new issue?

core.js:6456 ERROR NullInjectorError: R3InjectorError(StorybookModule)[CdkColumnDef -> CdkColumnDef -> CdkColumnDef]: 
  NullInjectorError: No provider for CdkColumnDef!

Broken

<mat-row *matNoDataRow>
  <mat-cell>No data matching the filter</mat-cell>
 </mat-row>

Works

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

@bugoutfr
Copy link

bugoutfr commented Oct 28, 2022 •
edited

Does the commit include a fix for this error when using matNoDataRow on a flex table or do I need to submit a new issue?

core.js:6456 ERROR NullInjectorError: R3InjectorError(StorybookModule)[CdkColumnDef -> CdkColumnDef -> CdkColumnDef]: 
  NullInjectorError: No provider for CdkColumnDef!

Broken

<mat-row *matNoDataRow>
  <mat-cell>No data matching the filter</mat-cell>
 </mat-row>

Works

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

Hello, this bug still exists in Angular 14.2.6. Will it be fixed someday?

@argentum388
Copy link

argentum388 commented Dec 2, 2022 •
edited

It seems it exists in 15
I'm using this css for replacing mat-cell
.mat-mdc-no-data-row::before { content: 'No data'; margin: 0 auto; }

@mmalerba mmalerba removed the has pr label Dec 8, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
area: material/table P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
6 participants
@crisbeto @dexster @argentum388 @mmalerba @bugoutfr @dkimmich-onventis