表格 Table - Ant Design

Name	Age	Address	Tags	Action
John Brown	32	New York No. 1 Lake Park	NICEDEVELOPER	Invite John Brown Delete
Jim Green	42	London No. 1 Lake Park	LOSER	Invite Jim Green Delete
Joe Black	32	Sydney No. 1 Lake Park	COOLTEACHER	Invite Joe Black Delete

1

基本用法

简单的表格，最后一列是各种操作。

Name		Age	Address	Tags	Action
First Name	Last Name	Age	Address	Tags	Action
John	Brown	32	New York No. 1 Lake Park	NICEDEVELOPER	Invite Brown Delete
Jim	Green	42	London No. 1 Lake Park	LOSER	Invite Green Delete
Joe	Black	32	Sydney No. 1 Lake Park	COOLTEACHER	Invite Black Delete

1

JSX 风格的 API

使用 JSX 风格的 API（2.5.0 以后引入）

这个只是一个描述 columns 的语法糖，所以你不能用其他组件去包裹 Column 和 ColumnGroup。

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

可选择

第一列是联动的选择框。可以通过 rowSelection.type 属性指定选择类型，默认为 checkbox。

默认点击 checkbox 触发选择行为，需要点击行触发可以参考例子：https://codesandbox.io/s/000vqw38rl

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

1
2
3
4
5

选择和操作

选择后进行操作，完成后清空选择，通过 rowSelection.selectedRowKeys 来控制选中项。

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

1
2
3
4
5

自定义选择项

通过 rowSelection.selections 自定义选择项，默认不显示下拉选项，设为 true 时显示默认选择项。

Name	Age	Address
Edward King 0	32	London, Park Lane no. 01
Edward King 1	32	London, Park Lane no. 11
Edward King 2	32	London, Park Lane no. 21
Edward King 3	32	London, Park Lane no. 31
Edward King 4	32	London, Park Lane no. 41
Edward King 5	32	London, Park Lane no. 51
Edward King 6	32	London, Park Lane no. 61
Edward King 7	32	London, Park Lane no. 71
Edward King 8	32	London, Park Lane no. 81
Edward King 9	32	London, Park Lane no. 91
Edward King 10	32	London, Park Lane no. 101
Edward King 11	32	London, Park Lane no. 111
Edward King 12	32	London, Park Lane no. 121
Edward King 13	32	London, Park Lane no. 131
Edward King 14	32	London, Park Lane no. 141
Edward King 15	32	London, Park Lane no. 151
Edward King 16	32	London, Park Lane no. 161
Edward King 17	32	London, Park Lane no. 171
Edward King 18	32	London, Park Lane no. 181
Edward King 19	32	London, Park Lane no. 191
Edward King 20	32	London, Park Lane no. 201
Edward King 21	32	London, Park Lane no. 211
Edward King 22	32	London, Park Lane no. 221
Edward King 23	32	London, Park Lane no. 231
Edward King 24	32	London, Park Lane no. 241
Edward King 25	32	London, Park Lane no. 251
Edward King 26	32	London, Park Lane no. 261
Edward King 27	32	London, Park Lane no. 271
Edward King 28	32	London, Park Lane no. 281
Edward King 29	32	London, Park Lane no. 291
Edward King 30	32	London, Park Lane no. 301
Edward King 31	32	London, Park Lane no. 311
Edward King 32	32	London, Park Lane no. 321
Edward King 33	32	London, Park Lane no. 331
Edward King 34	32	London, Park Lane no. 341
Edward King 35	32	London, Park Lane no. 351
Edward King 36	32	London, Park Lane no. 361
Edward King 37	32	London, Park Lane no. 371
Edward King 38	32	London, Park Lane no. 381
Edward King 39	32	London, Park Lane no. 391
Edward King 40	32	London, Park Lane no. 401
Edward King 41	32	London, Park Lane no. 411
Edward King 42	32	London, Park Lane no. 421
Edward King 43	32	London, Park Lane no. 431
Edward King 44	32	London, Park Lane no. 441
Edward King 45	32	London, Park Lane no. 451
Edward King 46	32	London, Park Lane no. 461
Edward King 47	32	London, Park Lane no. 471
Edward King 48	32	London, Park Lane no. 481
Edward King 49	32	London, Park Lane no. 491

