DataTable

DataTable is often used table logic encapsulated component, it can save up some boilerplate setup from react-table & quick start with your async table data.

Basic

Checkable

Query

API

DataTable
PropDescriptionTypeDefault
columnsThe core columns configuration object for the entire tableArray<Column>[]
dataThe data array that you want to display on the tableArray<any>[]
loadingWheter to display loading indicator on the tablebooleanfalse
onCheckBoxChangeCallback when row checkbox is changed, return a checkbox value & changed row data(checked: boolean, row: any) => void-
onIndeterminateCheckBoxChangeCallback when indeterminate checkbox is changed, return indeterminate checkbox value & all rows data(checked: boolean, rows: any) => void-
onPaginationChangeCallback when pagination changed(pageIndex: number) => void-
onSelectChangeCallback when page size selector changed(pageSize: number) => void-
onSortCallback when any column of sorted changed, return sort order & sorted column identifier(pageSize: {order: 'desc' | 'asc', key: string}) => void-
pageSizesOptions of selectable page sizesnumber[][10, 25, 50, 100]
skeletonAvatarColumnsSpecify skeleton avatar display is which column when loading is truenumber[]-
skeletonAvatarPropsProps for skeleton avatarAvatarProps-
pagingDataPaging state of tthe table{total: number, pageIndex: number, pageSize: number}{total: 0, pageIndex: 1, pageSize: 10}