表格 Table - Namu Design

展示行列数据。

何时使用

当有大量结构化的数据需要展现时；
当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。

如何使用

指定表格的数据源 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} />;

代码演示

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
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 用于指定多选和单选。

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

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

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

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

紧凑型

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

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.SELECT_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 进行设置。

表格支持行/列合并，使用 render 里的单元格属性 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 以控制每一层的缩进宽度。

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	Action

John Brown	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	action
Jim Green	40	London Park	London Park	London Park	London Park	London Park	London Park	London Park	London Park	action

1

固定列

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

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

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

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

Full Name	Age	Column 1	Column 2	Column 3	Column 4	Column 5	Column 6	Column 7	Column 8	Action


Edward 0	32	London Park no. 0	London Park no. 0	London Park no. 0	London Park no. 0	London Park no. 0	London Park no. 0	London Park no. 0	London Park no. 0	action
Edward 1	32	London Park no. 1	London Park no. 1	London Park no. 1	London Park no. 1	London Park no. 1	London Park no. 1	London Park no. 1	London Park no. 1	action
Edward 2	32	London Park no. 2	London Park no. 2	London Park no. 2	London Park no. 2	London Park no. 2	London Park no. 2	London Park no. 2	London Park no. 2	action
Edward 3	32	London Park no. 3	London Park no. 3	London Park no. 3	London Park no. 3	London Park no. 3	London Park no. 3	London Park no. 3	London Park no. 3	action
Edward 4	32	London Park no. 4	London Park no. 4	London Park no. 4	London Park no. 4	London Park no. 4	London Park no. 4	London Park no. 4	London Park no. 4	action
Edward 5	32	London Park no. 5	London Park no. 5	London Park no. 5	London Park no. 5	London Park no. 5	London Park no. 5	London Park no. 5	London Park no. 5	action
Edward 6	32	London Park no. 6	London Park no. 6	London Park no. 6	London Park no. 6	London Park no. 6	London Park no. 6	London Park no. 6	London Park no. 6	action
Edward 7	32	London Park no. 7	London Park no. 7	London Park no. 7	London Park no. 7	London Park no. 7	London Park no. 7	London Park no. 7	London Park no. 7	action
Edward 8	32	London Park no. 8	London Park no. 8	London Park no. 8	London Park no. 8	London Park no. 8	London Park no. 8	London Park no. 8	London Park no. 8	action
Edward 9	32	London Park no. 9	London Park no. 9	London Park no. 9	London Park no. 9	London Park no. 9	London Park no. 9	London Park no. 9	London Park no. 9	action

1
2
3
4
5
•••
10
10 条/页

固定头和列

适合同时展示有大量数据和数据列。

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

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

Other				Company
Age	Address			Company Address	Company Name
	Street	Block
	Street	Building	Door No.


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

1
2
3
4
5
•••
10
10 条/页

表头分组

columns[n] 可以内嵌 children，以渲染分组表头。

name	age	address	operation
Edward King 0	32	London, Park Lane no. 0	Delete
Edward King 1	32	London, Park Lane no. 1	Delete

1

可编辑单元格

带单元格编辑功能的表格。当配合 shouldCellUpdate 使用时请注意闭包问题。

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

1
2
3
4
5
•••
10
10 条/页

可编辑行

带行编辑功能的表格。

🛎️ 想要 3 分钟实现？试试 ProTable 的可编辑表格！

Name

Platform

Version

Upgraded

Creator

Date

Action

Screen

iOS

10.3.4.5654

500

Jack

2014-12-24 23:12:00

Publish

Date	Name	Status	Upgrade Status	Action
2014-12-24 23:12:00	This is production name	Finished	Upgraded: 56	Pause Stop More
2014-12-24 23:12:00	This is production name	Finished	Upgraded: 56	Pause Stop More
2014-12-24 23:12:00	This is production name	Finished	Upgraded: 56	Pause Stop More

Screen

iOS

10.3.4.5654

500

Jack

2014-12-24 23:12:00

Publish

Screen

iOS

10.3.4.5654

500

Jack

2014-12-24 23:12:00

Publish

1

Name

Platform

Version

Upgraded

Creator

Date

Action

Screen

iOS

10.3.4.5654

500

Jack

2014-12-24 23:12:00

Publish

Date	Name	Status	Upgrade Status	Action
2014-12-24 23:12:00	This is production name	Finished	Upgraded: 56	Pause Stop More
2014-12-24 23:12:00	This is production name	Finished	Upgraded: 56	Pause Stop More
2014-12-24 23:12:00	This is production name	Finished	Upgraded: 56	Pause Stop More

Screen

iOS

10.3.4.5654

500

Jack

2014-12-24 23:12:00

Publish

Screen

iOS

10.3.4.5654

500

Jack

2014-12-24 23:12:00

Publish

1

Name

Platform

Version

Upgraded

Creator

Date

Action

Screen

iOS

10.3.4.5654

500

Jack

2014-12-24 23:12:00

Publish

Date	Name	Status	Upgrade Status	Action
2014-12-24 23:12:00	This is production name	Finished	Upgraded: 56	Pause Stop More
2014-12-24 23:12:00	This is production name	Finished	Upgraded: 56	Pause Stop More
2014-12-24 23:12:00	This is production name	Finished	Upgraded: 56	Pause Stop More

Screen

iOS

10.3.4.5654

500

Jack

2014-12-24 23:12:00

Publish

Screen

iOS

10.3.4.5654

500

Jack

2014-12-24 23:12:00

Publish

1

嵌套子表格

展示每行数据更详细的信息。

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

1

拖拽排序

使用自定义元素，我们可以集成 dnd-kit 来实现拖拽排序。

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

1

拖拽手柄列

使用 dnd-kit 来实现一个拖拽操作列。

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

1

单元格自动省略

设置 column.ellipsis 可以让单元格内容根据宽度自动省略。

列头缩略暂不支持和排序筛选一起使用。

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

1

自定义单元格省略提示

设置 column.ellipsis.showTitle 关闭单元格内容自动省略后默认的 title 提示, 使用 Tooltip 替代。

Name	Borrow	Repayment
John Brown	10	33
Jim Green	100	0
Joe Black	10	10
Jim Red	75	45
Total	195	88
Balance	107

Name	Description


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.

Summary

This is a summary content

总结栏

通过 summary 设置总结栏。使用 Table.Summary.Cell 同步 Column 的固定状态。你可以通过配置 Table.Summary 的 fixed 属性使其固定(4.16.0 支持)。

虚拟列表

通过 react-window 引入虚拟滚动方案，实现 100000 条数据的高性能表格。

Name (all screens)
John Brown

1

响应式

响应式配置列的展示。

topLefttopCentertopRightnone

bottomLeftbottomCenterbottomRightnone

1

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

分页设置

表格的分页设置。

Full Name	Age	Column 1	Column 2	Column 3	Column 4	Column 5	Column 6	Column 7	Column 8	Action


Edward 0	32	London Park no. 0	London Park no. 0	London Park no. 0	London Park no. 0	London Park no. 0	London Park no. 0	London Park no. 0	London Park no. 0	action
Edward 1	32	London Park no. 1	London Park no. 1	London Park no. 1	London Park no. 1	London Park no. 1	London Park no. 1	London Park no. 1	London Park no. 1	action
Edward 2	32	London Park no. 2	London Park no. 2	London Park no. 2	London Park no. 2	London Park no. 2	London Park no. 2	London Park no. 2	London Park no. 2	action
Edward 3	32	London Park no. 3	London Park no. 3	London Park no. 3	London Park no. 3	London Park no. 3	London Park no. 3	London Park no. 3	London Park no. 3	action
Edward 4	32	London Park no. 4	London Park no. 4	London Park no. 4	London Park no. 4	London Park no. 4	London Park no. 4	London Park no. 4	London Park no. 4	action
Edward 5	32	London Park no. 5	London Park no. 5	London Park no. 5	London Park no. 5	London Park no. 5	London Park no. 5	London Park no. 5	London Park no. 5	action
Edward 6	32	London Park no. 6	London Park no. 6	London Park no. 6	London Park no. 6	London Park no. 6	London Park no. 6	London Park no. 6	London Park no. 6	action
Edward 7	32	London Park no. 7	London Park no. 7	London Park no. 7	London Park no. 7	London Park no. 7	London Park no. 7	London Park no. 7	London Park no. 7	action
Edward 8	32	London Park no. 8	London Park no. 8	London Park no. 8	London Park no. 8	London Park no. 8	London Park no. 8	London Park no. 8	London Park no. 8	action
Edward 9	32	London Park no. 9	London Park no. 9	London Park no. 9	London Park no. 9	London Park no. 9	London Park no. 9	London Park no. 9	London Park no. 9	action