选择性能

高损耗 render 性能调试。

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

1

筛选和排序

对某一列数据进行筛选，使用列的 filters 属性来指定需要筛选菜单的列，onFilter 用于筛选当前数据，filterMultiple 用于指定多选和单选，filterOnClose 用于指定是否在筛选菜单关闭时触发筛选。

使用 defaultFilteredValue 属性，设置列的默认筛选项。

对某一列数据进行排序，通过指定列的 sorter 函数即可启动排序按钮。sorter: function(rowA, rowB) { ... }， rowA、rowB 为比较的两个行数据。

sortDirections: ['ascend', 'descend'] 改变每列可用的排序方式，切换排序时按数组内容依次切换，设置在 table props 上时对所有列生效。你可以通过设置 ['ascend', 'descend', 'ascend'] 禁止排序恢复到默认状态。

使用 defaultSortOrder 属性，设置列的默认排序顺序。

如果 sortOrder 或者 defaultSortOrder 的值为 ascend 或者 descend，则可以通过 sorter 的函数第三个参数获取当前排序的状态。该函数可以是 function(a, b, sortOrder) { ... } 的形式。

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

1

树型筛选菜单

可以使用 filterMode 来修改筛选菜单的 UI，可选值有 menu（默认）和 tree。

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

1

自定义筛选的搜索

filterSearch 用于开启筛选项的搜索，通过 filterSearch:(input, record) => boolean 设置自定义筛选方法

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

1

多列排序

column.sorter 支持 multiple 字段以配置多列排序优先级。通过 sorter.compare 配置排序逻辑，你可以通过不设置该函数只启动多列排序的交互形式。

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

1

可控的筛选和排序

使用受控属性对筛选和排序状态进行控制。

columns 中定义了 filteredValue 和 sortOrder 属性即视为受控模式。

只支持同时对一列进行排序，请保证只有一列的 sortOrder 属性是生效的。

务必指定 column.key。

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

1

自定义筛选菜单

通过 filterDropdown 自定义的列筛选功能，并实现一个搜索列的示例。

给函数 clearFilters 添加 boolean 类型参数 closeDropdown，是否关闭筛选菜单，默认为 true。添加 boolean 类型参数 confirm，清除筛选时是否提交已选项，默认 true。

Name	Gender	Email
暂无数据

远程加载数据

这个例子通过简单的 ajax 读取方式，演示了如何从服务端读取并展现数据，具有筛选、排序等功能以及页面 loading 效果。开发者可以自行接入其他数据处理方式。

另外，本例也展示了筛选排序功能如何交给服务端实现，列不需要指定具体的 onFilter 和 sorter 函数，而是在把筛选和排序的参数发到服务端来处理。

当使用 rowSelection 时，请设置 rowSelection.preserveSelectedRowKeys 属性以保留 key。

注意，此示例使用模拟接口，展示数据可能不准确，请打开网络面板查看请求。

🛎️ 想要 3 分钟实现？试试 ProTable！

Middle size table

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

1

Small size table

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

1

紧凑型

两种紧凑型的列表，小型列表只用于对话框内。

Name	Age	Address
Sample Name	30	Sample Address 120
Sample Name	31	Sample Address 121
Sample Name	32	Sample Address 122
Sample Name	33	Sample Address 123
Sample Name	34	Sample Address 124
Sample Name	30	Sample Address 125
Sample Name	31	Sample Address 126
Sample Name	32	Sample Address 127
Sample Name	33	Sample Address 128
Sample Name	34	Sample Address 129

1
•••
11
12
13
14
15
•••
20
10 条/页

紧凑型

两种紧凑型的列表，小型列表只用于对话框内。

Header

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

1

带边框

添加表格边框线，页头和页脚。

