bug(table): Performance issue when paginator is set on AfterViewInit #29759
Labels
area: material/table
needs investigation
A member of the team needs to do further investigation to determine the root cause
P3
An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
perf
This issue is related to performance
Is this a regression?
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:
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
@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)=> 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:
<td>
tag to:Expected Behavior
5 logs, i.e. the page size.
Actual Behavior
100 logs, i.e. the total number of elements.
Environment
The text was updated successfully, but these errors were encountered: