Implementing a Minimal Angular Material Data Table

Updated Version

There’s an updated version of this article here:

Scenario

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

Approach

First install Angular Material by clicking on dependencies and then entering @angular/material in your Stackblitz project.

Module

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

import { MatTableModule} from '@angular/material';@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";

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

And that’s a wrap. Here’s the full demo:

Bonus

If you want to see the entire data object rendered in the first row pipe it into JSON like this:

<mat-cell *matCellDef="let row;">{{row|json}}</mat-cell>

Related

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ole Ersoy

Ole Ersoy

Founder of Firefly Semantics Corporation