Name	Age	Address	Action
John Brown	32	New York No. 1 Lake Park	Delete
Jim Green	42	London No. 1 Lake Park	Delete
Not Expandable	29	Jiangsu No. 1 Lake Park	Delete
Joe Black	32	Sydney No. 1 Lake Park	Delete

1

可展开

当表格内容较多不能一次性完全展示时。

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

1

特殊列排序

你可以通过 Table.EXPAND_COLUMN 和 Table.SELECTION_COLUMN 来控制选择和展开列的顺序。

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	0575-22098909	18900010002	Dublin No. 2 Lake Park

1

表格行/列合并

表头只支持列合并，使用 column 里的 colSpan 进行设置。

表格支持行/列合并，当 onCell 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。

CheckStrictly:

	Name	Age	Address
	John Brown sr.	60	New York No. 1 Lake Park
	Joe Black	32	Sydney No. 1 Lake Park

1

树形数据展示

表格支持树形数据的展示，当数据中有 children 字段时会自动展示为树形表格，如果不需要或配置为其他字段可以用 childrenColumnName 进行配置。

可以通过设置 indentSize 以控制每一层的缩进宽度。

Fixed first column:

Name	Age	Address
John Brown sr. John Brown sr. John Brown sr. John Brown sr. John Brown sr. John Brown sr.	60	New York No. 1 Lake Park
John Brown sr. John Brown sr. John Brown sr. John Brown sr. John Brown sr. John Brown sr.	42	New York No. 2 Lake Park
John Brown sr. John Brown sr. John Brown sr. John Brown sr. John Brown sr. John Brown sr.	30	New York No. 3 Lake Park
John Brown sr. John Brown sr. John Brown sr. John Brown sr. John Brown sr. John Brown sr.	16	New York No. 3 Lake Park
Jim Green sr. Jim Green sr. Jim Green sr. Jim Green sr.	72	London No. 1 Lake Park
Jim Green. Jim Green. Jim Green. Jim Green. Jim Green. Jim Green.	42	London No. 2 Lake Park
Jim Green jr. Jim Green jr. Jim Green jr. Jim Green jr.	25	London No. 3 Lake Park
Jimmy Green sr. Jimmy Green sr. Jimmy Green sr.	18	London No. 4 Lake Park
Joe Black	32	Sydney No. 1 Lake Park

1

树形数据省略情况测试

https://github.com/ant-design/ant-design/issues/36583

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
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

1
2
50 条/页

固定表头

方便一页内展示大量数据。

需要指定 column 的 width 属性，否则列头和内容可能不对齐。如果指定 width 不生效或出现白色垂直空隙，请尝试建议留一列不设宽度以适应弹性布局，或者检查是否有超长连续字段破坏布局。

Full Name	Age	Column 1	Column 2	Column 3	Column 4	Column 5	Column 6	Column 7	Column 8	Column 9	Column 10	Column 11	Column 12	Column 13	Column 14	Column 15	Column 16	Column 17	Column 18	Column 19	Column 20	Action

Olivia	32	New York Park	New York Park	New York Park	New York Park	New York Park	New York Park	New York Park	New York Park	New York Park	New York Park	New York Park	New York Park	New York Park	New York Park	New York Park	New York Park	New York Park	New York Park	New York Park	New York Park	action
Ethan	40	London Park	London Park	London Park	London Park	London Park	London Park	London Park	London Park	London Park	London Park	London Park	London Park	London Park	London Park	London Park	London Park	London Park	London Park	London Park	London Park	action

固定列

对于列数很多的数据，可以固定前后的列，横向滚动查看其它数据，需要和 scroll.x 配合使用。

若列头与内容不对齐或出现列重复，请指定固定列的宽度 width。如果指定 width 不生效或出现白色垂直空隙，请尝试建议留一列不设宽度以适应弹性布局，或者检查是否有超长连续字段破坏布局。

建议指定 scroll.x 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 scroll.x。

注意：v4 版本固定列通过 sticky 实现，IE 11 会降级成横向滚动。

Ant Design

Table
表格

何时使用

如何使用

相关推荐

代码演示

Table表格

何时使用

如何使用

相关推荐

代码演示

Table
表格