Table
Importimport{ Table }from"antd"; |
Sourcecomponents/table |
When To Use
- To display a collection of structured data.
- To sort, search, paginate, filter data.
How To Use
Specify dataSource of Table as an array of data.
const dataSource = [{key: '1',name: 'Mike',age: 32,address: '10 Downing Street',},{key: '2',name: 'John',age: 42,address: '10 Downing Street',},];const columns = [{title: 'Name',dataIndex: 'name',key: 'name',},{title: 'Age',dataIndex: 'age',key: 'age',},{title: 'Address',dataIndex: 'address',key: 'address',},];<Table dataSource={dataSource} columns={columns} />;
Promotion
Examples
| Name | Age | Address | Tags | Action |
|---|---|---|---|---|
| John Brown | 32 | New York No. 1 Lake Park | NICEDEVELOPER | |
| Jim Green | 42 | London No. 1 Lake Park | LOSER | |
| Joe Black | 32 | Sydney No. 1 Lake Park | COOLTEACHER |
Simple table with actions.
| Name | Age | Address | Tags | Action | |
|---|---|---|---|---|---|
| First Name | Last Name | ||||
| John | Brown | 32 | New York No. 1 Lake Park | NICEDEVELOPER | |
| Jim | Green | 42 | London No. 1 Lake Park | LOSER | |
| Joe | Black | 32 | Sydney No. 1 Lake Park | COOLTEACHER | |
Using JSX style API (introduced in 2.5.0)
Since this is just a syntax sugar for the prop
columns, you can't composeColumnandColumnGroupwith other Components.
| Name | Age | Address | |
|---|---|---|---|
| John Brown | 32 | New York No. 1 Lake Park | |
| Jim Green | 42 | London No. 1 Lake Park | |
| Joe Black | 32 | Sydney No. 1 Lake Park | |
| Disabled User | 99 | Sydney No. 1 Lake Park |
Rows can be selectable by making first column as a selectable column. You can use rowSelection.type to set selection type. Default is checkbox.
selection happens when clicking checkbox by default. You can see https://codesandbox.io/s/000vqw38rl if you need row-click selection behavior.
| Name | Age | Address | |
|---|---|---|---|
| Edward King 0 | 32 | London, Park Lane no. 0 | |
| Edward King 1 | 32 | London, Park Lane no. 1 | |
| Edward King 2 | 32 | London, Park Lane no. 2 | |
| Edward King 3 | 32 | London, Park Lane no. 3 | |
| Edward King 4 | 32 | London, Park Lane no. 4 | |
| Edward King 5 | 32 | London, Park Lane no. 5 | |
| Edward King 6 | 32 | London, Park Lane no. 6 | |
| Edward King 7 | 32 | London, Park Lane no. 7 | |
| Edward King 8 | 32 | London, Park Lane no. 8 | |
| Edward King 9 | 32 | London, Park Lane no. 9 |
To perform operations and clear selections after selecting some rows, use rowSelection.selectedRowKeys to control selected rows.
| Name | Age | Address | |
|---|---|---|---|
| Edward King 0 | 32 | London, Park Lane no. 0 | |
| Edward King 1 | 32 | London, Park Lane no. 1 | |
| Edward King 2 | 32 | London, Park Lane no. 2 | |
| Edward King 3 | 32 | London, Park Lane no. 3 | |
| Edward King 4 | 32 | London, Park Lane no. 4 | |
| Edward King 5 | 32 | London, Park Lane no. 5 | |
| Edward King 6 | 32 | London, Park Lane no. 6 | |
| Edward King 7 | 32 | London, Park Lane no. 7 | |
| Edward King 8 | 32 | London, Park Lane no. 8 | |
| Edward King 9 | 32 | London, Park Lane no. 9 |
Use rowSelection.selections custom selections, default no select dropdown, show default selections via setting to true.
Name | Age | Address |
|---|---|---|
| Jim Green | 42 | London No. 1 Lake Park |
| John Brown | 32 | New York No. 1 Lake Park |
| Joe Black | 32 | Sydney No. 1 Lake Park |
| Jim Red | 32 | London No. 2 Lake Park |
Use filters to generate filter menu in columns, onFilter to determine filtered result, and filterMultiple to indicate whether it's multiple or single selection, filterOnClose to specify whether to trigger filter when the filter menu closes.
Use defaultFilteredValue to make a column filtered by default.
Use sorter to make a column sortable. sorter can be a function of the type sorter: function(rowA, rowB) { ... } for sorting data locally.
sortDirections: ['ascend', 'descend'] defines available sort methods for each columns, effective for all columns when set on table props. You can set as ['ascend', 'descend', 'ascend'] to prevent sorter back to default status.
Use 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 |
|---|---|---|
| John Brown | 32 | New York No. 1 Lake Park |
| Jim Green | 42 | London No. 1 Lake Park |
| Joe Black | 32 | Sydney No. 1 Lake Park |
| Jim Red | 32 | London No. 2 Lake Park |
You can use filterMode to change default filter interface, options: menu(default) and tree.
filterSearchis used for making filter dropdown items searchable.
Name | Age | Address |
|---|---|---|
| John Brown | 32 | New York No. 1 Lake Park |
| Jim Green | 42 | London No. 1 Lake Park |
| Joe Black | 32 | Sydney No. 1 Lake Park |
| Jim Red | 32 | London No. 2 Lake Park |
filterSearch is used to enable search of filter items, and you can set a custom filter method through filterSearch:(input, record) => boolean.
| Name | Chinese Score | Math Score | English Score |
|---|---|---|---|
| John Brown | 98 | 60 | 70 |
| Jim Green | 98 | 66 | 89 |
| Joe Black | 98 | 90 | 70 |
| Jim Red | 88 | 99 | 89 |
column.sorter support multiple to config the priority of sort columns. Though sorter.compare to customize compare function. You can also leave it empty to use the interactive only.
Name | Age | Address |
|---|---|---|
| John Brown | 32 | New York No. 1 Lake Park |
| Jim Green | 42 | London No. 1 Lake Park |
| Joe Black | 32 | Sydney No. 1 Lake Park |
| Jim Red | 32 | London No. 2 Lake Park |
Control filters and sorters by filteredValue and sortOrder.
- Defining
filteredValueorsortOrdermeans that it is in the controlled mode.- Make sure
sortOrderis assigned for only one column.column.keyis required.
Name | Age | Address |
|---|---|---|
| John Brown | 32 | New York No. 1 Lake Park |
| Joe Black | 42 | London No. 1 Lake Park |
| Jim Green | 32 | Sydney No. 1 Lake Park |
| Jim Red | 32 | London No. 2 Lake Park |
Implement a customized column search example via filterDropdown.
Add the boolean type parameter closeDropdown to the function clearFilters. Whether to close the filter menu is true by default. Add the boolean type parameter confirm to clear whether to submit the option during filtering. The default is true.
Name | Gender | |
|---|---|---|
No data | ||
This example shows how to fetch and present data from a remote server, and how to implement filtering and sorting in server side by sending related parameters to server.
Setting rowSelection.preserveSelectedRowKeys to keep the key when enable selection.
Note, this example use Mock API that you can look up in Network Console.
| Name | Age | Address |
|---|---|---|
| John Brown | 32 | New York No. 1 Lake Park |
| Jim Green | 42 | London No. 1 Lake Park |
| Joe Black | 32 | Sydney No. 1 Lake Park |
| Name | Age | Address |
|---|---|---|
| John Brown | 32 | New York No. 1 Lake Park |
| Jim Green | 42 | London No. 1 Lake Park |
| Joe Black | 32 | Sydney No. 1 Lake Park |
There are two compacted table sizes: middle and small. The small size is used in Modals only.
| Name | Cash Assets | Address |
|---|---|---|
| John Brown | ￥300,000.00 | New York No. 1 Lake Park |
| Jim Green | ￥1,256,000.00 | London No. 1 Lake Park |
| Joe Black | ￥120,000.00 | Sydney No. 1 Lake Park |
Add border, title and footer for table.
When there's too much information to show and the table can't display all at once.
| Name | Age | Address | ||
|---|---|---|---|---|
| John Brown | 32 | New York No. 1 Lake Park | ||
| Jim Green | 42 | London No. 1 Lake Park | ||
| Not Expandable | 29 | Jiangsu No. 1 Lake Park | ||
| Joe Black | 32 | Sydney No. 1 Lake Park |
You can control the order of the expand and select columns by using Table.EXPAND_COLUMN and Table.SELECTION_COLUMN.
| RowHead | Name | Age | Home phone | Address | |
|---|---|---|---|---|---|
| 1 | John Brown | 32 | 0571-22098909 | 18889898989 | New York No. 1 Lake Park |
| 2 | Jim Green | ||||
| 3 | Joe Black | 32 | 0575-22098909 | 18900010002 | Sydney No. 1 Lake Park |
| 4 | Jim Red | 18 | 0575-22098909 | 18900010002 | London No. 2 Lake Park |
| 5 | Jake White | 18 | 18900010002 | Dublin No. 2 Lake Park | |
Table column title supports colSpan that set in column.
Table cell supports colSpan and rowSpan that set in onCell return object. When each of them is set to 0, the cell will not be rendered.
| Name | Age | Address | |
|---|---|---|---|
| John Brown sr. | 60 | New York No. 1 Lake Park | |
| Joe Black | 32 | Sydney No. 1 Lake Park |
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.
| Edward King 0 | 32 | London, Park Lane no. 0 |
| Edward King 1 | 32 | London, Park Lane no. 1 |
| Edward King 2 | 32 | London, Park Lane no. 2 |
| Edward King 3 | 32 | London, Park Lane no. 3 |
| Edward King 4 | 32 | London, Park Lane no. 4 |
| Edward King 5 | 32 | London, Park Lane no. 5 |
| Edward King 6 | 32 | London, Park Lane no. 6 |
| Edward King 7 | 32 | London, Park Lane no. 7 |
| Edward King 8 | 32 | London, Park Lane no. 8 |
| Edward King 9 | 32 | London, Park Lane no. 9 |
| Edward King 10 | 32 | London, Park Lane no. 10 |
| Edward King 11 | 32 | London, Park Lane no. 11 |
| Edward King 12 | 32 | London, Park Lane no. 12 |
| Edward King 13 | 32 | London, Park Lane no. 13 |
| Edward King 14 | 32 | London, Park Lane no. 14 |
| Edward King 15 | 32 | London, Park Lane no. 15 |
| Edward King 16 | 32 | London, Park Lane no. 16 |
| Edward King 17 | 32 | London, Park Lane no. 17 |
| Edward King 18 | 32 | London, Park Lane no. 18 |
| Edward King 19 | 32 | London, Park Lane no. 19 |
| Edward King 20 | 32 | London, Park Lane no. 20 |
| Edward King 21 | 32 | London, Park Lane no. 21 |
| Edward King 22 | 32 | London, Park Lane no. 22 |
| Edward King 23 | 32 | London, Park Lane no. 23 |
| Edward King 24 | 32 | London, Park Lane no. 24 |
| Edward King 25 | 32 | London, Park Lane no. 25 |
| Edward King 26 | 32 | London, Park Lane no. 26 |
| Edward King 27 | 32 | London, Park Lane no. 27 |
| Edward King 28 | 32 | London, Park Lane no. 28 |
| Edward King 29 | 32 | London, Park Lane no. 29 |
| Edward King 30 | 32 | London, Park Lane no. 30 |
| Edward King 31 | 32 | London, Park Lane no. 31 |
| Edward King 32 | 32 | London, Park Lane no. 32 |
| Edward King 33 | 32 | London, Park Lane no. 33 |
| Edward King 34 | 32 | London, Park Lane no. 34 |
| Edward King 35 | 32 | London, Park Lane no. 35 |
| Edward King 36 | 32 | London, Park Lane no. 36 |
| Edward King 37 | 32 | London, Park Lane no. 37 |
| Edward King 38 | 32 | London, Park Lane no. 38 |
| Edward King 39 | 32 | London, Park Lane no. 39 |
| Edward King 40 | 32 | London, Park Lane no. 40 |
| Edward King 41 | 32 | London, Park Lane no. 41 |
| Edward King 42 | 32 | London, Park Lane no. 42 |
| Edward King 43 | 32 | London, Park Lane no. 43 |
| Edward King 44 | 32 | London, Park Lane no. 44 |
| Edward King 45 | 32 | London, Park Lane no. 45 |
| Edward King 46 | 32 | London, Park Lane no. 46 |
| Edward King 47 | 32 | London, Park Lane no. 47 |
| Edward King 48 | 32 | London, Park Lane no. 48 |
| Edward King 49 | 32 | London, Park Lane no. 49 |
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.
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.xis recommended. The sum of unfixed columns should not greater thanscroll.x.
Note: v4 using sticky to implement fixed effect. IE 11 will downgrade to horizontal scroll.
Fixed column only when scroll some distance, and scroll to stack other columns. Recommend use with bordered.
| Edward King 0 | 32 | London, Park Lane no. 0 | London, Park Lane no. 0 | London, Park Lane no. 0 | London, Park Lane no. 0 | London, Park Lane no. 0 | London, Park Lane no. 0 | London, Park Lane no. 0 | London, Park Lane no. 0 | London, Park Lane no. 0 | London, Park Lane no. 0 | London, Park Lane no. 0 | London, Park Lane no. 0 | London, Park Lane no. 0 | London, Park Lane no. 0 | London, Park Lane no. 0 | London, Park Lane no. 0 | London, Park Lane no. 0 | London, Park Lane no. 0 | London, Park Lane no. 0 | London, Park Lane no. 0 | action |
| Edward King 1 | 32 | London, Park Lane no. 1 | London, Park Lane no. 1 | London, Park Lane no. 1 | London, Park Lane no. 1 | London, Park Lane no. 1 | London, Park Lane no. 1 | London, Park Lane no. 1 | London, Park Lane no. 1 | London, Park Lane no. 1 | London, Park Lane no. 1 | London, Park Lane no. 1 | London, Park Lane no. 1 | London, Park Lane no. 1 | London, Park Lane no. 1 | London, Park Lane no. 1 | London, Park Lane no. 1 | London, Park Lane no. 1 | London, Park Lane no. 1 | London, Park Lane no. 1 | London, Park Lane no. 1 | action |
| Edward King 2 | 32 | London, Park Lane no. 2 | London, Park Lane no. 2 | London, Park Lane no. 2 | London, Park Lane no. 2 | London, Park Lane no. 2 | London, Park Lane no. 2 | London, Park Lane no. 2 | London, Park Lane no. 2 | London, Park Lane no. 2 | London, Park Lane no. 2 | London, Park Lane no. 2 | London, Park Lane no. 2 | London, Park Lane no. 2 | London, Park Lane no. 2 | London, Park Lane no. 2 | London, Park Lane no. 2 | London, Park Lane no. 2 | London, Park Lane no. 2 | London, Park Lane no. 2 | London, Park Lane no. 2 | action |
| Edward King 3 | 32 | London, Park Lane no. 3 | London, Park Lane no. 3 | London, Park Lane no. 3 | London, Park Lane no. 3 | London, Park Lane no. 3 | London, Park Lane no. 3 | London, Park Lane no. 3 | London, Park Lane no. 3 | London, Park Lane no. 3 | London, Park Lane no. 3 | London, Park Lane no. 3 | London, Park Lane no. 3 | London, Park Lane no. 3 | London, Park Lane no. 3 | London, Park Lane no. 3 | London, Park Lane no. 3 | London, Park Lane no. 3 | London, Park Lane no. 3 | London, Park Lane no. 3 | London, Park Lane no. 3 | action |
| Edward King 4 | 32 | London, Park Lane no. 4 | London, Park Lane no. 4 | London, Park Lane no. 4 | London, Park Lane no. 4 | London, Park Lane no. 4 | London, Park Lane no. 4 | London, Park Lane no. 4 | London, Park Lane no. 4 | London, Park Lane no. 4 | London, Park Lane no. 4 | London, Park Lane no. 4 | London, Park Lane no. 4 | London, Park Lane no. 4 | London, Park Lane no. 4 | London, Park Lane no. 4 | London, Park Lane no. 4 | London, Park Lane no. 4 | London, Park Lane no. 4 | London, Park Lane no. 4 | London, Park Lane no. 4 | action |
| Edward King 5 | 32 | London, Park Lane no. 5 | London, Park Lane no. 5 | London, Park Lane no. 5 | London, Park Lane no. 5 | London, Park Lane no. 5 | London, Park Lane no. 5 | London, Park Lane no. 5 | London, Park Lane no. 5 | London, Park Lane no. 5 | London, Park Lane no. 5 | London, Park Lane no. 5 | London, Park Lane no. 5 | London, Park Lane no. 5 | London, Park Lane no. 5 | London, Park Lane no. 5 | London, Park Lane no. 5 | London, Park Lane no. 5 | London, Park Lane no. 5 | London, Park Lane no. 5 | London, Park Lane no. 5 | action |
| Edward King 6 | 32 | London, Park Lane no. 6 | London, Park Lane no. 6 | London, Park Lane no. 6 | London, Park Lane no. 6 | London, Park Lane no. 6 | London, Park Lane no. 6 | London, Park Lane no. 6 | London, Park Lane no. 6 | London, Park Lane no. 6 | London, Park Lane no. 6 | London, Park Lane no. 6 | London, Park Lane no. 6 | London, Park Lane no. 6 | London, Park Lane no. 6 | London, Park Lane no. 6 | London, Park Lane no. 6 | London, Park Lane no. 6 | London, Park Lane no. 6 | London, Park Lane no. 6 | London, Park Lane no. 6 | action |
| Edward King 7 | 32 | London, Park Lane no. 7 | London, Park Lane no. 7 | London, Park Lane no. 7 | London, Park Lane no. 7 | London, Park Lane no. 7 | London, Park Lane no. 7 | London, Park Lane no. 7 | London, Park Lane no. 7 | London, Park Lane no. 7 | London, Park Lane no. 7 | London, Park Lane no. 7 | London, Park Lane no. 7 | London, Park Lane no. 7 | London, Park Lane no. 7 | London, Park Lane no. 7 | London, Park Lane no. 7 | London, Park Lane no. 7 | London, Park Lane no. 7 | London, Park Lane no. 7 | London, Park Lane no. 7 | action |
| Edward King 8 | 32 | London, Park Lane no. 8 | London, Park Lane no. 8 | London, Park Lane no. 8 | London, Park Lane no. 8 | London, Park Lane no. 8 | London, Park Lane no. 8 | London, Park Lane no. 8 | London, Park Lane no. 8 | London, Park Lane no. 8 | London, Park Lane no. 8 | London, Park Lane no. 8 | London, Park Lane no. 8 | London, Park Lane no. 8 | London, Park Lane no. 8 | London, Park Lane no. 8 | London, Park Lane no. 8 | London, Park Lane no. 8 | London, Park Lane no. 8 | London, Park Lane no. 8 | London, Park Lane no. 8 | action |
| Edward King 9 | 32 | London, Park Lane no. 9 | London, Park Lane no. 9 | London, Park Lane no. 9 | London, Park Lane no. 9 | London, Park Lane no. 9 | London, Park Lane no. 9 | London, Park Lane no. 9 | London, Park Lane no. 9 | London, Park Lane no. 9 | London, Park Lane no. 9 | London, Park Lane no. 9 | London, Park Lane no. 9 | London, Park Lane no. 9 | London, Park Lane no. 9 | London, Park Lane no. 9 | London, Park Lane no. 9 | London, Park Lane no. 9 | London, Park Lane no. 9 | London, Park Lane no. 9 | London, Park Lane no. 9 | action |
A Solution for displaying large amounts of data with long columns.
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.xis recommended. The sum of unfixed columns should not greater thanscroll.x.
| John Brown | 1 | Lake Park | C | 2035 | Lake Street 42 | SoftLake Co | M |
| John Brown | 2 | Lake Park | C | 2035 | Lake Street 42 | SoftLake Co | M |
| John Brown | 3 | Lake Park | C | 2035 | Lake Street 42 | SoftLake Co | M |
| John Brown | 4 | Lake Park | C | 2035 | Lake Street 42 | SoftLake Co | M |
| John Brown | 5 | Lake Park | C | 2035 | Lake Street 42 | SoftLake Co | M |
| John Brown | 6 | Lake Park | C | 2035 | Lake Street 42 | SoftLake Co | M |
| John Brown | 7 | Lake Park | C | 2035 | Lake Street 42 | SoftLake Co | M |
| John Brown | 8 | Lake Park | C | 2035 | Lake Street 42 | SoftLake Co | M |
| John Brown | 9 | Lake Park | C | 2035 | Lake Street 42 | SoftLake Co | M |
| John Brown | 10 | Lake Park | C | 2035 | Lake Street 42 | SoftLake Co | M |
Group table head with columns[n].children.
Table with editable cells. When work with shouldCellUpdate, please take care of closure.
| name | age | address | operation |
|---|---|---|---|
| Edward 0 | 32 | London Park no. 0 | Edit |
| Edward 1 | 32 | London Park no. 1 | Edit |
| Edward 2 | 32 | London Park no. 2 | Edit |
| Edward 3 | 32 | London Park no. 3 | Edit |
| Edward 4 | 32 | London Park no. 4 | Edit |
| Edward 5 | 32 | London Park no. 5 | Edit |
| Edward 6 | 32 | London Park no. 6 | Edit |
| Edward 7 | 32 | London Park no. 7 | Edit |
| Edward 8 | 32 | London Park no. 8 | Edit |
| Edward 9 | 32 | London Park no. 9 | Edit |
Table with editable rows.
Showing more detailed info of every row.
| Name | Age | Address |
|---|---|---|
| John Brown | 32 | Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text |
| Jim Green | 42 | London No. 1 Lake Park |
| Joe Black | 32 | Sidney No. 1 Lake Park |
By using components, we can integrate table with dnd-kit to implement drag sorting function.
| Name | Gender | Age | Address | |
|---|---|---|---|---|
| John Brown | male | 32 | John Brown@example.com | London No. 1 Lake Park |
| Jim Green | female | 42 | jimGreen@example.com | London No. 1 Lake Park |
| Joe Black | female | 32 | JoeBlack@example.com | Sidney No. 1 Lake Park |
| George Hcc | male | 20 | george@example.com | Sidney No. 1 Lake Park |
By using components, we can integrate table with dnd-kit to implement column drag sorting function.
| Name | Age | Address | |
|---|---|---|---|
| John Brown | 32 | Long text Long | |
| Jim Green | 42 | London No. 1 Lake Park | |
| Joe Black | 32 | Sidney No. 1 Lake Park |
Alternatively you can implement drag sorting with handler using dnd-kit.
| 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 | Sydney No. 1 Lake Park, Sydney No. 1 Lake Park | Sydney No. 1 Lake Park, Sydney No. 1 Lake Park | Sydney No. 1 Lake Park, Sydney No. 1 Lake Park | Sydney No. 1 Lake Park, Sydney No. 1 Lake Park |
Ellipsis cell content via setting column.ellipsis.
Cannot ellipsis table header with sorters and filters for now.
| 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 | Sydney No. 1 Lake Park, Sydney No. 1 Lake Park | Sydney No. 1 Lake Park, Sydney No. 1 Lake Park | Sydney No. 1 Lake Park, Sydney No. 1 Lake Park | Sydney No. 1 Lake Park, Sydney No. 1 Lake Park |
Ellipsis cell content via setting column.ellipsis.showTitle, use Tooltip instead of the html title attribute.
| Name | Age | Address |
|---|---|---|
| Edward King 0 | 32 | London, Park Lane no. 0 |
| Edward King 1 | 33 | London, Park Lane no. 1 |
| Edward King 2 | 34 | London, Park Lane no. 2 |
| Edward King 3 | 35 | London, Park Lane no. 3 |
| Edward King 4 | 36 | London, Park Lane no. 4 |
Custom empty status.
| Name | Borrow | Repayment |
|---|---|---|
| John Brown | 10 | 33 |
| Jim Green | 100 | 0 |
| Joe Black | 10 | 10 |
| Jim Red | 75 | 45 |
| Total | 195 | 88 |
| Balance | 107 | |
| Light | Everything that has a beginning, has an end. |
| Bamboo | Everything that has a beginning, has an end. |
| Little | Everything that has a beginning, has an end. |
| Light | Everything that has a beginning, has an end. |
| Bamboo | Everything that has a beginning, has an end. |
| Little | Everything that has a beginning, has an end. |
| Light | Everything that has a beginning, has an end. |
| Bamboo | Everything that has a beginning, has an end. |
| Little | Everything that has a beginning, has an end. |
| Light | Everything that has a beginning, has an end. |
| Bamboo | Everything that has a beginning, has an end. |
| Little | Everything that has a beginning, has an end. |
| Light | Everything that has a beginning, has an end. |
| Bamboo | Everything that has a beginning, has an end. |
| Little | Everything that has a beginning, has an end. |
| Light | Everything that has a beginning, has an end. |
| Bamboo | Everything that has a beginning, has an end. |
| Little | Everything that has a beginning, has an end. |
| Light | Everything that has a beginning, has an end. |
| Bamboo | Everything that has a beginning, has an end. |
Set summary content by summary prop. Sync column fixed status with Table.Summary.Cell. You can fixed it by set Table.Summary fixed prop(since 4.16.0).
Set virtual to enable virtual scroll, and scroll.x and scroll.y must be set at the same time with number type.
| Name (all screens) |
|---|
| John Brown |
Responsive columns.
| Name | Age | Address | Tags | Action |
|---|---|---|---|---|
| John Brown | 32 | New York No. 1 Lake Park | NICEDEVELOPER | |
| Jim Green | 42 | London No. 1 Lake Park | LOSER | |
| Joe Black | 32 | Sydney No. 1 Lake Park | COOLTEACHER |
Table pagination settings.
For long table，need to scroll to view the header and scroll bar，then you can now set the fixed header and scroll bar to follow the page.
| Name | Age | Address | Action | ||
|---|---|---|---|---|---|
| John Brown | 2 | New York No. 0 Lake Park | |||
| John Brown | 12 | New York No. 1 Lake Park | |||
| John Brown | 22 | New York No. 2 Lake Park | |||
| John Brown | 32 | New York No. 3 Lake Park | |||
| John Brown | 42 | New York No. 4 Lake Park | |||
| John Brown | 52 | New York No. 5 Lake Park | |||
| John Brown | 62 | New York No. 6 Lake Park | |||
| John Brown | 72 | New York No. 7 Lake Park | |||
| John Brown | 82 | New York No. 8 Lake Park | |||
| John Brown | 92 | New York No. 9 Lake Park |
Select different settings to see the result.
API
Common props ref：Common props
Table
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| bordered | Whether to show all table borders | boolean | false | |
| columns | Columns of table | ColumnsType[] | - | |
| components | Override default table elements | TableComponents | - | |
| dataSource | Data record array to be displayed | object[] | - | |
| expandable | Config expandable content | expandable | - | |
| footer | Table footer renderer | function(currentPageData) | - | |
| getPopupContainer | The render container of dropdowns in table | (triggerNode) => HTMLElement | () => TableHtmlElement | |
| loading | Loading status of table | boolean | Spin Props | false | |
| locale | The i18n text including filter, sort, empty text, etc | object | Default Value | |
| pagination | Config of pagination. You can ref table pagination config or full pagination document, hide it by setting it to false | object | false | - | |
| 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 | - | |
| rowHoverable | Row hover | boolean | true | 5.16.0 |
| scroll | Whether the table can be scrollable, config | object | - | |
| showHeader | Whether to show table header | boolean | true | |
| showSorterTooltip | The header show next sorter direction tooltip. It will be set as the property of Tooltip if its type is object | boolean | Tooltip props & {target?: 'full-header' | 'sorter-icon' } | { target: 'full-header' } | 5.16.0 |
| size | Size of table | large | middle | small | large | |
| sortDirections | Supported sort way, could be ascend, descend | Array | [ascend, descend] | |
| sticky | Set sticky header and scroll bar | boolean | {offsetHeader?: number, offsetScroll?: number, getContainer?: () => HTMLElement} | - | 4.6.0 (getContainer: 4.7.0) |
| summary | Summary content | (currentData) => ReactNode | - | |
| tableLayout | The table-layout attribute of table element | - | auto | fixed | -fixed when header/columns are fixed, or using column.ellipsis | |
| title | Table title renderer | function(currentPageData) | - | |
| virtual | Support virtual list | boolean | - | 5.9.0 |
| 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(columns, index) | - | |
| onRow | Set props on per row | function(record, index) | - | |
| onScroll | Triggered when the table body is scrolled. Note that only vertical scrolling will trigger the event when virtual | function(event) | - | 5.16.0 |
Table ref
| Property | Description | Type | Version |
|---|---|---|---|
| nativeElement | The wrap element | HTMLDivElement | 5.11.0 |
| scrollTo | Trigger to scroll to target position. key match with record rowKey | (config: { index?: number, key?: React.Key, top?: number }) => void | 5.11.0 |
onRow usage
Same as onRow onHeaderRow onCell onHeaderCell
<TableonRow={(record, rowIndex) => {return {onClick: (event) => {}, // click rowonDoubleClick: (event) => {}, // double click rowonContextMenu: (event) => {}, // right button click rowonMouseEnter: (event) => {}, // mouse enter rowonMouseLeave: (event) => {}, // mouse leave row};}}onHeaderRow={(columns, index) => {return {onClick: () => {}, // click header row};}}/>
Column
One of the Table columns prop for describing the table's columns, Column has the same API.
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| align | The specify which way that column is aligned | left | right | center | left | |
| className | The 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[] | - | |
| filterResetToDefaultFilteredValue | click the reset button, whether to restore the default filter | boolean | false | |
| defaultSortOrder | Default order of sorted values | ascend | descend | - | |
| ellipsis | The 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 | showTitle: 4.3.0 |
| filterDropdown | Customized filter overlay | ReactNode | (props: FilterDropdownProps) => ReactNode | - | |
| 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 | - | |
| filterOnClose | Whether to trigger filter when the filter menu closes | boolean | true | 5.15.0 |
| filterMultiple | Whether multiple filters can be selected | boolean | true | |
| filterMode | To specify the filter interface | 'menu' | 'tree' | 'menu' | 4.17.0 |
| filterSearch | Whether to be searchable for filter menu | boolean | function(input, record):boolean | false | boolean:4.17.0 function:4.19.0 |
| filters | Filter menu config | object[] | - | |
| filterDropdownProps | Customized dropdown props, filterDropdownOpen and onFilterDropdownOpenChange were available before <5.22.0 | DropdownProps | - | 5.22.0 |
| 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. value is the value of current cell; record is the value object of current row; index is the row number. The return value should be a ReactNode | function(value, record, index) {} | - | |
| responsive | The list of breakpoints at which to display this column. Always visible if not set | Breakpoint[] | - | 4.2.0 |
| rowScope | Set scope attribute for all cells in this column | row | rowgroup | - | 5.1.0 |
| shouldCellUpdate | Control cell render logic | (record, prevRecord) => boolean | - | 4.3.0 |
| showSorterTooltip | If header show next sorter direction tooltip, override showSorterTooltip in table | boolean | Tooltip props & {target?: 'full-header' | 'sorter-icon' } | { target: 'full-header' } | 5.16.0 |
| sortDirections | Supported sort way, override sortDirections in Table, could be ascend, descend | Array | [ascend, descend] | |
| sorter | Sort function for local sort, see Array.sort's compareFunction. If it is server-side sorting, set to true, but if you want to support multi-column sorting, you can set it to { multiple: number } | function | boolean | { compare: function, multiple: number } | - | |
| sortOrder | Order of sorted values: ascend descend null | ascend | descend | null | - | |
| sortIcon | Customized sort icon | (props: { sortOrder }) => ReactNode | - | 5.6.0 |
| title | Title of this column | ReactNode | ({ sortOrder, sortColumn, filters }) => ReactNode | - | |
| width | Width of this column (width not working?) | string | number | - | |
| minWidth | Min width of this column, only works when tableLayout="auto" | number | - | 5.21.0 |
| hidden | Hidden this column | boolean | false | 5.13.0 |
| onCell | Set props on per cell | function(record, rowIndex) | - | |
| onFilter | Function that determines if the row is displayed when filtered | function(value, record) => boolean | - | |
| onHeaderCell | Set props on per header cell | function(column) | - |
ColumnGroup
| Property | Description | Type | Default |
|---|---|---|---|
| title | Title of the column group | ReactNode | - |
pagination
Properties for pagination.
| Property | Description | Type | Default |
|---|---|---|---|
| position | Specify the position of Pagination, could betopLeft | topCenter | topRight |bottomLeft | bottomCenter | bottomRight | Array | [bottomRight] |
More about pagination, please check Pagination.
expandable
Properties for expandable.
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| childrenColumnName | The column contains children to display | string | children | |
| columnTitle | Set the title of the expand column | ReactNode | - | 4.23.0 |
| columnWidth | Set the width of the expand column | string | number | - | |
| defaultExpandAllRows | Expand all rows initially | boolean | false | |
| defaultExpandedRowKeys | Initial expanded row keys | string[] | - | |
| expandedRowClassName | Expanded row's className | string | (record, index, indent) => string | - | string: 5.22.0 |
| expandedRowKeys | Current expanded row keys | string[] | - | |
| expandedRowRender | Expanded container render for each row | function(record, index, indent, expanded): ReactNode | - | |
| expandIcon | Customize row expand Icon. Ref example | function(props): ReactNode | - | |
| expandRowByClick | Whether to expand row by clicking anywhere in the whole row | boolean | false | |
| fixed | Whether the expansion icon is fixed. Optional true left right | boolean | string | false | 4.16.0 |
| indentSize | Indent size in pixels of tree data | number | 15 | |
| rowExpandable | Enable row can be expandable | (record) => boolean | - | |
| showExpandColumn | Show expand column | boolean | true | 4.18.0 |
| onExpand | Callback executed when the row expand icon is clicked | function(expanded, record) | - | |
| onExpandedRowsChange | Callback executed when the expanded rows change | function(expandedRows) | - |
rowSelection
Properties for row selection.
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| checkStrictly | Check table row precisely; parent row and children rows are not associated | boolean | true | 4.4.0 |
| columnTitle | Set the title of the selection column | ReactNode | (originalNode: ReactNode) => ReactNode | - | |
| columnWidth | Set the width of the selection column | string | number | 32px | |
| 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 | 4.3.0 |
| preserveSelectedRowKeys | Keep selection key even when it removed from dataSource | boolean | - | 4.4.0 |
| renderCell | Renderer of the table cell. Same as render in column | function(checked, record, index, originNode) {} | - | 4.1.0 |
| 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 | |
| onCell | Set props on per cell. Same as onCell in column | function(record, rowIndex) | - | 5.5.0 |
| onChange | Callback executed when selected rows change | function(selectedRowKeys, selectedRows, info: { type }) | - | info.type: 4.21.0 |
| 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) | - | |
| onSelectNone | Callback executed when row selection is cleared | function() | - | |
| onSelectMultiple | Callback executed when row selection is changed by pressing shift | function(selected, selectedRows, changeRows) | - |
scroll
| Property | Description | Type | Default |
|---|---|---|---|
| scrollToFirstRowOnChange | Whether to scroll to the top of the table when paging, sorting, filtering changes | boolean | - |
| 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' | string | number | true | - |
| y | Set vertical scrolling, can also be used to specify the height of the scroll area, could be string or number | string | number | - |
selection
| Property | Description | Type | Default |
|---|---|---|---|
| key | Unique key of this selection | string | - |
| text | Display text of this selection | ReactNode | - |
| onSelect | Callback executed when this selection is clicked | function(changeableRowKeys) | - |
Using in TypeScript
import React from 'react';import { Table } from 'antd';import type { TableColumnsType } from 'antd';interface User {key: number;name: string;}const columns: TableColumnsType<User> = [{key: 'name',title: 'Name',dataIndex: 'name',},];const data: User[] = [{key: 0,name: 'Jack',},];const Demo: React.FC = () => (<><Table<User> columns={columns} dataSource={data} />{/* JSX style usage */}<Table<User> dataSource={data}><Table.Column<User> key="name" title="Name" dataIndex="name" /></Table></>);export default Demo;
Here is the CodeSandbox for TypeScript.
Design Token
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| bodySortBg | Background color of table sorted column | string | #fafafa |
| borderColor | Border color of table | string | #f0f0f0 |
| cellFontSize | Font size of table cell (large size by default) | number | 14 |
| cellFontSizeMD | Font size of table cell (middle size) | number | 14 |
| cellFontSizeSM | Font size of table cell (small size) | number | 14 |
| cellPaddingBlock | Vertical padding of table cell | number | 16 |
| cellPaddingBlockMD | Vertical padding of table cell (middle size) | number | 12 |
| cellPaddingBlockSM | Vertical padding of table cell (small size) | number | 8 |
| cellPaddingInline | Horizontal padding of table cell (large size by default) | number | 16 |
| cellPaddingInlineMD | Horizontal padding of table cell (middle size) | number | 8 |
| cellPaddingInlineSM | Horizontal padding of table cell (small size) | number | 8 |
| expandIconBg | Background of expand button | string | #ffffff |
| filterDropdownBg | Color of filter dropdown | string | #ffffff |
| filterDropdownMenuBg | Background of filter dropdown menu item | string | #ffffff |
| fixedHeaderSortActiveBg | Background color of fixed table header when sorted | string | #f0f0f0 |
| footerBg | Background of footer | string | #fafafa |
| footerColor | Color of footer text | string | rgba(0,0,0,0.88) |
| headerBg | Background of table header | string | #fafafa |
| headerBorderRadius | Border radius of table header | number | 8 |
| headerColor | Color of table header text | string | rgba(0,0,0,0.88) |
| headerFilterHoverBg | Background color of table header filter button when hovered | string | rgba(0,0,0,0.06) |
| headerSortActiveBg | Background color of table header when sorted | string | #f0f0f0 |
| headerSortHoverBg | Background color of table header when sorted and hovered | string | #f0f0f0 |
| headerSplitColor | Split border color of table header | string | #f0f0f0 |
| rowExpandedBg | Background color of table expanded row | string | rgba(0,0,0,0.02) |
| rowHoverBg | Background color of table hovered row | string | #fafafa |
| rowSelectedBg | Background color of table selected row | string | #e6f4ff |
| rowSelectedHoverBg | Background color of table selected row when hovered | string | #bae0ff |
| selectionColumnWidth | Width of selection column | string | number | 32 |
| stickyScrollBarBg | Background of sticky scrollbar | string | rgba(0,0,0,0.25) |
| stickyScrollBarBorderRadius | Border radius of sticky scrollbar | number | 100 |
Note
According to the React documentation, every child in an array should be assigned a unique key. The values inside the Table's dataSource and columns should follow this rule. By default, dataSource[i].key will be treated as the key value for dataSource.
If dataSource[i].key is not provided, then you should specify the primary key of dataSource value via rowKey, as shown below. If not, warnings like the one above will show in browser console.
// primary key is uidreturn <Table rowKey="uid" />;// orreturn <Table rowKey={(record) => record.uid} />;
FAQ
How to hide pagination when single page or no data?
You can set hideOnSinglePage with pagination prop.
Table will return to first page when filter data.
Table total page count usually reduce after filter data, we by default return to first page in case of current page is out of filtered results.
You may need to keep current page after filtering when fetch data from remote service, please check this demo as workaround.
Also you can use the action from extra param to determine when return to first page.
Why Table pagination show size changer?
In order to improve user experience, Pagination show size changer by default when total > 50 since 4.1.0. You can set showSizeChanger=false to disable this feature.
Why Table fully render when state change?
Table can not tell what state used in columns.render, so it always need fully render to avoid sync issue. You can use column.shouldCellUpdate to control render.
How to handle fixed column display over the mask layout?
Fixed column use z-index to make it over other columns. You will find sometime fixed columns also over your mask layout. You can set z-index on your mask layout to resolve.
How to custom render Table Checkbox（For example, adding Tooltip）?
Since 4.1.0, You can use rowSelection.renderCell to custom render Table Checkbox. If you want to add Tooltip, please refer to this demo.
Why does components.body.wrapper or components.body.row report an error when virtual is enabled?
Because virtual table needs to get its ref to do some calculations, so you need to use React.forwardRef wrapper and pass the ref to the dom