How can I update the table page index when users click on next and previous buttons in an API that fetches data based on a specified Page number? It's important to note that I have already created a shared table.
@Input() columns: Column[] = [];
@Input() rows!: Row<T>[];
@ViewChild(MatSort, { static: true }) matSort!: MatSort;
@ViewChild(MatPaginator, { static: false }) matPaginator!: MatPaginator;
@Input() isPageable = false;
@Input() paginationSizes: number[] = [5, 10, 15];
@Input() defaultPageSize = this.paginationSizes[1];
pageNo = 0;
@Input() PageIndex = 0;
public dataSource = new MatTableDataSource<Row<T>>();
public columnNames: string[] = []
constructor(private cd: ChangeDetectorRef) { }
ngOnInit(): void {
this.dataSource.data = this.rows;
this.columnNames = this.columns.map((column) => column.name.toString());
this.dataSource.paginator = this.matPaginator;}
ngAfterViewInit(): void {
this.dataSource.paginator = this.matPaginator;}
pageEvents(event: any) {
console.log("PageIndex " + "=" + event.pageIndex);
if (event.pageIndex > this.pageNo) {
this.PageIndex = event.pageIndex
console.log(this.PageIndex)