List

Used to display a set of data

Import

import { List } from 'rsuite';

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

Examples

Basic

Roses are red
Violets are blue
Sugar is sweet
And so are you

Size

Roses are red
Violets are blue
Sugar is sweet
And so are you

Roses are red
Violets are blue
Sugar is sweet
And so are you

Roses are red
Violets are blue
Sugar is sweet
And so are you

Border

Roses are red
Violets are blue
Sugar is sweet
And so are you

Hover

Roses are red
Violets are blue
Sugar is sweet
And so are you

Sortable

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

Roses are red
Violets are blue
Sugar is sweet
And so are you

Collection Sort

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

collection0 item0
collection0 item1
collection1 item0
collection1 item1
collection2 item0
collection2 item1
I'm last one.

Fixed Item Sort

based on collection, Item can fixed during sort order.

1
Chrome
2
Edge
3
FireFox
4
Safari

Custom

Hong Kong Free Walk @ Tsim Sha Tsui
Yvnonne
2017.10.13 14:50
Peak
3,223
+433
User visits (UV)
433
+33
Celebrate Mid-Autumn Festival
Daibiao
2017.10.13 14:50
Peak
3,223
+238
User visits (UV)
238
+28
Live basketball
Bidetoo
2017.10.13 14:50
Peak
4,238
-239
User visits (UV)
239
+29
Legislative Yuan meeting live
Yvnonne
2017.10.13 14:50
Peak
4,238
+2321
User visits (UV)
921
+91
Iwank Patch
Tony
2017.10.13 14:50
Peak
2,321
+1321
User visits (UV)
321
+132

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