Stale row rendering in MatTable during in-place array mutation

Data Source Synchronization

Angular Material's MatTable relies on the dataSource reference to trigger UI updates. When the underlying data array is mutated using methods such as push() or splice(), the table does not automatically detect these changes because the object reference remains identical.

OnPush Change Detection Constraints

This behavior is more pronounced when using ChangeDetectionStrategy.OnPush. In this configuration, the component skips change detection cycles unless a new reference is assigned to the data source or an internal event triggers a check, leading to a mismatch between the application state and the rendered DOM.

While calling renderRows() or reassigning the array reference can force a refresh, there is a design trade-off between manual notification and the performance overhead of an automated iterable differ.

• Does MatTable provide a mechanism to track internal array mutations without requiring a full reference reassignment?
• What is the recommended approach to balance rendering performance with data synchronization when using OnPush?