mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-24 15:46:10 +08:00
6d903a6ba5
* add custom selection in Table * update snapshots * update snapshots again * optimize selection in Table * update test * update snapshots * improve test * fix test
181 lines
7.5 KiB
Markdown
181 lines
7.5 KiB
Markdown
---
|
|
category: Components
|
|
cols: 1
|
|
type: Data Display
|
|
title: Table
|
|
---
|
|
|
|
A table displays rows data.
|
|
|
|
## When To Use
|
|
|
|
- To display a collection of structured data.
|
|
- To sort, search, paginate, filter data.
|
|
|
|
## How To Use
|
|
|
|
Specify `dataSource` of Table whose value is 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',
|
|
}];
|
|
|
|
<Table dataSource={dataSource} columns={columns} />
|
|
```
|
|
|
|
## API
|
|
|
|
### Table
|
|
|
|
| Property | Description | Type | Default |
|
|
|---------------|--------------------------|-----------------|--------------|
|
|
| rowSelection | row selection [config](#rowSelection) | object | null |
|
|
| pagination | pagination [config](/components/pagination/), hide it via setting to `false` | object | |
|
|
| size | size of table: `default`, `middle` or `small` | string | `default` |
|
|
| dataSource | data record array to be rendered | any[] | |
|
|
| columns | columns of table | [ColumnProps](https://git.io/vMMXC)[] | - |
|
|
| rowKey | get row's key, could be a string or function | string\|Function(record):string | 'key' |
|
|
| rowClassName | get row's className | Function(record, index):string | - |
|
|
| expandedRowRender | expanded container render for each row | Function | - |
|
|
| defaultExpandedRowKeys | initial expanded row keys | string[] | - |
|
|
| expandedRowKeys | current expanded rows keys | string[] | - |
|
|
| defaultExpandAllRows | expand all rows initially | boolean | false |
|
|
| onExpandedRowsChange | function to call when the expanded rows change | Function(expandedRows) | |
|
|
| onExpand | function to call when click expand icon | Function(expanded, record) | |
|
|
| onChange | callback that is called when pagination, filters, sorter is changed | Function(pagination, filters, sorter) | |
|
|
| loading | loading status of table | boolean | false |
|
|
| locale | i18n text include filter, sort, empty text...etc | object | filterConfirm: 'Ok' <br> filterReset: 'Reset' <br> emptyText: 'No Data' <br> [Default](https://github.com/ant-design/ant-design/issues/575#issuecomment-159169511) |
|
|
| indentSize | index pixel size of tree data | number | 15 |
|
|
| onRowClick | callback that is called when click a row | Function(record, index) | - |
|
|
| bordered | whether to show table border completely | boolean | false |
|
|
| showHeader | whether to show table header | boolean | true |
|
|
| footer | table footer renderer | Function(currentPageData) | |
|
|
| title | table title renderer | Function(currentPageData) | |
|
|
| scroll | whether table can be scroll in x/y direction, `x` or `y` can be a number that indicated the width and height of table body | object | - |
|
|
|
|
### Column
|
|
|
|
One of Property `columns` for descriping column, Column has the same API.
|
|
|
|
| Property | Description | Type | Default |
|
|
|---------------|--------------------------|-----------------|--------------|
|
|
| title | title of this column | string\|ReactNode | - |
|
|
| key | key of this column | string | - |
|
|
| dataIndex | display field of the data record, could be set like `a.b.c` | string | - |
|
|
| render | renderer of table cell, has three params: text, record and index of this row. The render value should be a ReactNode, or a object for [colSpan/rowSpan config](#demo-colspan-rowspan) | Function(text, record, index) {} | - |
|
|
| filters | filter menu config | object[] | - |
|
|
| onFilter | callback that is called when when click confirm filter button | Function | - |
|
|
| filterMultiple | whether to select multiple filtered item | boolean | true |
|
|
| filterDropdown | customized filter overlay | ReactNode | - |
|
|
| filterDropdownVisible | whether filterDropdown is visible | boolean | - |
|
|
| onFilterDropdownVisibleChange | called when filterDropdownVisible is changed | function(visible) {} | - |
|
|
| filteredValue | controlled filtered value | string[] | - |
|
|
| sorter | sort function for local sort. If you need sort buttons only, set it `true` | Function\|boolean | - |
|
|
| colSpan | span of this column's title | number | |
|
|
| width | width of this column | string\|number | - |
|
|
| className | className of this column | string | - |
|
|
| fixed | set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean\|string | false |
|
|
| sortOrder | controlled sorted value: `'ascend'` `'descend'` `false` | boolean\|string | - |
|
|
| onCellClick | callback when click cell | Function(record, event) | - |
|
|
|
|
### ColumnGroup
|
|
|
|
| Property | Description | Type | Default |
|
|
|---------------|--------------------------|-----------------|--------------|
|
|
| title | title of the column group | string\|ReactNode | - |
|
|
|
|
### rowSelection
|
|
|
|
Properties for selection.
|
|
|
|
| Property | Description | Type | Default |
|
|
|---------------|--------------------------|-----------------|--------------|
|
|
| type | `checkbox` or `radio` | string | `checkbox` |
|
|
| selectedRowKeys | controlled selected row keys | string[] | [] |
|
|
| onChange | callback that is called when selected rows change | Function(selectedRowKeys, selectedRows) | - |
|
|
| getCheckboxProps | get Checkbox or Radio props | Function(record) | - |
|
|
| onSelect | callback that is called when select/deselect one row | Function(record, selected, selectedRows) | - |
|
|
| onSelectAll | callback that is called when select/deselect all | Function(selected, selectedRows, changeRows) | - |
|
|
| onSelectInvert | callback that is called when select invert | Function(selectedRows) | - |
|
|
| selections | custom selection, [config](#rowSelection) | object[] | - |
|
|
|
|
### selection
|
|
|
|
| Property | Description | Type | Default |
|
|
|---------------|--------------------------|-----------------|--------------|
|
|
| key | key of this selection | string | - |
|
|
| text | display text is this selection | string\|React.ReactNode | - |
|
|
| onSelect | callback when click this selection | Function(changeableRowKeys) | - |
|
|
|
|
## Using in TypeScript
|
|
|
|
```jsx
|
|
import { Table } from 'antd';
|
|
import { TableColumnConfig } from 'antd/lib/table/Table';
|
|
|
|
interface IUser {
|
|
key: number,
|
|
name: string;
|
|
}
|
|
|
|
const columns: TableColumnConfig<IUser>[] = [{
|
|
key: 'name',
|
|
title: 'Name',
|
|
dataIndex: 'name',
|
|
}];
|
|
|
|
const data: IUser[] = [{
|
|
key: 0,
|
|
name: 'Jack',
|
|
}];
|
|
|
|
class UserTable extends Table<IUser> {}
|
|
|
|
<UserTable columns={columns} dataSource={data} />
|
|
|
|
// Use JSX style API
|
|
class NameColumn extends Table.Column<IUser> {}
|
|
|
|
<UserTable dataSource={data}>
|
|
<NameColumn key="name" title="Name" dataIndex="name" />
|
|
</UserTable>
|
|
```
|
|
|
|
## Note
|
|
|
|
According to [React documentation](https://facebook.github.io/react/docs/lists-and-keys.html#keys), every child in array should be assigned a unique key. The value inside `dataSource` and `columns` should follow this in Table, and `dataSource[i].key` would be treated as key value defaultly for `dataSource`.
|
|
|
|
If `dataSource[i].key` is not existed, then you should specify the primary key of dataSource value via `rowKey`. If not, warnings like above will show in browser console.
|
|
|
|
|
|
|
|
```jsx
|
|
// primary key is uid
|
|
return <Table rowKey="uid" />;
|
|
// or
|
|
return <Table rowKey={record => record.uid} />;
|
|
```
|