---
schema_version: "1"
id: 2f3596eaab3be05dba21b81ffe60a6bd83cb8bfcc3dd254f04fe46a8734fedfb
title: Dynamic List Item (Developer Preview)
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/lwc/components/lightning/dynamicListItem/lightning-dynamic-list-item.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-dynamic-list-item.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: a5bbecdf15c44da7eb7abc0b6f794d9e5d3683655abd14fa9cc7883ee9350e85
products:
  - Lightning Component Reference
---
# 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](https://help.salesforce.com/s/articleView?id=xcloud.release_manager.htm).

**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](/docs/platform/lightning-component-reference/guide/lightning-dynamic-list-container.html).

## Usage

**important:** To use dynamic lists, opt in to the Dev channel in [Salesforce Release Manager](https://help.salesforce.com/s/articleView?id=xcloud.release_manager.htm).

`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.

<!-- prettier-ignore -->
```html
<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.

```css
/* 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](https://developer.salesforce.com/docs/platform/lwc/guide/reference-graphql-wire.html). For example, you can request 1000 contact records and each subset renders in the DOM as you scroll.

```javascript
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;
  }
}
```

## See Also

[`lightning-dynamic-list-container`](/docs/platform/lightning-component-reference/guide/lightning-dynamic-list-container.html)

[Lightning Web Components Developer Guide: Data Guidelines](https://developer.salesforce.com/docs/platform/lwc/guide/data-guidelines.html)

[GraphQL API Developer Guide](https://developer.salesforce.com/docs/platform/graphql/guide/)


:::::

:::::tab
::component-specification{component="dynamicListItem" model="lwc" namespace="lightning"}

:::::

::::::