Load Large Lists Dynamically (Developer Preview)

Handle massive amounts of data without slowing down your web browser. Whether you’re showing 50 or 5,000 items, dynamic lists offer a smooth user experience by using virtualization to render items as you scroll.

Where: This change applies to Lightning Experience, Experience Builder sites, and all versions of the mobile app in all editions. This change is available only to organizations that have opted in to the Dev channel in Salesforce Release Manager.

Note The Dev Channel provides access to features that are not generally available and have been designated as pilot, beta, limited release, or developer preview. Their use is at the Customer’s sole discretion and is subject to the Beta Services Terms at Agreements - Salesforce.com.

How: To use dynamic lists, opt in to the Dev channel in Salesforce Release Manager.

In your custom component, use the lightning-dynamic-list-container and lightning-dynamic-list-item base components.

To work with dynamic lists:

• Place the dynamic list components in a container with a bounded height. The height constraint ensures proper rendering and scroll behavior.
• Wrap the entire list with lightning-dynamic-list-container.
• Wrap each row with lightning-dynamic-list-item.
• Use a unique item-id on each item so that the component can track focus correctly even when items scroll off-screen.
• Attach the renderlistitems event listener to lightning-dynamic-list-container. When you scroll, the component continuously dispatches the event to inform the parent which sliced list to render. When the sliced list renders, the component adjusts the position of each row.

Dynamic lists provide these functionalities.

• List virtualization with infinite scrolling: The list dispatches a loadmore event to notify the parent component to load additional rows. It loads only the items currently visible in the user's window, which significantly reduces browser memory usage.
• Focus preservation: The list keeps track of the focused row, maintaining focus even during virtualization. Even if you click a row and scroll it off-screen, the list ensures focus is maintained.
• Comprehensive accessibility: The list provides native support for screen readers and keyboard navigation. It automatically handles complex interactions like Home, End, and Arrow key navigation. With Browse Mode detection, the list also identifies when a keyboard user is navigating without triggering standard focus events and announces a live message suggesting that they switch to Focus Mode to ensure that the virtual cursor and the scrolling list remain perfectly aligned.

Here are some considerations for working with dynamic lists.

• Place lightning-dynamic-list-container adjacent to lightning-dynamic-list-item. Embedding elements or other components between the dynamic list components isn’t supported.
• Place both lightning-dynamic-list-container and lightning-dynamic-list-item in the same LWC template.
• Avoid padding on elements between lightning-dynamic-list-container and lightning-dynamic-list-item. Use margin on rows wrapped by lightning-dynamic-list-item for spacing between rows and between rows and the container.
• Remove overflow: scroll or similar styles from your list container. lightning-dynamic-list-container handles scrolling on dynamic lists.