List

It can be either an array of <ListItem> elements or a render callback (Function as Children). The recommendation is to use the render callback since it will virtualize all the items, making it very fast when a large numer of items is provided.

When using the render callback items need to be provided through the items prop.

Classname for custom styling.

Expands the stack to occupy all available height.

Expands the stack to occupy all available width.

The items to be used when rendering.

They are required when rendering items with a render callback.

Each item can have any structure and type possible, and will the corresponding one will be provided when rendering each element list.

Callback fired when more items must be loaded. This happens when you're lazy loading the items and the items that are about to render cannot be found in the items array.

This callback should be used to fetch/load the missing items from the backend or other sources.

The returned Promise should be resolved once item data has finished loading. It will be used to determine when to refresh the list with the newly-loaded data. This callback may be called multiple times in reaction to a single scroll event.

Number of rows.

By default it's equal to length of array passed in the items prop.

You should specify the rowCount when you know the total number of items but you want to lazy load them while scrolling.

Height of the list row.

Required when rendering items with the render callback (Function as Children). This is a provisional height until the cell content is measured by temporarily rendering it in a way that is not visible to the user.

Spacing property. Spacing is defined as a tuple of zero to four values, which follow the same conventions as CSS properties like margin or padding. To omit a value, use SPACING_TYPE.OMIT.

Inline style for custom styling.

Adds a data-test-id attribute. Use it to target the component in unit and E2E tests.

For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.

For example, my-nerdpack.some-element.

Note: You might not see data-test-id attributes as they are removed from the DOM, to debug them pass a e2e-test query parameter to the URL.

Represents the width of the list. It is always a string, and it can be of one of the following types:

• 'fit-content': Enables auto-sizing of the <List> container. Intended for use with virtualised <List>s to ensure the container fits the width of the widest <ListItem>. Resizes as more items are loaded by the <List> component. Does not affect the height of the <List> component, which will continue to fit the height of the container the <List> component is in.

• 'auto': The default value for <List>. This prompts the <List> component to size according to its default styling, allowing it to expand to fill the width and height of its container. Content is then sized to fit the resulting width of the <List> component.