Scroll Context

Fix Right

1
2
3
4
5
•••
10
10 条/页

随页面滚动的固定表头和滚动条

对于长表格，需要滚动才能查看表头和滚动条，那么现在可以设置跟随页面固定表头和滚动条。

Name	Age	Address	Action
John Brown	12	New York No. 1 Lake Park	Delete More actions
John Brown	22	New York No. 2 Lake Park	Delete More actions
John Brown	32	New York No. 3 Lake Park	Delete More actions
John Brown	42	New York No. 4 Lake Park	Delete More actions
John Brown	52	New York No. 5 Lake Park	Delete More actions
John Brown	62	New York No. 6 Lake Park	Delete More actions
John Brown	72	New York No. 7 Lake Park	Delete More actions
John Brown	82	New York No. 8 Lake Park	Delete More actions
John Brown	92	New York No. 9 Lake Park	Delete More actions
John Brown	102	New York No. 10 Lake Park	Delete More actions

1

动态控制表格属性

选择不同配置组合查看效果。

API

通用属性参考：通用属性

Table

参数	说明	类型	默认值	版本
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	-
scroll	表格是否可滚动，也可以指定滚动区域的宽、高，配置项	object	-
showHeader	是否显示表头	boolean	true
showSorterTooltip	表头是否显示下一次排序的 tooltip 提示。当参数类型为对象时，将被设置为 Tooltip 的属性	boolean \| Tooltip props	true
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)	-
onChange	分页、排序、筛选变化时触发	function(pagination, filters, sorter, extra: { currentDataSource: [], action: `paginate` \| `sort` \| `filter` })	-
onHeaderRow	设置头部行属性	function(columns, index)	-
onRow	设置行属性	function(record, index)	-

onRow 用法

适用于 onRow onHeaderRow onCell onHeaderCell。

<Table
  onRow={(record) => {
    return {
      onClick: (event) => {}, // 点击行
      onDoubleClick: (event) => {},
      onContextMenu: (event) => {},
      onMouseEnter: (event) => {}, // 鼠标移入行
      onMouseLeave: (event) => {},
    };
  }}
  onHeaderRow={(columns, index) => {
    return {
      onClick: () => {}, // 点击表头行
    };
  }}
/>

Column

列描述数据对象，是 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	-
filterDropdownOpen	用于控制自定义筛选菜单是否可见	boolean	-
filtered	标识数据是否经过过滤，筛选图标会高亮	boolean	false
filteredValue	筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组	string[]	-
filterIcon	自定义 filter 图标。	ReactNode \| (filtered: boolean) => ReactNode	false
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[]	-
fixed	（IE 下无效）列是否固定，可选 true (等效于 left) `left` `right`	boolean \| string	false
key	React 需要的 key，如果已经设置了唯一的 `dataIndex`，可以忽略这个属性	string	-
render	生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引	function(text, 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	true
sortDirections	支持的排序方式，覆盖 `Table` 中 `sortDirections`，取值为 `ascend` `descend`	Array	[`ascend`, `descend`]
sorter	排序函数，本地排序使用一个函数(参考 Array.sort 的 compareFunction)，需要服务端排序可设为 true	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	-
onCell	设置单元格属性	function(record, rowIndex)	-
onFilter	本地模式下，确定筛选的运行函数	function	-
onFilterDropdownOpenChange	自定义筛选菜单可见变化时调用	function(visible) {}	-
onHeaderCell	设置头部单元格属性	function(column)	-

ColumnGroup

参数	说明	类型	默认值
title	列头显示文字	ReactNode	-

pagination

分页的配置项。

参数	说明	类型	默认值
position	指定分页显示的位置，取值为`topLeft` \| `topCenter` \| `topRight` \|`bottomLeft` \| `bottomCenter` \| `bottomRight`	Array	[`bottomRight`]

更多配置项，请查看 Pagination。

expandable

展开功能的配置。

参数	说明	类型	默认值	版本
childrenColumnName	指定树形结构的列名	string	children
columnTitle	自定义展开列表头	ReactNode	-	4.23.0
columnWidth	自定义展开列宽度	string \| number	-
defaultExpandAllRows	初始时，是否展开所有行	boolean	false
defaultExpandedRowKeys	默认展开的行	string[]	-
expandedRowClassName	展开行的 className	function(record, index, indent): string	-
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	设置是否允许行展开	(record) => boolean	-
showExpandColumn	设置是否展示行展开列	boolean	true	4.18.0
onExpand	点击展开图标时触发	function(record, event)	-
onExpandedRowsChange	展开的行变化时触发	function(expandedRows)	-

rowSelection

选择功能的配置。

参数	说明	类型	默认值	版本
checkStrictly	checkable 状态下节点选择完全受控（父子数据选中状态不再关联）	boolean	true	4.4.0
columnTitle	自定义列表选择框标题	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)	-

