Table

Table UI Component

Demo

API

Table

PropertyDescriptionTypeDefault
borderedWhether to show all table bordersbooleanfalse
childrenColumnNameThe column contains children to displaystring / []children
columnsColumns of tableColumnProps[]-
componentsOverride default table elementsTableComponents-
dataSourceData record array to be displayedany / []-
defaultExpandAllRowsExpand all rows initiallybooleanfalse
defaultExpandedRowKeysInitial expanded row keysstring / []-
expandedRowKeysCurrent expanded row keysstring / []-
expandedRowRenderExpanded container render for each row(record, index, indent, expanded) => React.ReactNode-
expandIconCustomize row expand Icon. Ref example(props) => React.ReactNode-
expandRowByClickWhether to expand row by clicking anywhere in the whole rowbooleanfalse
footerTable footer renderer(currentPageData) => React.ReactNode
indentSizeIndent size in pixels of tree datanumber15
loadingLoading status of tableboolean / objectfalse
localei18n text including filter, sort, empty text, etcobjectfilterConfirm: 'Ok'
filterReset: 'Reset'
emptyText: 'No Data'
paginationConfig of pagination. You can ref table pagination config or full pagination document, hide it by setting it to falseobject
rowClassNameRow's className(record, index: number) => string-
rowKeyRow's unique key, could be a string or function that returns a stringstring / (record) => stringkey
scrollSet horizontal or vertical scrolling, can also be used to specify the width and height of the scroll area, could be number, percent value, true and 'max-content'{ x: number / true, y: number }-
showHeaderWhether to show table headerbooleantrue
sizeSize of tabledefault / middle / smalldefault
titleTable title rendererstring / React.ReactNode
hideTitleBarWheter to hide table title barboolean-
headerWithBorderTopWheter to add line above table title barboolean-
itemsMenuComponents or text visible when any of table itams are selected, usually used for bulk actionsstring / React.ReactNode-
searchSearch querystring-
cellSizeDefines padding size of each row in tablesmall / medium / defaultdefault
roundedHeaderWheter to round table headerbooleanfalse
selectionConfig of rows selectionRowSelection-
filtersArray of filters cofings, earch of them will be rendered in table title barFilter[]-
searchComponentSearchComponentReact.ReactNode-
filterComponentFilterItemComponentReact.ReactNode-
groupedWhether to render table as GroupedTable of DefaultTableboolean-
onChangeCallback executed when pagination, filters or sorter is changed(pagination, filters, sorter, extra: { currentDataSource: [] }) => void
onExpandCallback executed when the row expand icon is clicked(expanded, record) => void
onExpandedRowsChangeCallback executed when the expanded rows change(expandedRows) => void
onHeaderRowSet props on per header row(column, index) => object-
onRowSet props on per row(record, index) => object-
getPopupContainerthe render container of dropdowns in table(triggerNode) => HTMLElement() => TableHtmlElement
renderSelectionTitleFunction to render a custom title in table header when some items are selected({selection: RowSelection, filters:Filter[] }) => React.ReactNode-

VirtualTable

PropertyDescriptionTypeDefault
columnsColumns of tableColumnProps[]-
scrollWhether the table can be scrollable, config{x?: number, y: number}-
onRowClickCallback executed when row is clicked(row) => void-
cellHeightDefines height of single cellnumber-
initialWidthInitial width of tablenumber-

TreeTable

Display tree structure data in Table when there is field key children in dataSource.

GroupTable

This type of table requires a specific type of dataSource which has to contain a structure as the following:

PropertyDescriptionTypeDefault
columnKey of grouped columnstring-
keyKey of groupReact.ReactText-
valueValue of group ex. specific value or group nameReact.ReactText\boolean\object-
rowsData of items in group, like standard dataSourceany[]-
groupTypeType of active groupingvalue / ranges / interval / undefined-

RowSelection

PropertyDescriptionTypeDefault
fixedWhether to show selection column as fixed or notboolean-
selectedRowKeysArray of selected row keysReact.ReactText[]
selectionsSelections options available in table titleSelectionItem[]-
onChangeCallback executed when selection changes(selectedRowKeys: React.ReactText[], selectedRows: T[]) => void-
limitMax length of selection rows arraynumber-

