Material Angular Table Pagination,Material Angular Table, Part 1

Material Angular Table with All Features Part1

We will experiment with material angular tables' all feature.
Code Action @ StackBlitz

Before starting the experiment points to be done as below
  • To create  angular project refer here
  • Add material dependency refer here
  • Import angular material Tables' API to App module
  • import {MatTableModule} from '@angular/material/table';

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


The simplest way to provide data to the table is by passing a data array to the table's data source input.MatTableDataSource is the best data source type for mat table. have to assign the array object to MatTableDataSource as below.
//in Html template
< table mat-table [dataSource]="custSource" matSort class="mat-elevation-z8" </ table >
// To Import import {MatTableDataSource} from '@angular/material';
// in component declare MatTableDataSource
public custSource: any = new MatTableDataSource(customerData) ;

Api to import  MatPaginatorModule as below in app.module.ts
import {MatPaginatorModule} from '@angular/material/paginator'
Add below code in html file at bottom of the Mat-table
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
in component.ts
import {MatTableDataSource, MatSort, MatPaginator} from '@angular/material';
// create a viewchild for matpaginator
@ViewChild(MatPaginator) paginator: MatPaginator;
// Assign the paginator to datasource object
ngOnInit() {
this.custSource.paginator = this.paginator;

Post a Comment