List

import {List} from '@gravity-ui/uikit';

§ItemsHeight

Determines the item list height (or a function that returns the height value for a list). It can be helpful when setting the list height dynamically, e.g., (items: []) => number.

§Items

Provides an array of items for a list:

<List items={["one", "two", "three", "four", "five", "six", "seven"]} itemsHeight={160} />

An item can be a scalar or an arbitrary value and must be truthy in any case. If it is an arbitrary value, make sure to specify the filtering and rendering functions. The default render only provides an item as text.

The special item.disabled field disables an item.

The render and height customization provides plenty of room for experimenting. For example, the code below allows you to emulate groups:

<List items={[{title: 'one', group: true,disabled: true}, {title: 'two'},
    {
      title: 'three',
      group: true,
      disabled: true,
    },
    {
      title: 'four',
    },
  ]} onItemClick={(value) => console.log(value)}
  renderItem={(item) => {
    if (item.group) {
      return (
        <div className={'group'}>
          <div className={'select-text'}>{item.title}</div>
        </div>
      );
    }
    return (
      <div className={'select'}>
        <div className={'select-text'}>{item.title}</div>
      </div>
    );
  }}
  itemHeight={(item) => (item.group ? 24 : 36)}
  itemsHeight={160}
  filterItem={(filter) => (item) => item.title.includes(filter)}
/>

§Filterable

The filterable property disables the input to search for an item if its value is false. Its default value is true.

<List items={["one", "two", "three", "four", "five", "six", "seven"]} itemsHeight={160} filterable={false} />

§Sortable

The sortable property enables swapping list items if its value is true. Its default value is false.

<List items={["one", "two", "three", "four", "five", "six", "seven"]} itemsHeight={160} sortable={true} />

§Virtualization

To enable virtualization, make sure one of these two conditions is met:

1. You set the itemsHeight property. In this case, the list height will be fixed and equal to that value.
2. You set the display: flex style for the list parent container. In this case, the list will adapt to the container width.

§External management

Sometimes, you may want to manage the activity of items from the keyboard by maintaining the focus on an external item. The onKeyDown event forwarding to a list may help you here. Likewise, you can forward onFocus and onBlur if you need to repeat the behavior when an active item is lost.

§Filter

The filter property provides the filter value used with external sorting.

§PropTypes