• /
  • Log in

List

<List> allows you to efficiently render a large list of items.

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

If the width and height are not specified through the style or className props, it will fill the height and the width of the container.

Usage

import { List } from 'nr1'

Examples

Props

childrenrequirednode|function

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.

classNamestring

Classname for custom styling.

fullHeightboolean
DEFAULT
false

Expands the stack to occupy all available height.

fullWidthboolean
DEFAULT
false

Expands the stack to occupy all available width.

itemsany[]
DEFAULT
[]

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.

onLoadMorefunction

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.

function (
cursor: Cursor //

Items to load.

)
rowCountnumber

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.

rowHeightrequirednumber

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.

spacingTypeenum[]

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.

<Array of
<One of
List.SPACING_TYPE.EXTRA_LARGE,
List.SPACING_TYPE.LARGE,
List.SPACING_TYPE.MEDIUM,
List.SPACING_TYPE.NONE,
List.SPACING_TYPE.OMIT,
List.SPACING_TYPE.SMALL,
>
>
styleobject

Inline style for custom styling.

testIdstring

Adds a data-test-id attribute.

Use it to target the component in unit and e2e tests.

Type definitions

RenderCallbackArguments

{
item: any, //

Item to render.

index: number, //

Index of the item in the items array.

items: any[], //

Array of items which we're iterating on.

}

Cursor

{
startIndex: number, //

First index of the range of items to load.

stopIndex: number, //

Last index of the range of items to load.

}
Create issueEdit page
Copyright © 2021 New Relic Inc.