List

Used to display a set of data

Import 

import { List } from 'rsuite';

// or
import List from 'rsuite/List';

Examples

Default

Size

Border

Hover

Sortable

index of List.Item is required. (be unique in the collection)

Collection Sort

colection has its own space, index of List.Item is required. (be unique in the collection)

Custom

Props

<List> 

interface Payload {
  collection: number | string;
  node: HTMLElement;
  newIndex: number;
  oldIndex: number;
}
Property Type (Default) Description
autoScroll boolean true auto scroll when overflow
bordered boolean bordered
hover boolean hover animation
onSort (payload:Payload) => void callback of end of sorting
onSortEnd (payload:Payload) => void callback of end of sorting
onSortMove (payload:Payload) => void callback of moving over a list items
onSortStart (payload:Payload) => void callback of beginning of sorting
pressDelay number 0 delay before trigger sort
size enums: 'lg' | 'md' | 'sm' md list items size
sortable boolean can change list item order
transitionDuration number 300 duration of sort animation

<List.Item>

Property Type (Default) Description
collection number | string 0 collection of list item
disabled boolean not allowed to move this item
index number(required when sortable) index of item(must be unique in the collection)