Search
Table
A table displays rows of data
When to use
To display a collection of structured data.
To sort, search, paginate, filter data.
To sort, search, paginate, filter data.
Basic
Simple table with actions
| Name | Age | Address | Tags | Action |
|---|---|---|---|---|
| John Doe | 28 | New York No. 1 Lake Park | DESIGNERNEW | |
| John Doe | 28 | New York No. 1 Lake Park | DEVELOPER | |
| John Doe | 28 | New York No. 1 Lake Park | DESIGNER |
Selection
Rows can be selectable by making first column as a selectable column.
You can use rowSelection.type to set selection.type. Default is checkbox.
You can use rowSelection.type to set selection.type. Default is checkbox.
Selection and operation
To perform operations and clear selections after selecting some rows,
use rowSelection.selectedRowKeys to control selected rows.
use rowSelection.selectedRowKeys to control selected rows.
Custom selection
Use rowSelection.selections custom selections, default no select dropdown,
show default selections via setting to true.
show default selections via setting to true.
Filter and sorter
Use filters to generate filter menu in columns, onFilter to determine filtered result, and filterMultiple to indicate whether it's multiple or single selection.
Uses defaultFilteredValue to make a column filtered by default.
Use sorter to make a column sortable. Sorter can be a function of the type function(a, b) { ... } for sorting data locally.
sortDirections: ['ascend' | 'descend'] defines available sort methods for each columns, effective for all columns when set on table props.
Uses defaultSortOrder to make a column sorted by default.
If a sortOrder or defaultSortOrder is specified with the value ascend or descend, you can access this value from within the function passed to the sorter as explained above. Such a function can take the form: function(a, b, sortOrder) { ... }.
Name | Age | Address | Action |
|---|---|---|---|
| Jenny Wilson | 7 | New York No. 1 Lake Park | |
| Leslie Alexander | 6 | New York No. 1 Lake Park | |
| Brooklyn Simmons | 5 | New York No. 1 Lake Park | |
| Cameron Williamson | 4 | New York No. 1 Lake Park | |
| Jane Cooper | 3 | New York No. 1 Lake Park | |
| Wade Warren | 2 | New York No. 1 Lake Park | |
| Jane Cooper | 1 | New York No. 1 Lake Park |
Border
Add border for table
Expandable Row
When there's too much information to show and the table can't display all at once.
| Name | Age | Address | Action | |
|---|---|---|---|---|
| John Brown | 28 | New York No. 1 Lake Park | ||
| Jim Green | 28 | London No. 1 Lake Park | ||
My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park. | ||||
| Not Expandable | 28 | Jiangsu No. 1 Lake Park | ||
| Joe Black | 28 | Sidney No. 1 Lake Park | ||
colSpan and rowSpan
Table column title supports colSpan that set in column.
Table cell supports colSpan and rowSpan that set in render return object. When each of them is set to 0, the cell will not be rendered.
Table cell supports colSpan and rowSpan that set in render return object. When each of them is set to 0, the cell will not be rendered.
| Name | Age | Home phone | Address | |
|---|---|---|---|---|
| John Brown | 32 | 0571-22098909 | 18889898989 | New York No. 1 Lake Park |
| Jim Green | 42 | 0571-22098333 | 18889898888 | London No. 1 Lake Park |
| Joe Black | 32 | 0575-22098909 | 18900010002 | Sidney No. 1 Lake Park |
| Jim Red | 18 | 18900010002 | London No. 2 Lake Park | |
| Jake White | ||||
Tree data
Display tree structure data in Table when there is field key children in dataSource, try to customize childrenColumnName property to avoid tree table structure.
You can control the indent width by setting indentSize.
You can control the indent width by setting indentSize.
| Name | Age | Address |
|---|---|---|
| Joe Black | 28 | New York No. 1 Lake Park |
| John Brown sr. | 28 | New York No. 1 Lake Park |
| John Brown jr. | 28 | New York No. 3 Lake Park |
| John Brown | 28 | New York No. 1 Lake Park |
| John Doe | 28 | New York No. 1 Lake Park |
Fixed header
Display large amounts of data in scrollable view.
Specify width of columns if header and cell do not align properly. If specified width is not working or have gutter between columns, please try to leave one column at least without width to fit fluid layout, or make sure no long word to break table layout.
Specify width of columns if header and cell do not align properly. If specified width is not working or have gutter between columns, please try to leave one column at least without width to fit fluid layout, or make sure no long word to break table layout.
| John Doe | 28 | New York No. 1 Lake Park | |
| John Doe | 28 | New York No. 1 Lake Park | |
| John Doe | 28 | New York No. 1 Lake Park | |
| John Doe | 28 | New York No. 1 Lake Park | |
| John Doe | 28 | New York No. 1 Lake Park | |
| John Doe | 28 | New York No. 1 Lake Park | |
| John Doe | 28 | New York No. 1 Lake Park | |
| John Doe | 28 | New York No. 1 Lake Park | |
| John Doe | 28 | New York No. 1 Lake Park | |
| John Doe | 28 | New York No. 1 Lake Park | |
| John Doe | 28 | New York No. 1 Lake Park | |
| John Doe | 28 | New York No. 1 Lake Park | |
| John Doe | 28 | New York No. 1 Lake Park | |
| John Doe | 28 | New York No. 1 Lake Park | |
| John Doe | 28 | New York No. 1 Lake Park |
Fixed Columns
To fix some columns and scroll inside other columns, and you must set scroll.x meanwhile.
Specify the width of columns if header and cell do not align properly. If specified width is not working or have gutter between columns, please try to leave one column at least without width to fit fluid layout, or make sure no long word to break table layout.
A fixed value which is greater than table width for scroll.x is recommended. The sum of unfixed columns should not greater than scroll.x.
Note: v4 using sticky to implement fixed effect. IE 11 will downgrade to horizontal scroll.
Specify the width of columns if header and cell do not align properly. If specified width is not working or have gutter between columns, please try to leave one column at least without width to fit fluid layout, or make sure no long word to break table layout.
A fixed value which is greater than table width for scroll.x is recommended. The sum of unfixed columns should not greater than scroll.x.
Note: v4 using sticky to implement fixed effect. IE 11 will downgrade to horizontal scroll.
| Jane Cooper | 1 | New York No. 1 Lake Park | |
| Wade Warren | 2 | New York No. 1 Lake Park | |
| Jane Cooper | 3 | New York No. 1 Lake Park | |
| Cameron Williamson | 4 | New York No. 1 Lake Park | |
| Brooklyn Simmons | 5 | New York No. 1 Lake Park | |
| Leslie Alexander | 6 | New York No. 1 Lake Park | |
| Jenny Wilson | 7 | New York No. 1 Lake Park |
Editable Cells
Table with editable cells
| Name | Age | Address | Action |
|---|---|---|---|
Jane Cooper | 32 | London, Park Lane no. 0 | |
Wade Warren | 32 | London, Park Lane no. 1 | |
Jane Cooper | 32 | London, Park Lane no. 1 | |
Cameron Williamson | 32 | London, Park Lane no. 1 | |
Brooklyn Simmons | 32 | London, Park Lane no. 1 | |
Leslie Alexander | 32 | London, Park Lane no. 1 | |
Jenny Wilson | 32 | London, Park Lane no. 1 |
Editable Rows
Table with editable rows.
| Name | Age | Address | Action |
|---|---|---|---|
| Edrward 0 | 1 | New York No. 1 Lake Park | |
| Edrward 1 | 2 | New York No. 1 Lake Park | |
| Edrward 2 | 3 | New York No. 1 Lake Park | |
| Edrward 3 | 4 | New York No. 1 Lake Park | |
| Edrward 4 | 5 | New York No. 1 Lake Park | |
| Edrward 5 | 6 | New York No. 1 Lake Park | |
| Edrward 6 | 7 | New York No. 1 Lake Park |
Nested tables
Showing more detailed info of every row.
Drag sorting
By using custom components, we can integrate table with react-dnd to implement drag sorting
| Name | Age | Address | Action |
|---|---|---|---|
| John Brown | 32 | New York No. 1 Lake Park | |
| Jim Green | 42 | London No. 1 Lake Park | |
| Joe Black | 32 | Sidney No. 1 Lake Park |
Drag sorting with handler
Resizable column
Ellipsis column
Ellipsis cell content via setting column.ellipsis.
| Name | Age | Address | Long Column Long Column Long Column | Long Column Long Column | Long Column |
|---|---|---|---|---|---|
| John Brown | 32 | New York No. 1 Lake Park, New York No. 1 Lake Park | New York No. 1 Lake Park, New York No. 1 Lake Park | New York No. 1 Lake Park, New York No. 1 Lake Park | New York No. 1 Lake Park, New York No. 1 Lake Park |
| Jim Green | 42 | London No. 2 Lake Park, London No. 2 Lake Park | London No. 2 Lake Park, London No. 2 Lake Park | London No. 2 Lake Park, London No. 2 Lake Park | London No. 2 Lake Park, London No. 2 Lake Park |
| Joe Black | 32 | Sidney No. 1 Lake Park, Sidney No. 1 Lake Park | Sidney No. 1 Lake Park, Sidney No. 1 Lake Park | Sidney No. 1 Lake Park, Sidney No. 1 Lake Park | Sidney No. 1 Lake Park, Sidney No. 1 Lake Park |
Ellipsis column custom tooltip
Ellipsis cell content via setting column.ellipsis.showTitle, use Tooltip instead of the html title attribute.
| Name | Age | Address | Long Column Long Column Long Column | Long Column Long Column | Long Column |
|---|---|---|---|---|---|
| John Brown | 32 | New York No. 1 Lake Park, New York No. 1 Lake Park | New York No. 1 Lake Park, New York No. 1 Lake Park | New York No. 1 Lake Park, New York No. 1 Lake Park | New York No. 1 Lake Park, New York No. 1 Lake Park |
| Jim Green | 42 | London No. 2 Lake Park, London No. 2 Lake Park | London No. 2 Lake Park, London No. 2 Lake Park | London No. 2 Lake Park, London No. 2 Lake Park | London No. 2 Lake Park, London No. 2 Lake Park |
| Joe Black | 32 | Sidney No. 1 Lake Park, Sidney No. 1 Lake Park | Sidney No. 1 Lake Park, Sidney No. 1 Lake Park | Sidney No. 1 Lake Park, Sidney No. 1 Lake Park | Sidney No. 1 Lake Park, Sidney No. 1 Lake Park |
Responsive
Responsive columns.
| Name (all screens) |
|---|
| John Brown |
| Jim Green |
| Joe Black |
Pagination Settings
Table pagination settings.
Dynamic Settings
Select different settings to see the result.
API
Table
| Property | Description | Type | Default |
|---|---|---|---|
tableLayout | table-layout attribute of table element | - | auto | fixed | fixed when header/columns are fixed, or using column.ellipsis |
bordered | Whether to show all table borders | boolean | false |
columns | Columns of table | - | |
components | Override default table elements | - | |
dataSource | Data record array to be displayed | object[] | - |
expandable | Config expandable content | - | |
footer | Table footer renderer | Function(currentPageData) | - |
loading | Loading status of table | false | |
locale | i18n text including filter, sort, empty text, etc | object | filterConfirm: 'Ok'
filterReset: 'Reset'
emptyText: 'No Data'
Default |
pagination | Config of pagination. You can ref table pagination config or full pagination document, hide it by setting it to false | object | - |
rowClassName | Row's className | Function(record, index):string | - |
rowKey | Row's unique key, could be a string or function that returns a string | string|Function(record):string | key |
rowSelection | Row selection config | object | null |
scroll | Whether the table can be scrollable, config | object | - |
showHeader | Whether to show table header | Whether to show table header | true |
size | Size of table | default | middle | small | default |
summary | Summary content | (currentData) => ReactNode | - |
title | Table title renderer | Function(currentPageData) | - |
onChange | Callback executed when pagination, filters or sorter is changed | Function(pagination, filters, sorter, extra: { currentDataSource: [], action: paginate | sort | filter }) | - |
onHeaderRow | Set props on per header row | Function(column, index) | - |
onRow | Set props on per row | Function(record, index) | - |
getPopupContainer | the render container of dropdowns in table | (triggerNode) => HTMLElement | () => TableHtmlElement |
sortDirections | supported sort way, could be 'ascend', 'descend' | Array | ['ascend', 'descend'] |
showSorterTooltip | header show next sorter direction tooltip | boolean | true |
Column
| Property | Description | Type | Default |
|---|---|---|---|
align | specify which way that column is aligned | left | right | center | left |
ellipsis | ellipsis cell content, not working with sorter and filters for now.
tableLayout would be fixed when ellipsis is true or { showTitle?: boolean }. | boolean | { showTitle?: boolean } | false |
className | className of this column | string | - |
colSpan | Span of this column's title | number | - |
dataIndex | Display field of the data record, support nest path by string array | string | string[] | - |
defaultFilteredValue | Default filtered values | string[] | - |
defaultSortOrder | Default order of sorted values | ascend | descend | - |
filterDropdown | Customized filter overlay | ReactNode | (props: FilterDropdownProps) => ReactNode | - |
filterDropdownVisible | Whether filterDropdown is visible | boolean | - |
filtered | Whether the dataSource is filtered | boolean | false |
filteredValue | Controlled filtered value, filter icon will highlight | string[] | - |
filterIcon | Customized filter icon | ReactNode|(filtered: boolean) => ReactNode | false |
filterMultiple | Whether multiple filters can be selected | boolean | true |
filters | Filter menu config | object[] | - |
fixed | (IE not support) Set column to be fixed: true(same as left) 'left' 'right' | boolean|string | false |
key | Unique key of this column, you can ignore this prop if you've set a unique dataIndex | string | - |
render | Renderer of the table cell. The return value should be a ReactNode, or an object for colSpan/rowSpan config | Function(text, record, index) {} | - |
responsive | The list of breakpoints at which to display this column. Always visible if not set. | - | |
shouldCellUpdate | Control cell render logic | (record, prevRecord) => boolean | - |
sorter | Sort function for local sort, see Array.sort's compareFunction. If you need sort buttons only, set to true | Function|boolean | - |
sortOrder | Order of sorted values: 'ascend' 'descend' false | boolean|string | - |
sortDirections | supported sort way, override sortDirections in Table, could be 'ascend', 'descend' | Array | ['ascend', 'descend'] |
title | Title of this column | ReactNode|({ sortOrder, sortColumn, filters }) => ReactNode | - |
width | Width of this column (width not working?) | string|number | - |
onCell | Set props on per cell | Function(record, rowIndex) | - |
onFilter | Callback executed when the confirm filter button is clicked | Function | - |
onFilterDropdownVisibleChange | Callback executed when filterDropdownVisible is changed | function(visible) {} | - |
onHeaderCell | Set props on per header cell | Function(column) | - |
showSorterTooltip | header show next sorter direction tooltip, override showSorterTooltip in table | boolean | true |
ColumnGroup
| Property | Description | Type | Default |
|---|---|---|---|
title | Title of the column group | string|ReactNode | - |
pagination
| Property | Description | Type | Default |
|---|---|---|---|
position | specify the position of Pagination, could be topLeft | topCenter | topRight |bottomLeft | bottomCenter | bottomRight | Array | ['bottomRight'] |
expandable
| Property | Description | Type | Default |
|---|---|---|---|
childrenColumnName | The column contains children to display | string[] | children |
defaultExpandAllRows | Expand all rows initially | boolean | false |
defaultExpandedRowKeys | Initial expanded row keys | string[] | - |
expandIcon | Customize row expand Icon. Ref example | Function(props):ReactNode | - |
expandIconColumnIndex | Customize expand icon column index | number | - |
expandedRowKeys | Current expanded row keys | string[] | - |
expandedRowRender | Expanded container render for each row | Function(record, index, indent, expanded):ReactNode | - |
expandRowByClick | Whether to expand row by clicking anywhere in the whole row | boolean | false |
indentSize | Indent size in pixels of tree data | number | 15 |
rowExpandable | Enable row can be expandable | (record) => boolean | - |
onExpand | Callback executed when the row expand icon is clicked | Function(expanded, record) | - |
onExpandedRowsChange | Callback executed when the expanded rows change | Function(expandedRows) | - |
rowSelection
| Property | Description | Type | Default |
|---|---|---|---|
checkStrictly | Check table row precisely; parent row and children rows are not associated | boolean | true |
columnWidth | Set the width of the selection column | string|number | 60px |
columnTitle | Set the title of the selection column | string|ReactNode | - |
fixed | Fixed selection column on the left | boolean | - |
getCheckboxProps | Get Checkbox or Radio props | Function(record) | - |
hideSelectAll | Hide the selectAll checkbox and custom selection | boolean | false |
preserveSelectedRowKeys | Keep selection key even when it removed from dataSource | boolean | - |
renderCell | Renderer of the table cell. Same as render in column | Function(checked, record, index, originNode) {} | - |
selectedRowKeys | Controlled selected row keys | string[]|number[] | [] |
selections | Custom selection config, only displays default selections when set to true | object[]|boolean | - |
type | checkbox or radio | checkbox | radio | checkbox |
onChange | Callback executed when selected rows change | Function(selectedRowKeys, selectedRows) | - |
onSelect | Callback executed when select/deselect one row | Function(record, selected, selectedRows, nativeEvent) | - |
onSelectAll | Callback executed when select/deselect all rows | Function(selected, selectedRows, changeRows) | - |
onSelectInvert | Callback executed when row selection is inverted | Function(selectedRowKeys) | - |
scroll
| Property | Description | Type | Default |
|---|---|---|---|
x | Set horizontal scrolling, can also be used to specify the width of the scroll area, could be number, percent value, true and 'max-content' | number | true | - |
y | Set vertical scrolling, can also be used to specify the height of the scroll area, could be number | number | - |
scrollToFirstRowOnChange | Whether to scroll to the top of the table when paging, sorting, filtering changes | boolean | - |
selection
| Property | Description | Type | Default |
|---|---|---|---|
key | Unique key of this selection | string | - |
text | Display text of this selection | string|ReactNode | - |
onSelect | Callback executed when this selection is clicked | Function(changeableRowKeys) | - |