scroll

参数	说明	类型	默认值
scrollToFirstRowOnChange	当分页、排序、筛选变化后是否滚动到表格顶部	boolean	-
x	设置横向滚动，也可用于指定滚动区域的宽，可以设置为像素值，百分比，true 和 'max-content'	string \| number \| true	-
y	设置纵向滚动，也可用于指定滚动区域的高，可以设置为像素值	string \| number	-

selection

参数	说明	类型	默认值
key	React 需要的 key，建议设置	string	-
text	选择项显示的文字	ReactNode	-
onSelect	选择项点击回调	function(changeableRowKeys)	-

在 TypeScript 中使用

import { Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import React from 'react';

interface User {
  key: number;
  name: string;
}

const columns: ColumnsType<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 实例。

Design Token

全局 Token

注意

按照 React 的规范，所有的数组组件必须绑定 key。在 Table 中，dataSource 和 columns 里的数据值都需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。

控制台警告

如果 dataSource[i].key 没有提供，你应该使用 rowKey 来指定 dataSource 的主键，如下所示。若没有指定，控制台会出现以上的提示，表格组件也会出现各类奇怪的错误。

// 比如你的数据主键是 uid
return <Table rowKey="uid" />;
// 或
return <Table rowKey={(record) => record.uid} />;

FAQ

如何在没有数据或只有一页数据时隐藏分页栏

你可以设置 pagination 的 hideOnSinglePage 属性为 true。

表格过滤时会回到第一页？

前端过滤时通常条目总数会减少，从而导致总页数小于筛选前的当前页数，为了防止当前页面没有数据，我们默认会返回第一页。

如果你在使用远程分页，很可能需要保持当前页面，你可以参照这个受控例子控制当前页面不变。

表格分页为何会出现 size 切换器？

自 4.1.0 起，Pagination 在 total 大于 50 条时会默认显示 size 切换器以提升用户交互体验。如果你不需要该功能，可以通过设置 showSizeChanger 为 false 来关闭。

为什么更新 state 会导致全表渲染？

由于 columns 支持 render 方法，因而 Table 无法知道哪些单元会受到影响。你可以通过 column.shouldCellUpdate 来控制单元格的渲染。

固定列穿透到最上层该怎么办？

固定列通过 z-index 属性将其悬浮于非固定列之上，这使得有时候你会发现在 Table 上放置遮罩层时固定列会被透过的情况。为遮罩层设置更高的 z-index 覆盖住固定列即可。

自 4.1.0 起，可以通过 rowSelection 的 renderCell 属性控制，可以参考此处 Demo 实现展示 Tooltip 需求或其他自定义的需求。

Namu Design

Table
表格

Namu Design

Table
表格

何时使用

如何使用

相关推荐

代码演示

API

Table

onRow 用法

Column

ColumnGroup

expandable

rowSelection

scroll

selection

在 TypeScript 中使用

Design Token

全局 Token

注意

FAQ

如何在没有数据或只有一页数据时隐藏分页栏

表格过滤时会回到第一页？

表格分页为何会出现 size 切换器？

为什么更新 state 会导致全表渲染？

固定列穿透到最上层该怎么办？

如何自定义渲染可选列的勾选框（比如增加 Tooltip）？

Table表格更新日志

Table表格更新日志

何时使用

如何使用

相关推荐

代码演示

API

Table

onRow 用法

Column

ColumnGroup

pagination

expandable

rowSelection

scroll

selection

在 TypeScript 中使用

Design Token

全局 Token

注意

FAQ

如何在没有数据或只有一页数据时隐藏分页栏

表格过滤时会回到第一页？

表格分页为何会出现 size 切换器？

为什么 更新 state 会导致全表渲染？

固定列穿透到最上层该怎么办？

如何自定义渲染可选列的勾选框（比如增加 Tooltip）？

Table
表格

Table
表格

为什么更新 state 会导致全表渲染？