| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| tableLayout | [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` | 1.5.0 |
| bordered | Whether to show all table borders | boolean | `false` | |
| childrenColumnName | The column contains children to display | string\[] | children | |
| 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 | | |
| scroll | Set horizontal or vertical scrolling, can also be used to specify the width and height of the scroll area. It is recommended to set a number for `x`, if you want to set it to `true`, you need to add style `.ant-table td { white-space: nowrap; }`. | { x: number \| true, y: number } | - | |
| showHeader | Whether to show table header | boolean | `true` | |
| title | Table title renderer | Function(currentPageData)\|slot-scope | | |
| customHeaderRow | Set props on per header row | Function(column, index) | - | |
| customRow | Set props on per row | Function(record, index) | - | |
| getPopupContainer | the render container of dropdowns in table | (triggerNode) => HTMLElement | `() => TableHtmlElement` | 1.5.0 |
| transformCellText | Data can be changed again before rendering. The default configuration of general user empty data. You can configured globally through [ConfigProvider](/components/config-provider-cn/) | Function({ text, column, record, index }) => any | - | 1.5.4 ｜ |
### Events
| Events Name | Description | Arguments |
| --- | --- | --- |
| change | Callback executed when pagination, filters or sorter is changed | Function(pagination, filters, sorter, { currentDataSource }) | |
| expand | Callback executed when the row expand icon is clicked | Function(expanded, record) | |
Same as `customRow``customHeaderRow``customCell``customHeaderCell`. Follow [Vue jsx](https://github.com/vuejs/babel-plugin-transform-vue-jsx) syntax。
```jsx
<Table
customRow={(record) => {
return {
props: {
xxx...
},
on: {
click: (event) => {}, // click row
dblclick: (event) => {}, // double click row
contextmenu: (event) => {} // right button click row
mouseenter: (event) => {} // mouse enter row
mouseleave: (event) => {} // mouse leave row
},
};
)}
customHeaderRow={(column) => {
return {
on: {
click: () => {}, // 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 | specify how content is aligned | 'left' \| 'right' \| 'center' | 'left' | |
| ellipsis | ellipsize cell content, not working with sorter and filters for now.<br/>tableLayout would be `fixed` when `ellipsis` is true. | boolean | false | 1.5.0 |
| colSpan | Span of this column's title | number | | |
| dataIndex | Display field of the data record, could be set like `a.b.c` | string | - | |
| filterDropdownVisible | Whether `filterDropdown` is visible. Can be used with `.sync` in template, see `update:filterDropdownVisible` | boolean | - | |
| key | Unique key of this column, you can ignore this prop if you're not using [template style api](#components-table-demo-template-style-api) and you've set a unique `dataIndex` | string | - | |
| customRender | Renderer of the table cell. The return value should be a VNode, or an object for colSpan/rowSpan config | Function(text, record, index) {}\|slot-scope | - | |
| 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 you need sort buttons only, set to `true` | Function\|boolean | - | |
| sortOrder | Order of sorted values: `'ascend'``'descend'``false` | boolean\|string | - | |
| sortDirections | supported sort way, could be `'ascend'`, `'descend'` | Array | `['ascend', 'descend']` | 1.5.0 |
| title | Title of this column | string\|slot | - | |
| width | Width of this column | string\|number | - | |
| customCell | Set props on per cell | Function(record, rowIndex) | - | |
| customHeaderCell | Set props on per header cell | Function(column) | - | |
| onFilter | Callback executed when the confirm filter button is clicked, Use as a `filter` event when using template or jsx | Function | - | |
| onFilterDropdownVisibleChange <br>@filterDropdownVisibleChange<br>@update:filterDropdownVisible | Callback executed when `filterDropdownVisible` is changed, Use as a `filterDropdownVisibleChange` or `update:filterDropdownVisible` event when using template or jsx | function(visible) {} | - | |
| slots | When using columns, you can use this property to configure the properties that support the slot, such as `slots: { filterIcon: 'XXX'}` | object | - | |
| scopedSlots | When using columns, you can use this property to configure the properties that support the slot-scope, such as `scopedSlots: { customRender: 'XXX'}` | object | - | |
### ColumnGroup
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| title | Title of the column group | string\|slot | - |
| slots | When using columns, you can use this property to configure the properties that support the slot, such as `slots: { title: 'XXX'}` | object | - |
| 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(selectedRows) | - |
### scroll
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| x | Set horizontal scrolling, can also be used to specify the width and height of the scroll area, could be number, percent value, true and ['max-content'](https://developer.mozilla.org/zh-CN/docs/Web/CSS/width#max-content) | number \| true | - | |
| y | Set vertical scrolling, can also be used to specify the width and height of the scroll area, could be number, percent value, true and ['max-content'](https://developer.mozilla.org/zh-CN/docs/Web/CSS/width#max-content) | number \| true | - | |
| scrollToFirstRowOnChange | Whether to scroll to the top of the table when paging, sorting, filtering changes | boolean | - | 1.5.0 |
### selection
Custom selection config
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| key | Unique key of this selection | string | - |
| text | Display text of this selection | string\|VNode | - |
| onSelect | Callback executed when this selection is clicked | Function(changeableRowKeys) | - |
## Note
The values inside `dataSource` and `columns` should follow this in Table, and `dataSource[i].key` would be treated as key value default for `dataSource`.
If `dataSource[i].key` is not provided, then you should specify the primary key of dataSource value via `rowKey`. If not, warnings will show in browser console.
