We need a minimal Angular material data table to play around with.

Approach

Module

Add the @angular/material table module and the browser-animations-module to app.module.ts:

import { MatTableModule} from '@angular/material/table';
@NgModule({
    imports: [ BrowserModule, MatTableModule, BrowserAnimationsModule ],
})

Theme

Then add the indigo pink theme to styles.css.

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Imports

In app.component.ts import the MatTableDataSource:

import { MatTableDataSource } from "@angular/material/table";

Data Source Type

We’ll use a Todo class so implement that in app.component.ts:

class Todo {
id: string;
description: string;
complete: boolean;
}

Displayed Column

We will only display the id column at first, so we need this property:

displayedColumns =  ['id'];

Add more columns in the order that you want to display them to see more data.

Table Markup Definition

<mat-table class="mat-elevation-z8" [dataSource]="dataSource">
    <ng-container matColumnDef="id">
        <mat-header-cell *matHeaderCellDef>ID</mat-header-cell>
        <mat-cell *matCellDef="let row;">{{row.id}}</mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns">
    </mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>

Implementing a Minimal Angular Material Data Table | Task

Scenario