SelectionItem

Type which contains: DSTable.SELECTION_ALL | DSTable.SELECTION_INVERT | Selection | null | undefined;

Selection

Allows to create custom selection

PropertyDescriptionTypeDefault
keyUnique key of this selectionstring-
labelDisplay name of this selectionstring-
onClickCallback executed when this selection is clicked() => void-

Filter

PropertyDescriptionTypeDefault
tooltipsObject contains varius tooltips titles{default: string, clear: string, define: string, list: string}-
openedLabelLabel visible list of filters is openedstring-
keyKey of filterstring-
iconIcon of filterReact.ReactNode-
showListFunction executed when user clicks on showList icon() => void-
showFunction executed when user clicks on filter icon() => void-
handleClearFunction executed when user clicks on clear filter icon() => void-
selectedName of selected filter{name: string}-
disabledWhether to disable filter iconboolean-

onRow usage

Same as onRow onHeaderRow onCell onHeaderCell

<Table
onRow={(record, rowIndex) => {
return {
onClick: event => {}, // click row
onDoubleClick: event => {}, // double click row
onContextMenu: event => {}, // right button click row
onMouseEnter: event => {}, // mouse enter row
onMouseLeave: event => {}, // mouse leave row
};
}}
onHeaderRow={column => {
return {
onClick: () => {}, // click header row
};
}}
/>

Column

One of the Table columns prop for describing the table's columns, Column has the same API.

PropertyDescriptionTypeDefaultVersion
alignspecify which way that column is alignedleft / right / centerleft3.3.2
classNameclassName of this columnstring-
colSpanSpan of this column's titlenumber
dataIndexDisplay field of the data record, could be set like a.b.c, a[0].b.c[1]string-
defaultSortOrderDefault order of sorted valuesascend / descend-
filterDropdownCustomized filter overlayReactNode-
filterDropdownVisibleWhether filterDropdown is visibleboolean-
filteredWhether the dataSource is filteredbooleanfalse
filteredValueControlled filtered value, filter icon will highlightstring / []-
filterIconCustomized filter iconReact.ReactNode / (filtered: boolean) => React.ReactNodefalse
filterMultipleWhether multiple filters can be selectedbooleantrue
filtersFilter menu configobject / []-
fixedSet column to be fixed: true(same as left) 'left' 'right'boolean / stringfalse
itemsMenuComponent with menu for selected itemsReact.ReactNode-
keyUnique key of this column, you can ignore this prop if you've set a unique dataIndexstring-
renderRenderer of the table cell. The return value should be a ReactNode, or an object for colSpan/rowSpan config(text, record, index) => React.ReactNode-
searchSearch input valuestring-
sorterSort function for local sort, see Array.sort's compareFunction. If you need sort buttons only, set to true.
Use object for multi sorting:
{ compare: (a, b) => a.math - b.math, <br />multiple: 2 }
`functionbooleanobject`
sortOrderOrder of sorted values: 'ascend' 'descend' falseboolean / string-
sortDirectionssupported sort way, could be 'ascend', 'descend'Array['ascend', 'descend']3.15.2
sortRenderHow to render sort buttons and options. Values: 'default', 'string', (sortStateApi: SortStateAPI, column: DSColumnType<T>) => React.ReactElementstringfunction'default'
titleTitle of this columnReact.ReactNode / ({ sortOrder, filters }) => React.ReactNode-
widthWidth of this columnstring / number-
onCellSet props on per cell(record, rowIndex: number) => object-
onFilterCallback executed when the confirm filter button is clicked() => void-
onFilterDropdownVisibleChangeCallback executed when filterDropdownVisible is changed(visible: boolean) => void-
onHeaderCellSet props on per header cell(column) => object-

ColumnGroup

PropertyDescriptionTypeDefault
titleTitle of the column groupstring\ReactNode-

pagination

Properties for pagination.

PropertyDescriptionTypeDefault
positionspecify the position of Pagination'top' \ 'bottom' \ 'both''bottom'

More about pagination, please check Pagination.