import { Component , OnInit , ViewChild } from '@angular/core' ; import { MatPaginator , MatSort , MatTableDataSource } from '@angular/material' ; export interface UserData { id : string ; name : string ; progress : string ; color : string ; } /** Constants used to fill up our data base. */ const COLORS = [ 'maroon' , 'red' , 'orange' , 'yellow' , 'olive' , 'green' , 'purple' , 'fuchsia' , 'lime' , 'teal' , 'aqua' , 'blue' , 'navy' , 'black' , 'gray' ] ; const NAMES = [ 'Maia' , 'Asher' , 'Olivia' , 'Atticus' , 'Amelia' , 'Jack' , 'Charlotte' , 'Theodore' , 'Isla' , 'Oliver' , 'Isabella' , 'Jasper' , 'Cora' , 'Levi' , 'Violet' , 'Arthur' , 'Mia' , 'Thomas' , 'Elizabeth' ] ; title @ Component ( { selector : 'table-overview-example' , styleUrls : [ 'table-overview-example.css' ] , templateUrl : 'table-overview-example.html' , } ) export class TableOverviewExample implements OnInit { displayedColumns : string [ ] = [ 'id' , 'name' , 'progress' , 'color' ] ; dataSource : MatTableDataSource < UserData > ; @ ViewChild ( MatPaginator ) paginator : MatPaginator ; @ ViewChild ( MatSort ) sort : MatSort ; constructor ( ) { const users = Array . from ( { length : 100 } , ( _ , k ) => createNewUser ( k + 1 ) ) ; this . dataSource = new MatTableDataSource ( users ) ; } ngOnInit ( ) { this . dataSource . paginator = this . paginator ; this . dataSource . sort = this . sort ; } applyFilter ( filterValue ) { this . dataSource . filter = filterValue . trim ( ) . toLowerCase ( ) ; if ( this . dataSource . paginator ) { this . dataSource . paginator . firstPage ( ) ; } } } /** Builds and returns a new User. */ function createNewUser ( id ) { const name = NAMES [ Math . round ( Math . random ( ) * ( NAMES . length - 1 ) ) ] + ' ' + NAMES [ Math . round ( Math . random ( ) * ( NAMES . length - 1 ) ) ] . charAt ( 0 ) + '.' ; return { id : id . toString ( ) , name : name , progress : Math . round ( Math . random ( ) * 100 ) . toString ( ) , color : COLORS [ Math . round ( Math . random ( ) * ( COLORS . length - 1 ) ) ] } ; }