CODEWITHSUNDEEP
htmlcssangularangular-materialangular9
Jacek
Jacek

Reputation: 12053

Nice, default view for mat-table

I have code in Angular 9 to display table

<table mat-table [dataSource]="quotes" >

    <ng-container matColumnDef="date">
        <th mat-header-cell *matHeaderCellDef> Date </th>
        <td mat-cell *matCellDef="let element"> {{element.date | date:'yyyy-MM-dd'}} </td>
    </ng-container>

    <ng-container matColumnDef="min">
        <th mat-header-cell *matHeaderCellDef> Min </th>
        <td mat-cell *matCellDef="let element"> {{element.min}} </td>
    </ng-container>

    <ng-container matColumnDef="max">
        <th mat-header-cell *matHeaderCellDef> Max </th>
        <td mat-cell *matCellDef="let element"> {{element.max}} </td>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</table>

I also have imported modules

const materialModules = [
  CdkTableModule,
  MatTableModule,
];

but it isn't looks like in documentation. What should I change.

enter image description here

Upvotes: 0

Views: 321

Answers (2)

Nitin Lawande
Nitin Lawande

Reputation: 613

add 'mat-header-row' and 'mat-row' inside 'tr' tag, refer below code

<ng-container matColumnDef="date">
    <th mat-header-cell *matHeaderCellDef> Date </th>
    <td mat-cell *matCellDef="let element"> {{element.date | date:'yyyy-MM-dd'}} </td>
</ng-container>

<ng-container matColumnDef="min">
    <th mat-header-cell *matHeaderCellDef> Min </th>
    <td mat-cell *matCellDef="let element"> {{element.min}} </td>
</ng-container>

<ng-container matColumnDef="max">
    <th mat-header-cell *matHeaderCellDef> Max </th>
    <td mat-cell *matCellDef="let element"> {{element.max}} </td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

Upvotes: 1

Santosh Shinde
Santosh Shinde

Reputation: 1212

import angular material css in styles.css like this.

styles.css

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

Upvotes: 1

Related Questions