List

Used to display a set of data

Import 

import { List } from 'rsuite';

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

Examples

Basic

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)

Fixed Item Sort

based on collection, Item can fixed during sort order.

Custom

Props

<List>

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 '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)
size 'lg' | 'md' | 'sm' (md) current item size

ts:Payload 

interface Payload {
  collection: number | string;
  node: HTMLElement;
  newIndex: number;
  oldIndex: number;
}
Vercel banner