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.

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.

See Also