bug(table): Performance issue when paginator is set on AfterViewInit

[martinboue]

trafficstars

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

According to documentation the recommended way of setting up a table with paginator is by doing this:

@ViewChild(MatPaginator) paginator: MatPaginator;
dataSource: MatTableDataSource<T>;

ngOnInit(): void {
   this.dataSource.data = this.getMillionsOfRows();
}

ngAfterViewInit() {
   this.dataSource.paginator = this.paginator;
}

But because no paginator is defined until view is initialized, the whole table will be rendered the first time which can cause a significant performance issue.

In my case real-case project, I'm experiencing ~750ms to render 600 elements in a 8 columns table, and ~80 ms with workaround n°2.

Workarounds

1. Use @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; and set paginator to dataSource on init. => Does not work if paginator is in a conditional block (@if for example)
2. or, Set data to dataSource after view init. => Not great, the table will be rendered empty at first.

Reproduction

Stackblitz link: https://material.angular.io/components/table/examples#table-overview Steps to reproduce:

1. Open Material example in Stackblitz
2. Edit table-overview-example.ts and add the following method to the component:

test() {
   console.log('test');
}

3. Edit table-overview-example.html and change the first <td> tag to:

<td mat-cell *matCellDef="let row"> {{ test() }} {{row.id}} </td>

4. Open browser the console and refresh the view

Expected Behavior

5 logs, i.e. the page size.

Actual Behavior

100 logs, i.e. the total number of elements.

Environment

• Angular: >18
• CDK/Material: >18
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows