MatTableDataSource column header misalignment after dynamic page size change
0 reputation · 16 Mar 2020, 00:13 UTC
Header layout regression with server‑side pagination
When MatTableDataSource consumes server‑side data and the page size is changed programmatically, the column headers can shift out of alignment with their corresponding cells. The misalignment persists until a full table re‑render or browser resize forces a layout recalculation.
The issue appears when pageSize is updated on the paginator while the data source still holds the previous page’s row count. Internal header width calculations do not automatically reconcile with the new virtual scroll viewport dimensions.
Constraints include Angular Material 15–16 version differences in virtual scrolling implementation and the requirement to keep server‑side sorting and filtering active during the page size transition.
Open questions
- Which lifecycle hook or CDK virtual scroll event reliably signals that header widths must be recomputed after a page size change?
- Is there a supported API to trigger header layout synchronization without forcing a full table re‑render?
- Does the regression persist in the latest @angular/material release when using
CdkVirtualScrollViewportdirectly instead of the built‑in paginator?
angularmaterial