2016-08-15 07:54:01 +08:00
---
category: Components
2022-11-09 12:28:04 +08:00
group: Data Display
2016-08-15 07:54:01 +08:00
title: Table
2024-03-22 14:22:42 +08:00
description: A table displays rows of data.
2022-11-30 20:14:41 +08:00
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*3yz3QqMlShYAAAAAAAAAAAAADrJ8AQ/original
2023-02-09 22:17:31 +08:00
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Sv8XQ50NB40AAAAAAAAAAAAADrJ8AQ/original
2016-08-15 07:54:01 +08:00
---
2016-09-10 13:43:30 +08:00
## When To Use
2016-08-15 07:54:01 +08:00
2016-11-29 17:13:24 +08:00
- To display a collection of structured data.
- To sort, search, paginate, filter data.
2016-08-15 07:54:01 +08:00
2016-09-10 13:43:30 +08:00
## How To Use
2016-08-15 07:54:01 +08:00
2017-09-04 10:47:37 +08:00
Specify `dataSource` of Table as an array of data.
2016-08-15 07:54:01 +08:00
```jsx
2019-05-07 14:57:32 +08:00
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} / > ;
2016-08-15 07:54:01 +08:00
```
2022-04-12 22:22:01 +08:00
## Promotion
2022-04-12 22:25:47 +08:00
- [Kitchen Sketch Plugin 💎 ](https://kitchen.alipay.com )
- [ProTable - Advanced Tables ](https://procomponents.ant.design/en-US/components/table )
2022-04-12 22:22:01 +08:00
- [S2 - Analytical Tables ](https://github.com/antvis/s2/ )
2022-11-09 12:28:04 +08:00
## Examples
2022-11-17 17:31:26 +08:00
<!-- prettier - ignore -->
2022-11-09 12:28:04 +08:00
< code src = "./demo/basic.tsx" > Basic Usage< / code >
< code src = "./demo/jsx.tsx" > JSX style API< / code >
< code src = "./demo/row-selection.tsx" > selection< / code >
< code src = "./demo/row-selection-and-operation.tsx" > Selection and operation< / code >
< code src = "./demo/row-selection-custom.tsx" > Custom selection< / code >
2023-01-07 21:21:52 +08:00
< code src = "./demo/row-selection-debug.tsx" debug > Selection Perf< / code >
2022-11-09 12:28:04 +08:00
< code src = "./demo/head.tsx" > Filter and sorter< / code >
< code src = "./demo/filter-in-tree.tsx" > Filter in Tree< / code >
< code src = "./demo/filter-search.tsx" > Filter search< / code >
< code src = "./demo/multiple-sorter.tsx" > Multiple sorter< / code >
< code src = "./demo/reset-filter.tsx" > Reset filters and sorters< / code >
< code src = "./demo/custom-filter-panel.tsx" > Customized filter panel< / code >
< code src = "./demo/ajax.tsx" > Ajax< / code >
< code src = "./demo/size.tsx" > size< / code >
< code src = "./demo/narrow.tsx" debug > size< / code >
< code src = "./demo/bordered.tsx" > border, title and footer< / code >
< code src = "./demo/expand.tsx" > Expandable Row< / code >
< code src = "./demo/order-column.tsx" > Order Specific Column< / code >
< code src = "./demo/colspan-rowspan.tsx" > colSpan and rowSpan< / code >
< code src = "./demo/tree-data.tsx" > Tree data< / code >
< code src = "./demo/tree-table-ellipsis.tsx" debug > Tree data ellipsis debug demo< / code >
< code src = "./demo/fixed-header.tsx" > Fixed Header< / code >
< code src = "./demo/fixed-columns.tsx" > Fixed Columns< / code >
2024-01-31 10:25:18 +08:00
< code src = "./demo/fixed-gapped-columns.tsx" version = "5.14.0" > Stack Fixed Columns< / code >
2022-11-09 12:28:04 +08:00
< code src = "./demo/fixed-columns-header.tsx" > Fixed Columns and Header< / code >
2024-09-11 11:21:18 +08:00
< code src = "./demo/hidden-columns.tsx" version = "5.13.0" > Hidden Columns< / code >
2022-11-09 12:28:04 +08:00
< code src = "./demo/grouping-columns.tsx" > Grouping table head< / code >
< code src = "./demo/edit-cell.tsx" > Editable Cells< / code >
< code src = "./demo/edit-row.tsx" > Editable Rows< / code >
< code src = "./demo/nested-table.tsx" > Nested tables< / code >
< code src = "./demo/drag-sorting.tsx" > Drag sorting< / code >
2024-04-29 11:08:51 +08:00
< code src = "./demo/drag-column-sorting.tsx" > Drag Column sorting< / code >
2023-02-02 10:54:13 +08:00
< code src = "./demo/drag-sorting-handler.tsx" > Drag sorting with handler< / code >
2022-11-09 12:28:04 +08:00
< code src = "./demo/resizable-column.tsx" debug > Resizable column< / code >
< code src = "./demo/ellipsis.tsx" > ellipsis column< / code >
< code src = "./demo/ellipsis-custom-tooltip.tsx" > ellipsis column custom tooltip< / code >
2024-07-03 22:54:21 +08:00
< code src = "./demo/custom-empty.tsx" > Custom empty< / code >
2022-11-09 12:28:04 +08:00
< code src = "./demo/summary.tsx" > Summary< / code >
2024-09-11 11:21:18 +08:00
< code src = "./demo/virtual-list.tsx" version = "5.9.0" > Virtual list< / code >
2022-11-09 12:28:04 +08:00
< code src = "./demo/responsive.tsx" > Responsive< / code >
< code src = "./demo/nest-table-border-debug.tsx" debug > Nested Bordered Table Debug< / code >
< code src = "./demo/pagination.tsx" > Pagination Settings< / code >
< code src = "./demo/row-selection-custom-debug.tsx" debug > Custom selection group< / code >
< code src = "./demo/sticky.tsx" > Fixed header and scroll bar with the page< / code >
< code src = "./demo/dynamic-settings.tsx" > Dynamic Settings< / code >
2023-04-06 17:16:27 +08:00
< code src = "./demo/selections-debug.tsx" debug > selections with icon< / code >
2023-08-09 10:52:39 +08:00
< code src = "./demo/component-token.tsx" debug > Component Token< / code >
2022-11-09 12:28:04 +08:00
2016-08-15 07:54:01 +08:00
## API
2023-08-08 18:27:48 +08:00
Common props ref: [Common props](/docs/react/common-props)
2016-08-15 07:54:01 +08:00
### Table
2022-11-17 17:31:26 +08:00
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| bordered | Whether to show all table borders | boolean | false | |
2022-12-22 14:12:26 +08:00
| columns | Columns of table | [ColumnsType ](#column )\[] | - | |
2024-01-26 16:37:27 +08:00
| components | Override default table elements | [TableComponents ](https://github.com/react-component/table/blob/75ee0064e54a4b3215694505870c9d6c817e9e4a/src/interface.ts#L129 ) | - | |
2022-11-17 17:31:26 +08:00
| dataSource | Data record array to be displayed | object\[] | - | |
| expandable | Config expandable content | [expandable ](#expandable ) | - | |
| footer | Table footer renderer | function(currentPageData) | - | |
| getPopupContainer | The render container of dropdowns in table | (triggerNode) => HTMLElement | () => TableHtmlElement | |
2022-12-22 14:12:26 +08:00
| loading | Loading status of table | boolean \| [Spin Props ](/components/spin/#api ) | false | |
2022-11-17 17:31:26 +08:00
| locale | The i18n text including filter, sort, empty text, etc | object | [Default Value ](https://github.com/ant-design/ant-design/blob/6dae4a7e18ad1ba193aedd5ab6867e1d823e2aa4/components/locale/en_US.tsx#L19-L37 ) | |
2022-11-29 15:41:21 +08:00
| pagination | Config of pagination. You can ref table pagination [config ](#pagination ) or full [`pagination` ](/components/pagination/ ) document, hide it by setting it to `false` | object \| `false` | - | |
2022-11-17 17:31:26 +08:00
| 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` | |
2022-12-22 14:12:26 +08:00
| rowSelection | Row selection [config ](#rowselection ) | object | - | |
2024-03-29 15:29:49 +08:00
| rowHoverable | Row hover | boolean | true | 5.16.0 |
2022-11-17 17:31:26 +08:00
| scroll | Whether the table can be scrollable, [config ](#scroll ) | object | - | |
| showHeader | Whether to show table header | boolean | true | |
2024-03-18 18:45:31 +08:00
| 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 ](/components/tooltip/#api ) & `{target?: 'full-header' \| 'sorter-icon' }` | { target: 'full-header' } | 5.16.0 |
2022-12-07 18:39:10 +08:00
| size | Size of table | `large` \| `middle` \| `small` | `large` | |
2022-11-17 17:31:26 +08:00
| 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 ](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout ) attribute of table element | - \| `auto` \| `fixed` | -< hr /> `fixed` when header/columns are fixed, or using `column.ellipsis` | |
| title | Table title renderer | function(currentPageData) | - | |
2024-03-21 10:07:10 +08:00
| virtual | Support virtual list | boolean | - | 5.9.0 |
2022-11-17 17:31:26 +08:00
| 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) | - | |
2024-03-21 10:07:10 +08:00
| onScroll | Triggered when the table body is scrolled. Note that only vertical scrolling will trigger the event when `virtual` | function(event) | - | 5.16.0 |
2016-08-15 07:54:01 +08:00
2023-10-11 13:55:20 +08:00
### 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 |
2018-02-08 14:25:49 +08:00
#### onRow usage
Same as `onRow` `onHeaderRow` `onCell` `onHeaderCell`
2018-02-08 14:14:46 +08:00
```jsx
< Table
2018-12-29 07:19:12 +08:00
onRow={(record, rowIndex) => {
2018-02-08 14:14:46 +08:00
return {
2022-11-30 20:14:41 +08:00
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
2018-02-08 14:14:46 +08:00
};
2018-03-22 14:54:46 +08:00
}}
2021-01-29 09:50:49 +08:00
onHeaderRow={(columns, index) => {
2018-02-08 14:14:46 +08:00
return {
2019-05-07 14:57:32 +08:00
onClick: () => {}, // click header row
2018-02-08 14:14:46 +08:00
};
2018-03-22 14:54:46 +08:00
}}
2018-02-08 14:14:46 +08:00
/>
```
2016-08-15 07:54:01 +08:00
### Column
2017-09-18 10:28:05 +08:00
One of the Table `columns` prop for describing the table's columns, Column has the same API.
2016-08-15 07:54:01 +08:00
2022-11-17 17:31:26 +08:00
| 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.< br /> 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 ](https://github.com/ant-design/ant-design/blob/ecc54dda839619e921c0ace530408871f0281c2a/components/table/interface.tsx#L79 )) => ReactNode | - | |
| filterDropdownOpen | 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 | - | |
2024-02-19 10:03:38 +08:00
| filterOnClose | Whether to trigger filter when the filter menu closes | boolean | true | 5.15.0 |
2022-11-17 17:31:26 +08:00
| 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\[] | - | |
| 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 | function(text, record, index) {} | - | |
2022-12-20 21:18:05 +08:00
| responsive | The list of breakpoints at which to display this column. Always visible if not set | [Breakpoint ](https://github.com/ant-design/ant-design/blob/015109b42b85c63146371b4e32b883cf97b088e8/components/_util/responsiveObserve.ts#L1 )\[] | - | 4.2.0 |
| rowScope | Set scope attribute for all cells in this column | `row` \| `rowgroup` | - | 5.1.0 |
2022-11-17 17:31:26 +08:00
| shouldCellUpdate | Control cell render logic | (record, prevRecord) => boolean | - | 4.3.0 |
2024-03-18 18:45:31 +08:00
| showSorterTooltip | If header show next sorter direction tooltip, override `showSorterTooltip` in table | boolean \| [Tooltip props ](/components/tooltip/ ) & `{target?: 'full-header' \| 'sorter-icon' }` | { target: 'full-header' } | 5.16.0 |
2022-11-17 17:31:26 +08:00
| sortDirections | Supported sort way, override `sortDirections` in `Table` , could be `ascend` , `descend` | Array | \[`ascend` , `descend` ] | |
2023-10-26 21:51:25 +08:00
| sorter | Sort function for local sort, see [Array.sort ](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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 } | - | |
2022-11-17 17:31:26 +08:00
| sortOrder | Order of sorted values: `ascend` `descend` `null` | `ascend` \| `descend` \| null | - | |
2023-05-22 18:03:45 +08:00
| sortIcon | Customized sort icon | (props: { sortOrder }) => ReactNode | - | 5.6.0 |
2022-11-17 17:31:26 +08:00
| title | Title of this column | ReactNode \| ({ sortOrder, sortColumn, filters }) => ReactNode | - | |
| width | Width of this column ([width not working?](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241)) | string \| number | - | |
2024-08-16 10:07:52 +08:00
| minWidth | Min width of this column, only works when `tableLayout="auto"` | number | - | 5.21.0 |
2024-01-13 15:20:34 +08:00
| hidden | Hidden this column | boolean | false | 5.13.0 |
2022-11-17 17:31:26 +08:00
| onCell | Set props on per cell | function(record, rowIndex) | - | |
| onFilter | Function that determines if the row is displayed when filtered | function(value, record) => boolean | - | |
| onFilterDropdownOpenChange | Callback executed when `filterDropdownOpen` is changed | function(visible) {} | - | |
| onHeaderCell | Set props on per header cell | function(column) | - | |
2016-08-15 07:54:01 +08:00
2016-11-22 10:11:12 +08:00
### ColumnGroup
2021-03-30 20:02:55 +08:00
| Property | Description | Type | Default |
| -------- | ------------------------- | --------- | ------- |
| title | Title of the column group | ReactNode | - |
2016-11-22 10:11:12 +08:00
2018-03-02 12:00:28 +08:00
### pagination
Properties for pagination.
2022-11-17 17:31:26 +08:00
| Property | Description | Type | Default |
| --- | --- | --- | --- |
2021-02-07 20:23:40 +08:00
| position | Specify the position of `Pagination` , could be`topLeft` \| `topCenter` \| `topRight` \|`bottomLeft` \| `bottomCenter` \| `bottomRight` | Array | \[`bottomRight` ] |
2018-03-02 12:00:28 +08:00
More about pagination, please check [`Pagination` ](/components/pagination/ ).
2019-11-15 14:35:25 +08:00
### expandable
Properties for expandable.
2022-11-17 17:31:26 +08:00
| 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\[] | - | |
2024-09-29 13:28:53 +08:00
| expandedRowClassName | Expanded row's className | string \| (record, index, indent) => string | - | string: 5.22.0 |
2022-11-17 17:31:26 +08:00
| 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 ](https://codesandbox.io/s/fervent-bird-nuzpr ) | 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 |
2024-04-30 12:21:12 +08:00
| onExpand | Callback executed when the row expand icon is clicked | function(expanded, record) | - | |
2022-11-17 17:31:26 +08:00
| onExpandedRowsChange | Callback executed when the expanded rows change | function(expandedRows) | - | |
2021-03-30 20:02:55 +08:00
2016-08-15 07:54:01 +08:00
### rowSelection
2017-09-18 10:28:05 +08:00
Properties for row selection.
2016-08-15 07:54:01 +08:00
2022-11-17 17:31:26 +08:00
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| checkStrictly | Check table row precisely; parent row and children rows are not associated | boolean | true | 4.4.0 |
2023-10-24 16:05:29 +08:00
| columnTitle | Set the title of the selection column | ReactNode \| (originalNode: ReactNode) => ReactNode | - | |
2022-11-17 17:31:26 +08:00
| 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 ](#selection ), only displays default selections when set to `true` | object\[] \| boolean | - | |
| type | `checkbox` or `radio` | `checkbox` \| `radio` | `checkbox` | |
2023-05-06 15:24:22 +08:00
| onCell | Set props on per cell. Same as `onCell` in column | function(record, rowIndex) | - | 5.5.0 |
2022-11-17 17:31:26 +08:00
| 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) | - | |
2017-02-23 19:29:47 +08:00
2019-09-26 11:31:28 +08:00
### scroll
2022-11-17 17:31:26 +08:00
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| scrollToFirstRowOnChange | Whether to scroll to the top of the table when paging, sorting, filtering changes | boolean | - |
2024-07-23 17:28:23 +08:00
| 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' ](https://developer.mozilla.org/en-US/docs/Web/CSS/width#max-content ) | string \| number \| true | - |
2022-11-17 17:31:26 +08:00
| y | Set vertical scrolling, can also be used to specify the height of the scroll area, could be string or number | string \| number | - |
2019-09-26 11:31:28 +08:00
2017-02-23 19:29:47 +08:00
### selection
2022-11-17 17:31:26 +08:00
| 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) | - |
2016-08-15 07:54:01 +08:00
2017-01-11 19:52:43 +08:00
## Using in TypeScript
2018-11-09 18:04:47 +08:00
```tsx
2023-09-07 17:56:55 +08:00
import React from 'react';
2017-01-11 19:52:43 +08:00
import { Table } from 'antd';
2024-07-09 17:35:10 +08:00
import type { TableColumnsType } from 'antd';
2017-01-11 19:52:43 +08:00
2019-06-27 14:17:08 +08:00
interface User {
2020-07-31 14:01:28 +08:00
key: number;
2017-01-11 19:52:43 +08:00
name: string;
}
2024-07-09 17:35:10 +08:00
const columns: TableColumnsType< User > = [
2020-08-10 09:43:21 +08:00
{
key: 'name',
title: 'Name',
dataIndex: 'name',
},
];
2017-01-11 19:52:43 +08:00
2020-08-10 09:43:21 +08:00
const data: User[] = [
{
key: 0,
name: 'Jack',
},
];
2017-01-11 19:52:43 +08:00
2023-02-08 15:04:32 +08:00
const Demo: React.FC = () => (
2020-07-31 14:01:28 +08:00
< >
< Table < User > columns={columns} dataSource={data} />
2023-02-05 19:03:59 +08:00
{/* JSX style usage */}
2020-07-31 14:01:28 +08:00
< Table < User > dataSource={data}>
< Table.Column < User > key="name" title="Name" dataIndex="name" />
< / Table >
< />
);
2023-02-08 15:04:32 +08:00
export default Demo;
2017-01-11 19:52:43 +08:00
```
2020-07-31 14:01:28 +08:00
Here is the [CodeSandbox for TypeScript ](https://codesandbox.io/s/serene-platform-0jo5t ).
2023-04-11 10:25:24 +08:00
## Design Token
< ComponentTokenTable component = "Table" > < / ComponentTokenTable >
2016-08-15 07:54:01 +08:00
## Note
2019-10-08 22:06:50 +08:00
According to the [React documentation ](https://facebook.github.io/react/docs/lists-and-keys.html#keys ), 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` .
2016-08-15 07:54:01 +08:00
2018-05-21 23:42:57 +08:00
![console warning ](https://os.alipayobjects.com/rmsportal/luLdLvhPOiRpyss.png )
2016-08-15 07:54:01 +08:00
2019-10-08 22:06:50 +08:00
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.
2016-08-15 07:54:01 +08:00
```jsx
// primary key is uid
return < Table rowKey = "uid" / > ;
// or
2022-11-30 20:14:41 +08:00
return < Table rowKey = {(record) = > record.uid} />;
2016-08-15 07:54:01 +08:00
```
2019-11-15 14:35:25 +08:00
## FAQ
2021-04-16 14:40:29 +08:00
### How to hide pagination when single page or no data?
2019-11-15 14:35:25 +08:00
You can set `hideOnSinglePage` with `pagination` prop.
2020-04-01 18:59:41 +08:00
### Table will return to first page when filter data.
2023-02-23 21:56:43 +08:00
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.
2020-04-01 18:59:41 +08:00
You may need to keep current page after filtering when fetch data from remote service, please check [this demo ](https://codesandbox.io/s/yuanchengjiazaishuju-ant-design-demo-7y2uf ) as workaround.
2020-04-09 10:52:02 +08:00
2020-06-28 22:41:59 +08:00
Also you can use the action from extra param to determine when return to first page.
2020-04-09 10:52:02 +08:00
### Why Table pagination show size changer?
2020-07-15 15:09:50 +08:00
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.
2020-05-03 16:10:37 +08:00
### Why Table fully render when state change?
2020-05-05 15:03:22 +08:00
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.
2020-12-14 16:04:23 +08:00
### 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.
2022-05-11 17:58:26 +08:00
### How to custom render Table Checkbox( For example, adding Tooltip) ?
2022-12-22 14:12:26 +08:00
Since `4.1.0` , You can use [`rowSelection.renderCell` ](https://ant.design/components/table/#rowselection ) to custom render Table Checkbox. If you want to add Tooltip, please refer to this [demo ](https://codesandbox.io/s/table-row-tooltip-v79j2v ).
2024-01-26 16:37:27 +08:00
2024-04-03 18:11:00 +08:00
### Why does components.body.wrapper or components.body.row report an error when virtual is enabled?
2024-01-26 16:37:27 +08:00
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