Improve Datatable Performance
Datatables can sometimes have performance issues when loading a large amount of data and handling user interaction. This section describes ways to create performant datatables with lightning-datatable.
Using lightning-datatable is a common way to display Salesforce data in a table. Everything the lightning-datatable component displays loads in the browser on the user’s computer. Depending on the amount and type of data being rendered, the browser must use more or less processing power (memory). Poor performance for datatables can look like:
- The datatable is slow when loading.
- There's significant lag in datatable interactions.
- The datatable doesn’t load at all.
- Loading the datatable causes the whole page to freeze and, in some cases, causes the browser to crash.
To make datatables more performant, you can use smaller datasets, load more data on infinite scroll, and reserve inline editing for critical fields.
Here are several ways to improve your datatable performance.
Salesforce testing shows that datatable performance is best with a maximum of 1,000 rows and 5 columns. Adding more rows or columns can degrade performance. Your own testing can help you determine the number of rows and columns that provide acceptable performance for your use case.
By enabling infinite loading, you can load a subset of data initially and then display more data when the user scrolls to the end of the table.
To enable infinite loading, specify the enable-infinite-loading attribute and provide an event handler by using the onloadmore attribute. For more information on infinite scrolling, see the Using Infinite Scrolling to Load More Rows section in the lightning-datatable documentation in the Component Reference.
The inline editing capability affects performance. The more columns that enable inline editing, the slower the datatable performs. Add inline editing capability only to columns that require it. For more information on inline editing, see Display Data in a Table with Inline Editing.