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.
Identify Poor Datatable Performance
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.
Improve Your Datatable Performance
Here are several ways to improve your datatable performance.
Use Smaller Datasets When Possible
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.
Use Event Handlers to Load More Data When Needed
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.
Reserve Inline Editing Functionality for Critical Fields
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.
Simplify Your Custom Data Types
If you use custom data types, review your code to ensure that you follow best practices. Using a custom data type on lightning-datatable can increase code complexity and add extra nesting within a datatable cell. Performance can be impacted especially when you’re working with a large data set. When creating a custom data type, consider these guidelines.
Use simple code within the custom data type. For example, minimize the use of setTimeout() and promises. Don’t use lightning-datatable for complex interactions.
Use fewer nesting levels within the custom data type template. The browser takes longer to render more elements in the DOM.
To improve display time, load a maximum of 50 rows at a time. For example, use LIMIT to specify no more than 50 rows to be returned. Or implement pagination using LIMIT with the OFFSET clause. You can also paginate your results easily using GraphQL API. Alternatively, consider infinite loading to display more data when the user scrolls.
If your datatable has more than 250 rows, use fewer than 20 columns to reduce the amount of data presented. Tables with too much data have poor performance, are hard to read, and can overwhelm users.
This release is in preview. Features described here don't become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can't guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.
j