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';

Feature's

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

DataSource

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) ;

Pagination

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;
}