Angular Material Data Table

Angular: The Full Gamut Edition

Charlie Greenman
November 05, 2021
2 min read

Angular Material offers out of the box the mat-table component. The mat-table component in it's simplest form allows for a row of data to be displayed. It also offers some additional features:

  1. Pagination
  2. Sorting
  3. Filtering
  4. Selection
  5. Footer row
  6. Sticky Rows and Columns
  7. Multiple row templates

A link to these features will be supplied at the end of the chapter.

Three core elements

There are three core elements to the mat-table;

dataSource

The dataSource in it's simplest form, is an array of data that you will pass to the mat-table. The mat-table will treat that data like a for loop, and render a row for each object in the array.

<table mat-table [dataSource]="tableDataSource" matSort><!-- action column --><ng-container *ngIf="rowActionIcon?.length" [matColumnDef]="rowActionIcon"><th mat-header-cell *matHeaderCellDef></th><td mat-cell *matCellDef="let element" [id]="rowActionIcon" (click)="emitRowAction(element)">

Column Templates

Each column consists of three parts:

  1. Unique name
  2. Content for header cell
  3. Content for row cell
<ng-container matColumnDef="ticket"><th mat-header-cell *matHeaderCellDef> Name </th><td mat-cell *matCellDef="let ticket"> {{ticket.employeeName}} </td></ng-container>

Row Templates

Add the following html inside of your mat-table div. Where place inside of mat-table div is not important.

<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr><tr mat-row *matRowDef="let myRowData; columns: columnsToDisplay"></tr>
columnsToDisplay = ['employeeName', 'projectName', 'shortDescription'];

If a column is specified inside of the html, but not passed along to the columnsToDisplay array then it will fail.

Subscribe to the Razroo Angular Newsletter!

Razroo takes pride in it's Angular newsletter, and we really pour heart and soul into it. Pass along your e-mail to recieve it in the mail. Our commitment, is to keep you up to date with the latest in Angular, so you don't have to.

More articles similar to this