Nice, default view for mat-table

Question

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.

Answer 1

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>

Answer 2

import angular material css in styles.css like this.

styles.css

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