angular / angular/components

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

Open
#29,759 0 comments 0 reactions 0 assignees View on GitHub
area: material/table needs investigation P3 perf
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### 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](https://material.angular.io/components/table/overview#table-pagination) the recommended way of setting up a table with paginator is by doing this:

```
@ViewChild(MatPaginator) paginator: MatPaginator;
dataSource: MatTableDataSource;

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 `` tag to:
```
{{ test() }} {{row.id}}
```
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

Contributor guide

Open the contributing guide

Research direction

Start with the Material table overview reproduction, then inspect table-overview-example.ts and table-overview-example.html as described. Run the example with the added test() call and compare the initial render logs with the expected five page-size logs rather than 100 total-row logs. Done means paginator setup no longer causes the full table to render first.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend, performance
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.