MatTableDataSource column header misalignment after dynamic page size change

Answer

Calling table.renderRows() after you change matPaginator.pageSize forces the MatTable to rebuild its rows and synchronises header widths, removing the misalignment.

Likely explanation

The MatTable’s internal header width calculation runs only on the initial render and does not automatically recompute when the paginator’s pageSize changes, leaving header widths out of sync with the virtual‑scroll viewport after the row count changes.

Confirmed facts

• In Angular Material 15 and 16, updating matPaginator.pageSize while MatTableDataSource still holds the previous page’s row count causes header cells to shift relative to body cells until a layout trigger such as a window resize or full table re‑render occurs.
• Invoking table.renderRows() after the pageSize change forces the table to rebuild its row view and triggers header width synchronization, correcting the alignment without a full component reload.
• An alternative is to run change detection outside Angular (e.g., NgZone.run(() => {})) or call the private method table._updateColumnCssVar(), but the latter is not guaranteed across releases.

Steps to fix

1. Subscribe to the paginator’s page event (or detect when you programmatically set paginator.pageSize).
2. After updating paginator.pageSize, call this.table.renderRows() where table is the MatTable reference obtained via @ViewChild(MatTable).
3. If you prefer to keep Angular’s zone, wrap the call in NgZone.run to guarantee change detection:

import { AfterViewInit, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatTable } from '@angular/material/table';
import { NgZone } from '@angular/core';

export class MyComponent implements AfterViewInit {
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild(MatTable) table!: MatTable;

  constructor(private ngZone: NgZone) {}

  ngAfterViewInit(): void {
    this.paginator.page.subscribe(() => {
      // pageSize may have changed via UI or programmatically
      this.ngZone.run(() => {
        this.table.renderRows();
      });
    });
  }

  // Example of programmatic change
  changePageSize(newSize: number): void {
    this.paginator.pageSize = newSize;
    this.paginator._changePageSize(this.paginator); // paginator internal update
    this.ngZone.run(() => this.table.renderRows());
  }
}