Implementing a Minimal Angular Material Data Table | Task

Ole Ersoy
Feb - 27  -  2 min


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



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

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


Then add the indigo pink theme to styles.css.

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


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;">{{}}</mat-cell>
    <mat-header-row *matHeaderRowDef="displayedColumns">
    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>