使用import { Table } from "antd"; |
指定表格的数据源 dataSource 为一个数组。
const dataSource = [{key: '1',name: '胡彦斌',age: 32,address: '西湖区湖底公园1号',},{key: '2',name: '胡彦祖',age: 42,address: '西湖区湖底公园1号',},];const columns = [{title: '姓名',dataIndex: 'name',key: 'name',},{title: '年龄',dataIndex: 'age',key: 'age',},{title: '住址',dataIndex: 'address',key: 'address',},];<Table dataSource={dataSource} columns={columns} />;
antd Table 之上扩展了更多便捷易用的功能，内置搜索、筛选、刷新等常用表格行为，并为多种类型数据展示提供了内置格式化。| 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 |
| 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 | |
| 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 |
| 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 |
| 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 |
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 |
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 |
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 |
| 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 |
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 |
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 |
Name | Gender | |
|---|---|---|
暂无数据 | ||
| 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 |
| 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 |
| 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 |
| 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 | |
| Name | Age | Address | |
|---|---|---|---|
| John Brown sr. | 60 | New York No. 1 Lake Park | |
| Joe Black | 32 | Sydney No. 1 Lake Park |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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. |
| Name (all screens) |
|---|
| John Brown |
| 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 |
| 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 |
通用属性参考：通用属性
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| bordered | 是否展示外边框和列边框 | boolean | false | |
| columns | 表格列的配置描述，具体项见下表 | ColumnsType[] | - | |
| components | 覆盖默认的 table 元素 | TableComponents | - | |
| dataSource | 数据数组 | object[] | - | |
| expandable | 配置展开属性 | expandable | - | |
| footer | 表格尾部 | function(currentPageData) | - | |
| getPopupContainer | 设置表格内各类浮层的渲染节点，如筛选菜单 | (triggerNode) => HTMLElement | () => TableHtmlElement | |
| loading | 页面是否加载中 | boolean | Spin Props | false | |
| locale | 默认文案设置，目前包括排序、过滤、空数据文案 | object | 默认值 | |
| pagination | 分页器，参考配置项或 pagination 文档，设为 false 时不展示和进行分页 | object | false | - | |
| rowClassName | 表格行的类名 | function(record, index): string | - | |
| rowKey | 表格行 key 的取值，可以是字符串或一个函数 | string | function(record): string | key | |
| rowSelection | 表格行是否可选择，配置项 | object | - | |
| rowHoverable | 表格行是否开启 hover 交互 | boolean | true | 5.16.0 |
| scroll | 表格是否可滚动，也可以指定滚动区域的宽、高，配置项 | object | - | |
| showHeader | 是否显示表头 | boolean | true | |
| showSorterTooltip | 表头是否显示下一次排序的 tooltip 提示。当参数类型为对象时，将被设置为 Tooltip 的属性 | boolean | Tooltip props & {target?: 'full-header' | 'sorter-icon' } | { target: 'full-header' } | 5.16.0 |
| size | 表格大小 | large | middle | small | large | |
| sortDirections | 支持的排序方式，取值为 ascend descend | Array | [ascend, descend] | |
| sticky | 设置粘性头部和滚动条 | boolean | {offsetHeader?: number, offsetScroll?: number, getContainer?: () => HTMLElement} | - | 4.6.0 (getContainer: 4.7.0) |
| summary | 总结栏 | (currentData) => ReactNode | - | |
| tableLayout | 表格元素的 table-layout 属性，设为 fixed 表示内容不会影响列的布局 | - | auto | fixed | 无 固定表头/列或使用了 column.ellipsis 时，默认值为 fixed | |
| title | 表格标题 | function(currentPageData) | - | |
| virtual | 支持虚拟列表 | boolean | - | 5.9.0 |
| onChange | 分页、排序、筛选变化时触发 | function(pagination, filters, sorter, extra: { currentDataSource: [], action: paginate | sort | filter }) | - | |
| onHeaderRow | 设置头部行属性 | function(columns, index) | - | |
| onRow | 设置行属性 | function(record, index) | - | |
| onScroll | 表单内容滚动时触发（虚拟滚动下只有垂直滚动会触发事件） | function(event) | - | 5.16.0 |
| 参数 | 说明 | 类型 | 版本 |
|---|---|---|---|
| nativeElement | 最外层 div 元素 | HTMLDivElement | 5.11.0 |
| scrollTo | 滚动到目标位置（设置 key 时为 Record 对应的 rowKey） | (config: { index?: number, key?: React.Key, top?: number }) => void | 5.11.0 |
适用于 onRow onHeaderRow onCell onHeaderCell。
<TableonRow={(record) => {return {onClick: (event) => {}, // 点击行onDoubleClick: (event) => {},onContextMenu: (event) => {},onMouseEnter: (event) => {}, // 鼠标移入行onMouseLeave: (event) => {},};}}onHeaderRow={(columns, index) => {return {onClick: () => {}, // 点击表头行};}}/>
列描述数据对象，是 columns 中的一项，Column 使用相同的 API。
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| align | 设置列的对齐方式 | left | right | center | left | |
| className | 列样式类名 | string | - | |
| colSpan | 表头列合并，设置为 0 时，不渲染 | number | - | |
| dataIndex | 列数据在数据项中对应的路径，支持通过数组查询嵌套路径 | string | string[] | - | |
| defaultFilteredValue | 默认筛选值 | string[] | - | |
| filterResetToDefaultFilteredValue | 点击重置按钮的时候，是否恢复默认筛选值 | boolean | false | |
| defaultSortOrder | 默认排序顺序 | ascend | descend | - | |
| ellipsis | 超过宽度将自动省略，暂不支持和排序筛选一起使用。 设置为 true 或 { showTitle?: boolean } 时，表格布局将变成 tableLayout="fixed"。 | boolean | { showTitle?: boolean } | false | showTitle: 4.3.0 |
| filterDropdown | 可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 | ReactNode | (props: FilterDropdownProps) => ReactNode | - | |
| filtered | 标识数据是否经过过滤，筛选图标会高亮 | boolean | false | |
| filteredValue | 筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组 | string[] | - | |
| filterIcon | 自定义 filter 图标。 | ReactNode | (filtered: boolean) => ReactNode | false | |
| filterOnClose | 是否在筛选菜单关闭时触发筛选 | boolean | true | 5.15.0 |
| filterMultiple | 是否多选 | boolean | true | |
| filterMode | 指定筛选菜单的用户界面 | 'menu' | 'tree' | 'menu' | 4.17.0 |
| filterSearch | 筛选菜单项是否可搜索 | boolean | function(input, record):boolean | false | boolean:4.17.0 function:4.19.0 |
| filters | 表头的筛选菜单项 | object[] | - | |
| filterDropdownProps | 自定义下拉属性，在 <5.22.0 之前可用 filterDropdownOpen 和 onFilterDropdownOpenChange | DropdownProps | - | 5.22.0 |
| fixed | （IE 下无效）列是否固定，可选 true (等效于 left) left right | boolean | string | false | |
| key | React 需要的 key，如果已经设置了唯一的 dataIndex，可以忽略这个属性 | string | - | |
| render | 生成复杂数据的渲染函数，参数分别为当前单元格的值，当前行数据，行索引 | function(value, record, index) {} | - | |
| responsive | 响应式 breakpoint 配置列表。未设置则始终可见。 | Breakpoint[] | - | 4.2.0 |
| rowScope | 设置列范围 | row | rowgroup | - | 5.1.0 |
| shouldCellUpdate | 自定义单元格渲染时机 | (record, prevRecord) => boolean | - | 4.3.0 |
| showSorterTooltip | 表头显示下一次排序的 tooltip 提示, 覆盖 table 中 showSorterTooltip | boolean | Tooltip props & {target?: 'full-header' | 'sorter-icon' } | { target: 'full-header' } | 5.16.0 |
| sortDirections | 支持的排序方式，覆盖 Table 中 sortDirections， 取值为 ascend descend | Array | [ascend, descend] | |
| sorter | 排序函数，本地排序使用一个函数(参考 Array.sort 的 compareFunction)。需要服务端排序可设为 true（单列排序） 或 { multiple: number }（多列排序） | function | boolean | { compare: function, multiple: number } | - | |
| sortOrder | 排序的受控属性，外界可用此控制列的排序，可设置为 ascend descend null | ascend | descend | null | - | |
| sortIcon | 自定义 sort 图标 | (props: { sortOrder }) => ReactNode | - | 5.6.0 |
| title | 列头显示文字（函数用法 3.10.0 后支持） | ReactNode | ({ sortOrder, sortColumn, filters }) => ReactNode | - | |
| width | 列宽度（指定了也不生效？） | string | number | - | |
| minWidth | 最小列宽度，只在 tableLayout="auto" 时有效 | number | - | 5.21.0 |
| hidden | 隐藏列 | boolean | false | 5.13.0 |
| onCell | 设置单元格属性 | function(record, rowIndex) | - | |
| onFilter | 本地模式下，确定筛选的运行函数 | function | - | |
| onHeaderCell | 设置头部单元格属性 | function(column) | - |
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 列头显示文字 | ReactNode | - |
分页的配置项。
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| position | 指定分页显示的位置， 取值为topLeft | topCenter | topRight |bottomLeft | bottomCenter | bottomRight | Array | [bottomRight] |
更多配置项，请查看 Pagination。
展开功能的配置。
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| childrenColumnName | 指定树形结构的列名 | string | children | |
| columnTitle | 自定义展开列表头 | ReactNode | - | 4.23.0 |
| columnWidth | 自定义展开列宽度 | string | number | - | |
| defaultExpandAllRows | 初始时，是否展开所有行 | boolean | false | |
| defaultExpandedRowKeys | 默认展开的行 | string[] | - | |
| expandedRowClassName | 展开行的 className | string | (record, index, indent) => string | - | string: 5.22.0 |
| expandedRowKeys | 展开的行，控制属性 | string[] | - | |
| expandedRowRender | 额外的展开行 | function(record, index, indent, expanded): ReactNode | - | |
| expandIcon | 自定义展开图标，参考示例 | function(props): ReactNode | - | |
| expandRowByClick | 通过点击行来展开子行 | boolean | false | |
| fixed | 控制展开图标是否固定，可选 true 'left' 'right' | boolean | string | false | 4.16.0 |
| indentSize | 展示树形数据时，每层缩进的宽度，以 px 为单位 | number | 15 | |
| rowExpandable | 设置是否允许行展开（dataSource 若存在 children 字段将不生效） | (record) => boolean | - | |
| showExpandColumn | 是否显示展开图标列 | boolean | true | 4.18.0 |
| onExpand | 点击展开图标时触发 | function(expanded, record) | - | |
| onExpandedRowsChange | 展开的行变化时触发 | function(expandedRows) | - | |
| expandedRowOffset | 展开行的偏移列数，设置会后强制将其前面的列设置为固定列 | number | - | 5.26.0 |
选择功能的配置。
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| align | 设置选择列的对齐方式 | left | right | center | left | 5.25.0 |
| checkStrictly | checkable 状态下节点选择完全受控（父子数据选中状态不再关联） | boolean | true | 4.4.0 |
| columnTitle | 自定义列表选择框标题 | ReactNode | (originalNode: ReactNode) => ReactNode | - | |
| columnWidth | 自定义列表选择框宽度 | string | number | 32px | |
| fixed | 把选择框列固定在左边 | boolean | - | |
| getCheckboxProps | 选择框的默认属性配置 | function(record) | - | |
| hideSelectAll | 隐藏全选勾选框与自定义选择项 | boolean | false | 4.3.0 |
| preserveSelectedRowKeys | 当数据被删除时仍然保留选项的 key | boolean | - | 4.4.0 |
| renderCell | 渲染勾选框，用法与 Column 的 render 相同 | function(checked, record, index, originNode) {} | - | 4.1.0 |
| selectedRowKeys | 指定选中项的 key 数组，需要和 onChange 进行配合 | string[] | number[] | [] | |
| defaultSelectedRowKeys | 默认选中项的 key 数组 | string[] | number[] | [] | |
| selections | 自定义选择项 配置项, 设为 true 时使用默认选择项 | object[] | boolean | true | |
| type | 多选/单选 | checkbox | radio | checkbox | |
| onCell | 设置单元格属性，用法与 Column 的 onCell 相同 | function(record, rowIndex) | - | 5.5.0 |
| onChange | 选中项发生变化时的回调 | function(selectedRowKeys, selectedRows, info: { type }) | - | info.type: 4.21.0 |
| onSelect | 用户手动选择/取消选择某行的回调 | function(record, selected, selectedRows, nativeEvent) | - | |
| onSelectAll | 用户手动选择/取消选择所有行的回调 | function(selected, selectedRows, changeRows) | - | |
| onSelectInvert | 用户手动选择反选的回调 | function(selectedRowKeys) | - | |
| onSelectNone | 用户清空选择的回调 | function() | - | |
| onSelectMultiple | 用户使用键盘 shift 选择多行的回调 | function(selected, selectedRows, changeRows) | - |
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| scrollToFirstRowOnChange | 当分页、排序、筛选变化后是否滚动到表格顶部 | boolean | - |
| x | 设置横向滚动，也可用于指定滚动区域的宽，可以设置为像素值，百分比，true 和 'max-content' | string | number | true | - |
| y | 设置纵向滚动，也可用于指定滚动区域的高，可以设置为像素值 | string | number | - |
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| key | React 需要的 key，建议设置 | string | - |
| text | 选择项显示的文字 | ReactNode | - |
| onSelect | 选择项点击回调 | function(changeableRowKeys) | - |
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 风格的 API */}<Table<User> dataSource={data}><Table.Column<User> key="name" title="Name" dataIndex="name" /></Table></>);export default Demo;
TypeScript 里使用 Table 的 CodeSandbox 实例。
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| bodySortBg | 表格排序列背景色 | string | #fafafa |
| borderColor | 表格边框/分割线颜色 | string | #f0f0f0 |
| cellFontSize | 单元格文字大小（默认大尺寸） | number | 14 |
| cellFontSizeMD | 单元格文字大小（中等尺寸） | number | 14 |
| cellFontSizeSM | 单元格文字大小（小尺寸） | number | 14 |
| cellPaddingBlock | 单元格纵向内间距 | number | 16 |
| cellPaddingBlockMD | 单元格纵向内间距（中等尺寸） | number | 12 |
| cellPaddingBlockSM | 单元格纵向内间距（小尺寸） | number | 8 |
| cellPaddingInline | 单元格横向内间距（默认大尺寸） | number | 16 |
| cellPaddingInlineMD | 单元格横向内间距（中等尺寸） | number | 8 |
| cellPaddingInlineSM | 单元格横向内间距（小尺寸） | number | 8 |
| expandIconBg | 展开按钮背景色 | string | #ffffff |
| filterDropdownBg | 过滤下拉菜单颜色 | string | #ffffff |
| filterDropdownMenuBg | 过滤下拉菜单选项背景 | string | #ffffff |
| fixedHeaderSortActiveBg | 固定表头排序激活态背景色 | string | #f0f0f0 |
| footerBg | 表格底部背景色 | string | #fafafa |
| footerColor | 表格底部文字颜色 | string | rgba(0,0,0,0.88) |
| headerBg | 表头背景 | string | #fafafa |
| headerBorderRadius | 表头圆角 | number | 8 |
| headerColor | 表头文字颜色 | string | rgba(0,0,0,0.88) |
| headerFilterHoverBg | 表头过滤按钮悬浮背景色 | string | rgba(0,0,0,0.06) |
| headerSortActiveBg | 表头排序激活态背景色 | string | #f0f0f0 |
| headerSortHoverBg | 表头排序激活态悬浮背景色 | string | #f0f0f0 |
| headerSplitColor | 表头分割线颜色 | string | #f0f0f0 |
| rowExpandedBg | 表格行展开背景色 | string | rgba(0,0,0,0.02) |
| rowHoverBg | 表格行悬浮背景色 | string | #fafafa |
| rowSelectedBg | 表格行选中背景色 | string | #e6f4ff |
| rowSelectedHoverBg | 表格行选中悬浮背景色 | string | #bae0ff |
| selectionColumnWidth | 选择列宽度 | string | number | 32 |
| stickyScrollBarBg | Sticky 模式下滚动条背景色 | string | rgba(0,0,0,0.25) |
| stickyScrollBarBorderRadius | Sticky 模式下滚动条圆角 | number | 100 |
按照 React 的规范，所有的列表必须绑定 key。在 Table 中，dataSource 和 columns 里的数据值都需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。
如果 dataSource[i].key 没有提供，你应该使用 rowKey 来指定 dataSource 的主键，如下所示。若没有指定，控制台会出现以上的提示，表格组件也会出现各类奇怪的错误。
// 比如你的数据主键是 uidreturn <Table rowKey="uid" />;// 或return <Table rowKey={(record) => record.uid} />;
你可以设置 pagination 的 hideOnSinglePage 属性为 true。
前端过滤时通常条目总数会减少，从而导致总页数小于筛选前的当前页数，为了防止当前页面没有数据，我们默认会返回第一页。
如果你在使用远程分页，很可能需要保持当前页面，你可以参照这个 受控例子 控制当前页面不变。
自 4.1.0 起，Pagination 在 total 大于 50 条时会默认显示 size 切换器以提升用户交互体验。如果你不需要该功能，可以通过设置 showSizeChanger 为 false 来关闭。
由于 columns 支持 render 方法，因而 Table 无法知道哪些单元会受到影响。你可以通过 column.shouldCellUpdate 来控制单元格的渲染。
固定列通过 z-index 属性将其悬浮于非固定列之上，这使得有时候你会发现在 Table 上放置遮罩层时固定列会被透过的情况。为遮罩层设置更高的 z-index 覆盖住固定列即可。
自 4.1.0 起，可以通过 rowSelection 的 renderCell 属性控制，可以参考此处 Demo 实现展示 Tooltip 需求或其他自定义的需求。
因为虚拟表格需要获取其 ref 做一些计算，所以你需要使用 React.forwardRef 包裹并传递 ref 到 dom。