Angular Material 16 Data Table, Pagination & Sorting Tutorial

Last updated on: by Digamber
Angular Material data table example is going to be explored in this tutorial today. I will create an Angular app to show Angular Material data table tutorial.

Angular Material is a ui library with a wide variety of ui components. Angular Material offers data tables to show the data on frontend.

We’ll learn to work with angular material tables from scratch using MatTableModule material design service.

Angular Material Data Table Tutorial Example

In the first step, We will install and set up the Angular basic app with the latest Angular CLI.

Thereafter, we’ll install the Angular material UI library. Then we’ll learn to work with Angular data tables and Angular table pagination.

Table of Contents

  1. Setup Angular project
  2. Setup Angular Material
  3. Create Separate Angular Material Module File
  4. Understand MatTableModule Angular Material Data Table Service
  5. How to Implement Angular Table Pagination Easily?
  6. Angular Material Data Sorting in Table

Create Angular project

Install and setup Angular project to display the angular material data tables.

Run the following command.

ng new angular-material-data-table-tutorial

Answer the questions:

# ? Would you like to add Angular routing? = No
# ? Which stylesheet format would you like to use? = SCSS

Go to the Angular project folder.

cd angular-material-data-table-tutorial

Remove Angular TypeScript Errors

To get rid from the errors, set the given properties to false in tsconfig.json file:

"compilerOptions": {
 ...
 ...
   "strict": false,
   "noPropertyAccessFromIndexSignature": false,
 ...
 ...
},
  "angularCompilerOptions": {
    "strictTemplates": false
  }

Install Angular Material

To set up angular and Angular Material UI library, enter the following command.

ng add @angular/material

Select the Angular material theme from the given options:

? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink
❯ Indigo/Pink        [ Preview: https://material.angular.io?theme=indigo-pink ] 
  Deep Purple/Amber  [ Preview: https://material.angular.io?theme=deeppurple-amber ] 
  Pink/Blue Grey     [ Preview: https://material.angular.io?theme=pink-bluegrey ] 
  Purple/Green       [ Preview: https://material.angular.io?theme=purple-green ]

Select Yes for placing Angular Material Typography and Animations packages.

# ? Set up global Angular Material typography styles? Yes
# ? Set up browser animations for Angular Material? Yes

To check out the Angular material documentation please visit here.

Create Separate Angular Material Module File

For better project manageability we’ll create separate angular material module file and name it angular-material.module.ts.

We can keep various angular material ui components in this file, this file will be imported in main App Module file.

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
const materialModules = [
  MatTableModule,
  MatPaginatorModule,
  MatSortModule
];
@NgModule({
  imports: [
    CommonModule,
    ...materialModules
  ],
  exports: [
    ...materialModules
  ],
})
export class AngularMaterialModule { }

We have successfully imported the MatTableModule, MatPaginatorModule and MatSortModule data table component from material library.

Now, go to app.module.ts file and import the AngularMaterialModule.

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { AngularMaterialModule } from './angular-material.module';
@NgModule({
  declarations: [],
  imports: [
    AngularMaterialModule,
  ],
  providers: [],
  bootstrap: [],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

Understand MatTableModule Angular Material Data Table Service

The `mat-table` provides a Material Design styled data-table that can be used to display rows of data.

This table builds on the foundation of the CDK data-table and uses a similar interface for its data input and template, except that its element and attribute selectors will be prefixed with mat- instead of cdk-.

For more information on the interface and a detailed look at how the table is implemented, see the guide covering the CDK data-table.

Now to show data in data tables on frontend, please go to app.component.html file and add the following code.

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>
  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>
  <!-- Weight Column -->
  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef> Weight </th>
    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
  </ng-container>
  <!-- Symbol Column -->
  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef> Symbol </th>
    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

Then, go to styles.scss file and add the following code.

table {
  width: 100%;
}

Then, go to app.component.ts file and add the following code.

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = ELEMENT_DATA;
}
/* Static data */ 
export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}
const ELEMENT_DATA: PeriodicElement[] = [
  { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
  { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
  { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
  { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
  { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
  { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },
  { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },
  { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },
  { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },
  { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' },
];

To show the data in our angular data table tutorial, we’ve declared the 4 variables in the PeriodicElement interface.

In next step, we’ve declared the dummy data outside the AppComponent class and getting the data in datasource variable inside the AppComponent class. Then you can see column names via displayedColumns array.

Run the command to start the angular app.

ng serve

Angular Material Data Table

This will be your output data tables demo.

How to Implement Angular Table Pagination Easily?

Implementing pagination in Angular data table is not difficult. We are going to use MatPaginatorModule for integrating pagination.

Next, go to app.component.ts file and import the MatPaginator and MatTableDataSource and ViewChild service.

If every thing goes right, then you’ll get this output.

Angular 11 Data Table Pagination

Angular Material Data Sorting in Table

To sort the data in angular material data tables, we need to use MatSortModule.

Next, go to app.component.ts file and import the MatSort module.

import { Component, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
@Component({
  selector: 'app-root',
  styleUrls: ['./app.component.scss'],
  templateUrl: './app.component.html',
})
export class AppComponent {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
  @ViewChild(MatPaginator) paginator: MatPaginator;
  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
  }
}
export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}
const ELEMENT_DATA: PeriodicElement[] = [
  { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
  { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
  { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
  { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
  { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
  { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },
  { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },
  { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },
  { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },
  { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' },
  { position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na' },
  { position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg' },
  { position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al' },
  { position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si' },
  { position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P' },
  { position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S' },
  { position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl' },
  { position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar' },
  { position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K' },
  { position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca' },
];

In order to sort the data in angular material data tables we have bind the sort object to the dataSource array. Just go to app.component.html file and paste the below code.

<div class="mat-elevation-z8">
  <table mat-table [dataSource]="dataSource">
    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <th mat-header-cell *matHeaderCellDef>No.</th>
      <td mat-cell *matCellDef="let element">{{ element.position }}</td>
    </ng-container>
    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef>Name</th>
      <td mat-cell *matCellDef="let element">{{ element.name }}</td>
    </ng-container>
    <!-- Weight Column -->
    <ng-container matColumnDef="weight">
      <th mat-header-cell *matHeaderCellDef>Weight</th>
      <td mat-cell *matCellDef="let element">{{ element.weight }}</td>
    </ng-container>
    <!-- Symbol Column -->
    <ng-container matColumnDef="symbol">
      <th mat-header-cell *matHeaderCellDef>Symbol</th>
      <td mat-cell *matCellDef="let element">{{ element.symbol }}</td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
  </table>
  <mat-paginator
    [pageSizeOptions]="[5, 10, 20]"
    showFirstLastButtons
    aria-label="Select page of periodic elements"
  >
  </mat-paginator>
</div>

Finally, go to styles.scss file and include the following code.

table {
  width: 100%;
}
th.mat-sort-header-sorted {
  color: black;
}

Run command to start the application:

ng serve --open

We’ve finished working with Angular Material 8 data tables along with Angular Data Sorting and Angular pagination.

positronX.io - Tamso Ma Jyotirgamaya
Digamber

A Full-stack developer with a passion to solve real world problems through functional programming.

Recommended Posts

How to Implement Date Range Picker in Angular 16
Build Angular Material 16 File Browse/Upload UI Component
Create Angular Material 16 Copy to Clipboard Example
Angular Material 16 Dynamic Checkbox Tutorial Example
Angular Material 16 Progress Bar Tutorial Example
Create Login & Signup UI Templates in Angular Material 16
Angular 16 Autocomplete Tutorial with Angular Material
Angular Material 16 Tabs Tutorial with Example
Angular Material 16 Design Buttons Tutorial with Example
Build Modal / Dialog in Angular 16 with Angular Material
How to Create Custom Theme in Angular Material 16
Angular Material 16 Datepicker Example Tutorial