Applying material styles to native table don't work

[maku]

Bug, feature request, or proposal:

As documented at https://material.angular.io/components/table/overview "Applying material styles to native table" should work correctly but it does not

What is the expected behavior?

Table should be styled correctly

What is the current behavior?

Table is not styled

What are the steps to reproduce?

https://stackblitz.com/angular/empbjvyandp?file=app%2Ftable-native-only-example.ts

[ewaschenko]

In order for the mat-table css to be loaded, an actual mat-table needs to be used. Having a mat-table brings in the appropriate css.

Example:

If I have a page with a native table with the mat-table styling and I navigate to it, then the styling will not be applied. But, if I then navigate to a page with a mat-table then navigate back, the styling will be applied to the native table since the css is loaded.

Not sure if this has always been the case or it was introduced recently, but I have the same issue.

[andrewseguin]

Yup, this is my fault - I always tested this while also having other MatTables rendered on the page. Just realized recently that this does fail if it is standalone. For now I should just remove it from the docs and see if there's a way we can get it to load in with another way

[ewaschenko]

As @rodrigjg mentioned, an easy fix is to add the code below to app.component.html

<mat-table>
	<mat-header-row *cdkHeaderRowDef="[]"></mat-header-row>
</mat-table>

[dgsmith2]

My version...

<mat-table style="display: none">
    <mat-header-row *matHeaderRowDef="[]"></mat-header-row>
</mat-table>

[SaturnTeam]

Have the same issue

[maxencefrenette]

Maybe a directive that styles a table according to material styles by applying the correct class ? This would be similar to the way matButton works.

<table matTable>
    ...
</table>

[shivarajnaidu]

Any Other Solutions Available TO Solve It ?

[andrewseguin]

Since the theme and typography styles will be pulled in whether or not you use a MatTable somewhere in the app, the best correct solution for now may just be to copy the roughly 30 lines of CSS that will style your table correctly.

table.mat-table {
  border-spacing: 0;
}

tr.mat-header-row {
  height: 56px;
}

tr.mat-row, tr.mat-footer-row {
  height: 48px;
}

th.mat-header-cell {
  text-align: left;
}

th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
  padding: 0;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

th.mat-header-cell:first-child, td.mat-cell:first-child, td.mat-footer-cell:first-child {
  padding-left: 24px;
}

th.mat-header-cell:last-child, td.mat-cell:last-child, td.mat-footer-cell:last-child {
  padding-right: 24px;
}

Unfortunately since the "native support" is not well fleshed out, we'll remove it from the docs.

[SaturnTeam]

Alternate way to add styles if you are using SCSS

@import '~@angular/material/theming';
@import '../../../styles'; // file where you defined material theme according theming section from docs

@include mat-table-theme($theme);