Dynamic List Item (Developer Preview)

lightning-dynamic-list-item

Represents a row in a lightning-dynamic-list-container component. Each row is dynamically positioned by the container based on the current scroll position. This component requires API version 67.0 or later. To use this component, select the Dev channel in Salesforce Release Manager.

For Use In

Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App, Mobile Offline

::::::tabset{tabs='["Develop", "Specifications"]'}

:::::tab

note: Working with dynamic lists is available as a developer preview. This feature isn’t generally available unless or until Salesforce announces its general availability in documentation or in press releases or public statements. All commands, parameters, and other features are subject to change or deprecation at any time, with or without notice. Don't implement functionality in production with these commands or tools.

lightning-dynamic-list-item represents a row in the lightning-dynamic-list-container component.

Usage

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

lightning-dynamic-list-container and lightning-dynamic-list-item must be part of the same LWC component to share the same shadow DOM. Use lightning-dynamic-list-item within lightning-dynamic-list-container and place them in the same LWC template.

When building your lists, 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 container.

lightning-dynamic-list-item doesn't provide any styling. You can use custom or SLDS utility classes to create a visual container for your list items.

<lightning-card title="Dynamic Lists - Contacts" icon-name="standard:contact">
  <div class="slds-card__body slds-p-around_medium">
    <lightning-dynamic-list-container
      list-items={listItems}
      onrenderlistitems={handleRenderListItems}
    >
      <template for:each={listItemsToRender} for:item="item">
        <lightning-dynamic-list-item key={item.id} item-id={item.id}>
          <div class="contact-tile slds-p-around_small">
            <p>{item.name}</p>
            <p>{item.email}</p>
          </div>
        </lightning-dynamic-list-item>
      </template>
    </lightning-dynamic-list-container>
  </div>
</lightning-card>

Include a height for lightning-dynamic-list-container. The height doesn't have to be fixed but it must be bounded to ensure proper rendering and scroll behavior.

/* Required: bounded height for lightning-dynamic-list-container */
.list-container {
  height: 400px;
}

.contact-tile {
  border: 1px solid #c2c8d4;
  margin: 0.5rem;
}

Load Data

Here's how you can load record data by using the lightning/graphql module. For example, you can request 1000 contact records and each subset renders in the DOM as you scroll.

import { LightningElement, wire } from "lwc";
import { gql, graphql } from "lightning/graphql";

export default class BaseComponents extends LightningElement {
  // The full list of items from GraphQL
  _listItems = [];

  // The subset of items for rendering by lightning-dynamic-list-container
  _listItemsToRender = [];

  // Expose a list reference for lightning-dynamic-list-container
  get listItems() {
    return this._listItems;
  }

  // Populate data once from GraphQL wire
  // Avoids repeated new array creation
  @wire(graphql, {
    query: gql`
      query getContacts {
        uiapi {
          query {
            Contact(first: 1000, orderBy: { Name: { order: ASC } }) {
              edges {
                node {
                  Id
                  Name {
                    value
                  }
                  Email {
                    value
                  }
                }
              }
            }
          }
        }
      }
    `,
  })
  wiredContacts({ errors, data }) {
    if (data) {
      this._listItems = data.uiapi.query.Contact.edges.map((edge) => ({
        id: edge.node.Id,
        name: edge.node.Name?.value || "Unknown",
        email: edge.node.Email?.value || "N/A",
      }));
    } else if (errors) {
      this._listItems = [];
      // Handle the errors
    }
  }

  get listItemsToRender() {
    return this._listItemsToRender;
  }

  handleRenderListItems(event) {
    this._listItemsToRender = event.detail.listItemsToRender;
  }
}

Dynamic List Item (Developer Preview)

Usage

Load Data

See Also