# Table - Page: https://jiguang132.com/resources/ant-design/docs/table - Resource: Ant Design (https://jiguang132.com/resources/ant-design.md) - All guides: https://jiguang132.com/resources/ant-design/docs.md A table displays rows of data. ## 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. ```jsx 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', }, ]; ; ``` ## Promotion - [Kitchen Sketch Plugin 💎](https://kitchen.alipay.com) - [ProTable - Advanced Tables](https://procomponents.ant.design/en-US/components/table) - [S2 - Analytical Tables](https://github.com/antvis/s2/) ## Examples - Basic Usage · `basic` - JSX style API · `jsx` - selection · `row-selection` - Selection and operation · `row-selection-and-operation` - Custom selection · `row-selection-custom` - Filter and sorter · `head` - Filter in Tree · `filter-in-tree` - Filter search · `filter-search` - Multiple sorter · `multiple-sorter` - Reset filters and sorters · `reset-filter` - Customized filter panel · `custom-filter-panel` - Ajax · `ajax` - size · `size` - border, title and footer · `bordered` - Expandable Row · `expand` - Order Specific Column · `order-column` - colSpan and rowSpan · `colspan-rowspan` - Tree data · `tree-data` - Fixed Header · `fixed-header` - Auto height · `auto-height` - Fixed Columns · `fixed-columns` - Stack Fixed Columns · `fixed-gapped-columns` - Fixed Columns and Header · `fixed-columns-header` - Hidden Columns · `hidden-columns` - Grouping table head · `grouping-columns` - Editable Cells · `edit-cell` - Editable Rows · `edit-row` - Nested tables · `nested-table` - Drag sorting · `drag-sorting` - Drag Column sorting · `drag-column-sorting` - Drag sorting with handler · `drag-sorting-handler` - ellipsis column · `ellipsis` - Shared column props · `column-defaults` - ellipsis column custom tooltip · `ellipsis-custom-tooltip` - Custom empty · `custom-empty` - Summary · `summary` - Virtual list · `virtual-list` - Responsive · `responsive` - Pagination Settings · `pagination` - Fixed header and scroll bar with the page · `sticky` - Dynamic Settings · `dynamic-settings` - Custom semantic dom styling · `style-class` ## API Common props ref：[Common props](#jguang-common-props) ### Table | Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) | | --- | --- | --- | --- | --- | --- | | bordered | Whether to show all table borders | boolean | false | | × | | classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-dom), string> \| (info: { props })=> Record<[SemanticDOM](#semantic-dom), string> | - | | 6.0.1 | | column | Shared props applied to columns when the same property is not defined on the column itself | Partial<[ColumnType](#column)> | - | 6.4.0 | × | | columns | Columns of table | [ColumnsType](#column)\[] | - | | × | | components | Override default table elements | [TableComponents](https://github.com/react-component/table/blob/75ee0064e54a4b3215694505870c9d6c817e9e4a/src/interface.ts#L129) | - | | × | | dataSource | Data record array to be displayed | object\[] | - | | × | | expandable | Config expandable content | [expandable](#expandable) | - | | `expandable.expandIcon`: 5.14.0 | | 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](/components/spin/#api) | false | | × | | 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) | | × | | 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` | - | | × | | 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` | | `string`: 6.0.0, `function`: 6.1.0 | | rowSelection | Row selection [config](#rowselection) | object | - | | × | | rowHoverable | Row hover | boolean | true | 5.16.0 | × | | scroll | Whether the table can be scrollable, [config](#scroll) | object | - | | 6.3.0 | | 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](/components/tooltip/#api) & `{target?: 'full-header' \| 'sorter-icon' }` | { target: 'full-header' } | 5.16.0 | × | | size | Size of table | `large` \| `medium` \| `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) | × | | styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-dom), CSSProperties> \| (info: { props })=> Record<[SemanticDOM](#semantic-dom), CSSProperties> | - | | 6.0.1 | | 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` | -
`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`. When `offset` is specified, the table will scroll to align the target row to the top with the given offset and not working with `top`. Optional `align` param to control alignment: `start` align to top, `center` align to center, `end` align to bottom, `nearest` smart align (default). `center` align is not supported in virtual scrolling mode | (config: { index?: number, key?: React.Key, top?: number, offset?: number, align?: 'start' \| 'center' \| 'end' \| 'nearest' }) => void | 5.11.0 | #### onRow usage Same as `onRow` `onHeaderRow` `onCell` `onHeaderCell` ```jsx
{ 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={(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](https://github.com/ant-design/ant-design/blob/ecc54dda839619e921c0ace530408871f0281c2a/components/table/interface.tsx#L79)) => 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](/components/dropdown#api) | - | 5.22.0 | | fixed | (IE not support) Set column to be fixed: `true`(same as `'start'`) `'start'` `'end'` | 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 | (value: V, record: T, index: number): ReactNode | - | | | 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 | | 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](/components/tooltip/) & `{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](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 } | - | | | 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 \| ({ sortColumns, filters }) => ReactNode | - | | | width | Width of this column ([width not working?](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241)) | 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 | | --- | --- | --- | --- | | placement | Specify the placement of `Pagination`, could be`topStart` \| `topCenter` \| `topEnd` \|`bottomStart` \| `bottomCenter` \| `bottomEnd` \| `none` | Array | \[`bottomEnd`] | | ~~position~~ | Specify the position of `Pagination`, could be`topLeft` \| `topCenter` \| `topRight` \|`bottomLeft` \| `bottomCenter` \| `bottomRight` \| `none`, please use `placement` instead | Array | \[`bottomRight`] | More about pagination, please check [`Pagination`](/components/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](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 | | forceRender | Force render expanded row content before expansion. In virtual mode, only rows currently mounted by the virtual list are force-rendered; off-screen rows may still be unmounted | boolean | false | 6.6.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) | - | | | ~~expandedRowOffset~~ | Deprecated: Expand the number of offset columns of the row. After setting, it will force the columns in front of it to be fixed columns. Please use'Table. EXPAND_COLUMN 'instead and control the position through column order | number | - | 5.26.0 | ### rowSelection Properties for row selection. | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | | align | Set the alignment of selection column | `left` \| `right` \| `center` | `left` | 5.25.0 | | 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) | - | | | getTitleCheckboxProps | Get title Checkbox props | function() | - | | | 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 | (checked: boolean, record: T, index: number, originNode: ReactNode): ReactNode | - | 4.1.0 | | selectedRowKeys | Controlled selected row keys | string\[] \| number\[] | \[] | | | defaultSelectedRowKeys | Default 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` | | | 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) | - | | ### 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'](https://developer.mozilla.org/en-US/docs/Web/CSS/width#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 {#using-in-typescript} ```tsx import React from 'react'; import { Table } from 'antd'; import type { TableColumnsType } from 'antd'; interface User { key: number; name: string; } const columns: TableColumnsType = [ { key: 'name', title: 'Name', dataIndex: 'name', }, ]; const data: User[] = [ { key: 0, name: 'Jack', }, ]; const Demo: React.FC = () => ( <> columns={columns} dataSource={data} /> {/* JSX style usage */} dataSource={data}> key="name" title="Name" dataIndex="name" />
); export default Demo; ``` Here is the [CodeSandbox for TypeScript](https://codesandbox.io/s/serene-platform-0jo5t). ## Semantic DOM | Semantic node | Native description | Version | | --- | --- | --- | | `root` | Root element with font-size, background, border-radius, scrollbar-color and other basic table container styles | — | | `title` | Title element with table title styling and layout | — | | `content` | Content element with table content area styling and layout | — | | `header.wrapper` | Header wrapper element with table header layout and container styles | — | | `header.row` | Header row element with table header row layout and styling | — | | `header.cell` | Header cell element with relative positioning, padding, word-wrap, background, text color, font-weight and other header cell styles | — | | `section` | Container element with clear-fix, max-width, scrollbar background and other table wrapper styles | — | | `body.wrapper` | Body wrapper element with table body layout and container styles | — | | `body.row` | Body row element with hover effects, selected states, expanded states and other interactive row styles | — | | `body.cell` | Body cell element with relative positioning, padding, word-wrap and other basic data cell styles | — | | `footer` | Footer element with table footer background color, text color and other footer styles | — | | `pagination.root` | Pagination root element with pagination component basic styles and layout | — | | `pagination.item` | Pagination item element with pagination item styling and interactive effects | — | Semantic description source: `vendor/components/table/demo/_semantic.tsx` ## Design Token Types, inheritance and declarations retain the pinned native source. Defaults are computed by the native theme and may be overridden by ConfigProvider; this table does not invent static defaults. | Token | Type | Native description | | --- | --- | --- | | `headerBg` | `string` | Background of table header | | `headerColor` | `string` | Color of table header text | | `headerSortActiveBg` | `string` | Background color of table header when sorted | | `headerSortHoverBg` | `string` | Background color of table header when sorted and hovered | | `bodySortBg` | `string` | Background color of table sorted column | | `rowHoverBg` | `string` | Background color of table hovered row | | `rowSelectedBg` | `string` | Background color of table selected row | | `rowSelectedHoverBg` | `string` | Background color of table selected row when hovered | | `rowExpandedBg` | `string` | Background color of table expanded row | | `cellPaddingBlock` | `number` | Vertical padding of table cell | | `cellPaddingInline` | `number` | Horizontal padding of table cell (large size by default) | | `cellPaddingBlockMD` | `number` | Vertical padding of table cell (middle size) | | `cellPaddingInlineMD` | `number` | Horizontal padding of table cell (middle size) | | `cellPaddingBlockSM` | `number` | Vertical padding of table cell (small size) | | `cellPaddingInlineSM` | `number` | Horizontal padding of table cell (small size) | | `borderColor` | `string` | Border color of table | | `headerBorderRadius` | `number` | Border radius of table header | | `footerBg` | `string` | Background of footer | | `footerColor` | `string` | Color of footer text | | `cellFontSize` | `number` | Font size of table cell (large size by default) | | `cellFontSizeMD` | `number` | Font size of table cell (middle size) | | `cellFontSizeSM` | `number` | Font size of table cell (small size) | | `headerSplitColor` | `string` | Split border color of table header | | `fixedHeaderSortActiveBg` | `string` | Background color of fixed table header when sorted | | `headerFilterHoverBg` | `string` | Background color of table header filter button when hovered | | `filterDropdownMenuBg` | `string` | Background of filter dropdown menu item | | `filterDropdownBg` | `string` | Color of filter dropdown | | `expandIconBg` | `string` | Background of expand button | | `selectionColumnWidth` | `number \| string` | Width of selection column | | `stickyScrollBarBg` | `string` | Background of sticky scrollbar | | `stickyScrollBarBorderRadius` | `number` | Border radius of sticky scrollbar | | `expandIconMarginTop` | `number` | See native declaration and inherited types | | `expandIconHalfInner` | `number` | See native declaration and inherited types | | `expandIconSize` | `number` | See native declaration and inherited types | | `expandIconScale` | `number` | See native declaration and inherited types | | `headerIconColor` | `string` | See native declaration and inherited types | | `headerIconHoverColor` | `string` | See native declaration and inherited types | Declaration source: `vendor/components/table/style/index.ts` ```ts import { unit } from '@ant-design/cssinjs'; import type { CSSObject } from '@ant-design/cssinjs'; import { FastColor } from '@ant-design/fast-color'; import { clearFix, resetComponent } from '../../style'; import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal'; import { genStyleHooks, mergeToken } from '../../theme/internal'; import genBorderedStyle from './bordered'; import genEllipsisStyle from './ellipsis'; import genEmptyStyle from './empty'; import genExpandStyle from './expand'; import genFilterStyle from './filter'; import genFixedStyle from './fixed'; import genPaginationStyle from './pagination'; import genRadiusStyle from './radius'; import genRtlStyle from './rtl'; import genSelectionStyle from './selection'; import genSizeStyle from './size'; import genSorterStyle from './sorter'; import genStickyStyle from './sticky'; import genSummaryStyle from './summary'; import genVirtualStyle from './virtual'; export interface ComponentToken { /** * @desc 表头背景 * @descEN Background of table header */ headerBg: string; /** * @desc 表头文字颜色 * @descEN Color of table header text */ headerColor: string; /** * @desc 表头排序激活态背景色 * @descEN Background color of table header when sorted */ headerSortActiveBg: string; /** * @desc 表头排序激活态悬浮背景色 * @descEN Background color of table header when sorted and hovered */ headerSortHoverBg: string; /** * @desc 表格排序列背景色 * @descEN Background color of table sorted column */ bodySortBg: string; /** * @desc 表格行悬浮背景色 * @descEN Background color of table hovered row */ rowHoverBg: string; /** * @desc 表格行选中背景色 * @descEN Background color of table selected row */ rowSelectedBg: string; /** * @desc 表格行选中悬浮背景色 * @descEN Background color of table selected row when hovered */ rowSelectedHoverBg: string; /** * @desc 表格行展开背景色 * @descEN Background color of table expanded row */ rowExpandedBg: string; /** * @desc 单元格纵向内间距 * @descEN Vertical padding of table cell */ cellPaddingBlock: number; /** * @desc 单元格横向内间距（默认大尺寸） * @descEN Horizontal padding of table cell (large size by default) */ cellPaddingInline: number; /** * @desc 单元格纵向内间距（中等尺寸） * @descEN Vertical padding of table cell (middle size) */ cellPaddingBlockMD: number; /** * @desc 单元格横向内间距（中等尺寸） * @descEN Horizontal padding of table cell (middle size) */ cellPaddingInlineMD: number; /** * @desc 单元格纵向内间距（小尺寸） * @descEN Vertical padding of table cell (small size) */ cellPaddingBlockSM: number; /** * @desc 单元格横向内间距（小尺寸） * @descEN Horizontal padding of table cell (small size) */ cellPaddingInlineSM: number; /** * @desc 表格边框/分割线颜色 * @descEN Border color of table */ borderColor: string; /** * @desc 表头圆角 * @descEN Border radius of table header */ headerBorderRadius: number; /** * @desc 表格底部背景色 * @descEN Background of footer */ footerBg: string; /** * @desc 表格底部文字颜色 * @descEN Color of footer text */ footerColor: string; /** * @desc 单元格文字大小（默认大尺寸） * @descEN Font size of table cell (large size by default) */ cellFontSize: number; /** * @desc 单元格文字大小（中等尺寸） * @descEN Font size of table cell (middle size) */ cellFontSizeMD: number; /** * @desc 单元格文字大小（小尺寸） * @descEN Font size of table cell (small size) */ cellFontSizeSM: number; /** * @desc 表头分割线颜色 * @descEN Split border color of table header */ headerSplitColor: string; /** * @desc 固定表头排序激活态背景色 * @descEN Background color of fixed table header when sorted */ fixedHeaderSortActiveBg: string; /** * @desc 表头过滤按钮悬浮背景色 * @descEN Background color of table header filter button when hovered */ headerFilterHoverBg: string; /** * @desc 过滤下拉菜单选项背景 * @descEN Background of filter dropdown menu item */ filterDropdownMenuBg: string; /** * @desc 过滤下拉菜单颜色 * @descEN Color of filter dropdown */ filterDropdownBg: string; /** * @desc 展开按钮背景色 * @descEN Background of expand button */ expandIconBg: string; /** * @desc 选择列宽度 * @descEN Width of selection column */ selectionColumnWidth: number | string; /** * @desc Sticky 模式下滚动条背景色 * @descEN Background of sticky scrollbar */ stickyScrollBarBg: string; /** * @desc Sticky 模式下滚动条圆角 * @descEN Border radius of sticky scrollbar */ stickyScrollBarBorderRadius: number; /** @internal */ expandIconMarginTop: number; /** @internal */ expandIconHalfInner: number; /** @internal */ expandIconSize: number; /** @internal */ expandIconScale: number; /** @internal */ headerIconColor: string; /** @internal */ headerIconHoverColor: string; } export interface TableToken extends FullToken<'Table'> { tableFontSize: number; tableBg: string; tableRadius: number; tablePaddingHorizontal: number; tablePaddingVertical: number; tablePaddingHorizontalMiddle: number; tablePaddingVerticalMiddle: number; tablePaddingHorizontalSmall: number; tablePaddingVerticalSmall: number; tableBorderColor: string; tableHeaderTextColor: string; tableHeaderBg: string; tableFooterTextColor: string; tableFooterBg: string; tableHeaderCellSplitColor: string; tableHeaderSortBg: string; tableHeaderSortHoverBg: string; tableBodySortBg: string; tableFixedHeaderSortActiveBg: string; tableHeaderFilterActiveBg: string; tableFilterDropdownBg: string; tableFilterDropdownHeight: number | string; tableRowHoverBg: string; tableSelectedRowBg: string; tableSelectedRowHoverBg: string; tableFontSizeMiddle: number; tableFontSizeSmall: number; tableSelectionColumnWidth: number | string; tableExpandIconBg: string; tableExpandColumnWidth: number | string; tableExpandedRowBg: string; tableFilterDropdownWidth: number; tableFilterDropdownSearchWidth: number; // Z-Index zIndexTableFixed: number; // Virtual Scroll Bar tableScrollThumbSize: number; tableScrollThumbBg: string; tableScrollThumbBgHover: string; tableScrollBg: string; } ``` ## Note According to the [React documentation](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key), 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`. ![console warning](https://os.alipayobjects.com/rmsportal/luLdLvhPOiRpyss.png) 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. ```jsx // primary key is uid return ; // or return
record.uid} />; ``` ## FAQ ### How to hide pagination when single page or no data? {#faq-hide-pagination} You can set `hideOnSinglePage` with `pagination` prop. ### Table will return to first page when filter data. {#faq-filter-to-first-page} 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](https://codesandbox.io/s/yuanchengjiazaishuju-ant-design-demo-7y2uf) as workaround. Also you can use the action from extra param to determine when return to first page. ### Why Table pagination show size changer? {#faq-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? {#faq-state-update-rerender} 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 should I troubleshoot Table performance issues? {#faq-table-performance} React DevTools may add extra overhead when profiling complex tables, especially with many rows or cells. If you notice obvious lag, please try disabling React DevTools or testing in a clean browser environment first. If the performance issue can still be reproduced in a normal runtime, feel free to provide a minimal reproduction so we can continue to investigate. ### How to handle fixed column display over the mask layout? {#faq-fixed-column-zindex} Fixed column use `z-index` to make it over other columns. You will find sometimes 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）? {#faq-custom-checkbox-render} 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). ### Why does components.body.wrapper or components.body.row report an error when virtual is enabled? {#faq-virtual-wrapper-ref} 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. Like this: ```tsx const EditableRow = React.forwardRef( ({ index, ...props }, ref) => { const [form] = Form.useForm(); return (
); }, ); ``` For scenarios with fixed row heights and vertical scrolling, you can use the following method: ```tsx
``` ## Shared native props {#jguang-common-props} > Tips: The following generic properties apply to most antd components; those not supported are described separately. | Property | Description | Type | Default | | --- | --- | --- | --- | | style | The additional style | CSSProperties | - | | className | The additional css class | string | - | | rootClassName | ClassName on the root element | string | - | | autoFocus | Auto focus when component mounted, only effective for focusable elements like forms, links, etc. | boolean | false | ## Install and reproduce an example ```bash npm install antd@6.6.5 @ant-design/icons@6.3.4 dayjs@1.11.23 ``` Use ConfigProvider and native App; configure dayjs locale separately. Each example lists its complete source files and additional pinned dependencies in View code. Example names select demos, not universal component props. See the resource setup guide for theme, locale and SSR. ## Native type references The source viewer includes unchanged native implementations and the following source declarations. Inherited types remain in their native packages. English source comments are preserved as code reference. - `vendor/components/table/Column.ts` - `vendor/components/table/ColumnGroup.ts` - `vendor/components/table/ExpandIcon.tsx` - `vendor/components/table/InternalTable.tsx` - `vendor/components/table/hooks/useFilter/FilterDropdown.tsx` - `vendor/components/table/hooks/useFilter/FilterSearch.tsx` - `vendor/components/table/hooks/useFilter/FilterWrapper.tsx` - `vendor/components/table/hooks/useFilter/index.tsx` - `vendor/components/table/hooks/useLazyKVMap.ts` - `vendor/components/table/hooks/useSelection.tsx` - `vendor/components/table/hooks/useSorter.tsx` - `vendor/components/table/interface.ts` - `vendor/components/table/style/index.ts` ## Source and license https://github.com/ant-design/ant-design/tree/4a39f54842eade4e565ab336ef6097cd7e723cdd Original bilingual prose and executable examples are retained. Website-only embeds and token tables are expanded locally. Ant Design is MIT; separately listed dependency notices also apply. Upload previews block outbound requests and do not provide a backend. --- Index of all JGuang resources: https://jiguang132.com/llms.txt