Implementing Client-Side Pagination and Sorting with MatTableDataSource

Solving Data Management in Angular Material Tables

Managing large arrays of data in a UI often leads to performance lag or complex manual logic for slicing arrays and tracking indices. The MatTableDataSource class solves this by acting as a data wrapper that integrates directly with Angular Material's paginator and sort components. Instead of writing custom logic to handle slice() or sort() operations on your arrays, you delegate these tasks to the data source wrapper.

The Integration Mechanism

To enable pagination and sorting, you must link the MatTableDataSource instance to the MatPaginator and MatSort directives. Because these directives rely on DOM elements, the connection must occur after the view has initialized, specifically within the ngAfterViewInit lifecycle hook.

Worked Implementation Example

This example assumes you are using Angular Material 15+ and have imported MatTableModule, MatPaginatorModule, and MatSortModule in your component or module.

// user-table.component.ts
import { Component, ViewChild, AfterViewInit } from '@angular';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';

export interface UserData {
  id: number;
  name: string;
  email: string;
}

@Component({
  selector: 'app-user-table',
  templateUrl: './user-table.component.html'
})
export class UserTableComponent implements AfterViewInit {
  displayedColumns: string[] = ['id', 'name', 'email'];
  
  // Initialize the data source with a raw array
  dataSource = new MatTableDataSource<UserData>([
    {id: 1, name: 'Alice', email: '[contact removed]'},
    {id: 2, name: 'Bob', email: '[contact removed]'},
    {id: 3, name: 'Charlie', email: '[contact removed]'},
    {id: 4, name: 'David', email: '[contact removed]'},
    {id: 5, name: 'Eve', email: '[contact removed]'},
  ]);

  // Access the DOM elements via ViewChild
  @ViewChild(MatPaginator) paginator! : MatPaginator;
  @ViewChild(MatSort) sort! : MatSort;

  ngAfterViewInit() {
    // Link the paginator and sort to the data source
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }
}

In the corresponding HTML, the mat-sort-header directive must be applied to the header cells, and the matColumnDef must match the keys of the data object exactly.

<table mat-table [dataSource]="dataSource" matSort>
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <ng-container matColumnDef="email">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Email </th>
    <td mat-cell *matCellDef="let element"> {{element.email}} </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></mat-paginator>

Critical Limitations and Common Pitfalls

• Memory Constraints: MatTableDataSource performs client-side operations. This means the entire dataset must be loaded into the browser's memory. For datasets exceeding a few thousand rows, this will cause UI freezing. In such cases, you must implement a custom DataSource class that handles API requests for specific page indices (server-side pagination).
• Lifecycle Timing: A common error is attempting to assign this.dataSource.paginator = this.paginator inside ngOnInit. Because @ViewChild queries are not resolved until the view is rendered, this.paginator will be undefined, and pagination will fail to initialize.
• Case Sensitivity: The matColumnDef string must be an exact match for the property name in your data object (e.g., 'email' vs 'Email'). If they differ, the sorting logic will fail to identify the property to sort by, and cells will render empty.

Verification and Testing

To verify the implementation is functioning correctly, perform the following checks:

1. Pagination Check: Change the page size in the paginator dropdown. The number of visible rows should update immediately without a page reload.
2. Sort Check: Click a column header. The arrow indicator should appear, and the row order should change. Click again to toggle between ascending and descending.
3. Data Refresh: Update the this.dataSource.data array programmatically. The table should automatically refresh and reset the pagination index to zero.