List

List UI Component

Demo

API

List

PropertyDescriptionTypeDefault
borderedToggles rendering of the border around the listbooleanfalse
dataSourceDataSource array of arrays for listany[][]-
dashedDefine type of divider linebooleantrue
gridThe grid type of list. You can set grid to something like {gutter: 16, column: 4}object-
headerList header rendererstring-
itemLayoutThe layout of list, default is horizontal, If a vertical list is desired, set the itemLayout property to verticalstring-
loadingShows a loading indicator while the contents of the list are being fetchedboolean / objectfalse
loadMoreShows a load more contentstring / React.ReactNode-
localei18n text including empty textobjectemptyText: 'No Data'
optionsOptions for radio group, if radio prop is providedRadioGroupProps-
paginationPagination config, hide it by setting it tofalsebooleanobject
splitToggles rendering of the split under the list itembooleantrue
renderItemCustomize list item when using dataSourceitem => ReactNode-
rowKeyItem's unique key, could be a string or function that returns a stringstring / (record) = > stringkey
radioWhether or not list should be wrapper with radio groupboolean-

List.TextItem

PropertyDescriptionTypeDefault
disabledIf element is disabledboolean-
iconItem will be prefixed with this elementReact.ReactNode-
dangerIf element should be marked as danger action (ie. delete)boolean-
actionsActions for item, will be rendered at the end of the rowReact.ReactNode-
onSelectCallback for selecting item(e?: React.MouseEventReact.KeyboardEvent) => void
sizeSize of item in listsmall / mediummedium

List.Divider

PropertyDescriptionTypeDefault
dashedDash type of a linebooleantrue