logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
5.22.5
  • 组件总览
  • 通用
    • Button
      按钮
    • FloatButton
      悬浮按钮
      5.0.0
    • Icon
      图标
    • Typography
      排版
  • 布局
    • Divider
      分割线
    • Flex
      弹性布局
      5.10.0
    • Grid
      栅格
    • Layout
      布局
    • Space
      间距
    • Splitter
      分隔面板
      5.21.0
  • 导航
    • Anchor
      锚点
    • Breadcrumb
      面包屑
    • Dropdown
      下拉菜单
    • Menu
      导航菜单
    • Pagination
      分页
    • Steps
      步骤条
  • 数据录入
    • AutoComplete
      自动完成
    • Cascader
      级联选择
    • Checkbox
      多选框
    • ColorPicker
      颜色选择器
      5.5.0
    • DatePicker
      日期选择框
    • Form
      表单
    • Input
      输入框
    • InputNumber
      数字输入框
    • Mentions
      提及
    • Radio
      单选框
    • Rate
      评分
    • Select
      选择器
    • Slider
      滑动输入条
    • Switch
      开关
    • TimePicker
      时间选择框
    • Transfer
      穿梭框
    • TreeSelect
      树选择
    • Upload
      上传
  • 数据展示
    • Avatar
      头像
    • Badge
      徽标数
    • Calendar
      日历
    • Card
      卡片
    • Carousel
      走马灯
    • Collapse
      折叠面板
    • Descriptions
      描述列表
    • Empty
      空状态
    • Image
      图片
    • List
      列表
    • Popover
      气泡卡片
    • QRCode
      二维码
      5.1.0
    • Segmented
      分段控制器
    • Statistic
      统计数值
    • Table
      表格
    • Tabs
      标签页
    • Tag
      标签
    • Timeline
      时间轴
    • Tooltip
      文字提示
    • Tour
      漫游式引导
      5.0.0
    • Tree
      树形控件
  • 反馈
    • Alert
      警告提示
    • Drawer
      抽屉
    • Message
      全局提示
    • Modal
      对话框
    • Notification
      通知提醒框
    • Popconfirm
      气泡确认框
    • Progress
      进度条
    • Result
      结果
    • Skeleton
      骨架屏
    • Spin
      加载中
    • Watermark
      水印
      5.1.0
  • 其他
    • Affix
      固钉
    • App
      包裹组件
      5.1.0
    • ConfigProvider
      全局化配置
    • Util
      工具类
      5.13.0

Table
表格

展示行列数据。
使用import{ Table }from"antd";
源码components/table
文档
编辑此页更新日志

相关资源

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconf logoSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech logo更多产品

yuque logo语雀-构建你的数字花园
AntV logoAntV-数据可视化解决方案
Egg logoEgg-企业级 Node.js 框架
Kitchen logoKitchen-Sketch 工具集
Galacean logoGalacean-互动图形解决方案
xtech logo蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区
loading

何时使用

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

如何使用

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

相关推荐

  • Kitchen Sketch 插件 💎：设计师神器，两步自动生成 Ant Design 表格组件。
  • ProTable 高级表格：在 antd Table 之上扩展了更多便捷易用的功能，内置搜索、筛选、刷新等常用表格行为，并为多种类型数据展示提供了内置格式化。
  • S2 多维交叉分析表格：AntV S2 和 Antd Table 有什么区别？

代码演示

API

通用属性参考：通用属性

Table

参数说明类型默认值版本
bordered是否展示外边框和列边框booleanfalse
columns表格列的配置描述，具体项见下表ColumnsType[]-
components覆盖默认的 table 元素TableComponents-
dataSource数据数组object[]-
expandable配置展开属性expandable-
footer表格尾部function(currentPageData)-
getPopupContainer设置表格内各类浮层的渲染节点，如筛选菜单(triggerNode) => HTMLElement() => TableHtmlElement
loading页面是否加载中boolean | Spin Propsfalse
locale默认文案设置，目前包括排序、过滤、空数据文案object默认值
pagination分页器，参考配置项或 pagination 文档，设为 false 时不展示和进行分页object | false-
rowClassName表格行的类名function(record, index): string-
rowKey表格行 key 的取值，可以是字符串或一个函数string | function(record): stringkey
rowSelection表格行是否可选择，配置项object-
rowHoverable表格行是否开启 hover 交互booleantrue5.16.0
scroll表格是否可滚动，也可以指定滚动区域的宽、高，配置项object-
showHeader是否显示表头booleantrue
showSorterTooltip表头是否显示下一次排序的 tooltip 提示。当参数类型为对象时，将被设置为 Tooltip 的属性boolean | Tooltip props & {target?: 'full-header' | 'sorter-icon' }{ target: 'full-header' }5.16.0
size表格大小large | middle | smalllarge
sortDirections支持的排序方式，取值为 ascend descendArray[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

Table ref

参数说明类型版本
nativeElement最外层 div 元素HTMLDivElement5.11.0
scrollTo滚动到目标位置（设置 key 时为 Record 对应的 rowKey）(config: { index?: number, key?: React.Key, top?: number }) => void5.11.0

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 | centerleft
className列样式类名string-
colSpan表头列合并，设置为 0 时，不渲染number-
dataIndex列数据在数据项中对应的路径，支持通过数组查询嵌套路径string | string[]-
defaultFilteredValue默认筛选值string[]-
filterResetToDefaultFilteredValue点击重置按钮的时候，是否恢复默认筛选值booleanfalse
defaultSortOrder默认排序顺序ascend | descend-
ellipsis超过宽度将自动省略，暂不支持和排序筛选一起使用。
设置为 true 或 { showTitle?: boolean } 时，表格布局将变成 tableLayout="fixed"。		boolean | { showTitle?: boolean }falseshowTitle: 4.3.0
filterDropdown可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互ReactNode | (props: FilterDropdownProps) => ReactNode-
filtered标识数据是否经过过滤，筛选图标会高亮booleanfalse
filteredValue筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组string[]-
filterIcon自定义 filter 图标。ReactNode | (filtered: boolean) => ReactNodefalse
filterOnClose是否在筛选菜单关闭时触发筛选booleantrue5.15.0
filterMultiple是否多选booleantrue
filterMode指定筛选菜单的用户界面'menu' | 'tree''menu'4.17.0
filterSearch筛选菜单项是否可搜索boolean | function(input, record):booleanfalseboolean:4.17.0 function:4.19.0
filters表头的筛选菜单项object[]-
filterDropdownProps自定义下拉属性，在 <5.22.0 之前可用 filterDropdownOpen 和 onFilterDropdownOpenChangeDropdownProps-5.22.0
fixed（IE 下无效）列是否固定，可选 true (等效于 left) left rightboolean | stringfalse
keyReact 需要的 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 中 showSorterTooltipboolean | Tooltip props & {target?: 'full-header' | 'sorter-icon' }{ target: 'full-header' }5.16.0
sortDirections支持的排序方式，覆盖 Table 中 sortDirections， 取值为 ascend descendArray[ascend, descend]
sorter排序函数，本地排序使用一个函数(参考 Array.sort 的 compareFunction)。需要服务端排序可设为 true（单列排序） 或 { multiple: number }（多列排序）function | boolean | { compare: function, multiple: number }-
sortOrder排序的受控属性，外界可用此控制列的排序，可设置为 ascend descend nullascend | 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隐藏列booleanfalse5.13.0
onCell设置单元格属性function(record, rowIndex)-
onFilter本地模式下，确定筛选的运行函数function-
onHeaderCell设置头部单元格属性function(column)-

ColumnGroup

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

pagination

分页的配置项。

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

更多配置项，请查看 Pagination。

expandable

展开功能的配置。

参数说明类型默认值版本
childrenColumnName指定树形结构的列名stringchildren
columnTitle自定义展开列表头ReactNode-4.23.0
columnWidth自定义展开列宽度string | number-
defaultExpandAllRows初始时，是否展开所有行booleanfalse
defaultExpandedRowKeys默认展开的行string[]-
expandedRowClassName展开行的 classNamestring | (record, index, indent) => string-string: 5.22.0
expandedRowKeys展开的行，控制属性string[]-
expandedRowRender额外的展开行function(record, index, indent, expanded): ReactNode-
expandIcon自定义展开图标，参考示例function(props): ReactNode-
expandRowByClick通过点击行来展开子行booleanfalse
fixed控制展开图标是否固定，可选 true 'left' 'right'boolean | stringfalse4.16.0
indentSize展示树形数据时，每层缩进的宽度，以 px 为单位number15
rowExpandable设置是否允许行展开（dataSource 若存在 children 字段将不生效）(record) => boolean-
showExpandColumn是否显示展开图标列booleantrue4.18.0
onExpand点击展开图标时触发function(expanded, record)-
onExpandedRowsChange展开的行变化时触发function(expandedRows)-

rowSelection

选择功能的配置。

参数说明类型默认值版本
checkStrictlycheckable 状态下节点选择完全受控（父子数据选中状态不再关联）booleantrue4.4.0
columnTitle自定义列表选择框标题ReactNode | (originalNode: ReactNode) => ReactNode-
columnWidth自定义列表选择框宽度string | number32px
fixed把选择框列固定在左边boolean-
getCheckboxProps选择框的默认属性配置function(record)-
hideSelectAll隐藏全选勾选框与自定义选择项booleanfalse4.3.0
preserveSelectedRowKeys当数据被删除时仍然保留选项的 keyboolean-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[] | booleantrue
type多选/单选checkbox | radiocheckbox
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

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

在 TypeScript 中使用

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 实例。

主题变量（Design Token）

组件 Token如何定制？

Token 名称描述类型默认值
bodySortBg表格排序列背景色string#fafafa
borderColor表格边框/分割线颜色string#f0f0f0
cellFontSize单元格文字大小（默认大尺寸）number14
cellFontSizeMD单元格文字大小（中等尺寸）number14
cellFontSizeSM单元格文字大小（小尺寸）number14
cellPaddingBlock单元格纵向内间距number16
cellPaddingBlockMD单元格纵向内间距（中等尺寸）number12
cellPaddingBlockSM单元格纵向内间距（小尺寸）number8
cellPaddingInline单元格横向内间距（默认大尺寸）number16
cellPaddingInlineMD单元格横向内间距（中等尺寸）number8
cellPaddingInlineSM单元格横向内间距（小尺寸）number8
expandIconBg展开按钮背景色string#ffffff
filterDropdownBg过滤下拉菜单颜色string#ffffff
filterDropdownMenuBg过滤下拉菜单选项背景string#ffffff
fixedHeaderSortActiveBg固定表头排序激活态背景色string#f0f0f0
footerBg表格底部背景色string#fafafa
footerColor表格底部文字颜色stringrgba(0, 0, 0, 0.88)
headerBg表头背景string#fafafa
headerBorderRadius表头圆角number8
headerColor表头文字颜色stringrgba(0, 0, 0, 0.88)
headerFilterHoverBg表头过滤按钮悬浮背景色stringrgba(0, 0, 0, 0.06)
headerSortActiveBg表头排序激活态背景色string#f0f0f0
headerSortHoverBg表头排序激活态悬浮背景色string#f0f0f0
headerSplitColor表头分割线颜色string#f0f0f0
rowExpandedBg表格行展开背景色stringrgba(0, 0, 0, 0.02)
rowHoverBg表格行悬浮背景色string#fafafa
rowSelectedBg表格行选中背景色string#e6f4ff
rowSelectedHoverBg表格行选中悬浮背景色string#bae0ff
selectionColumnWidth选择列宽度string | number32
stickyScrollBarBgSticky 模式下滚动条背景色stringrgba(0, 0, 0, 0.25)
stickyScrollBarBorderRadiusSticky 模式下滚动条圆角number100

全局 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 覆盖住固定列即可。

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

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

为什么 components.body.wrapper 或 components.body.row 在 virtual 开启时会报错？

因为虚拟表格需要获取其 ref 做一些计算，所以你需要使用 React.forwardRef 包裹并传递 ref 到 dom。

NameAgeAddressTagsAction
John Brown32New York No. 1 Lake ParkNICEDEVELOPER
Invite John Brown
Delete
Jim Green42London No. 1 Lake ParkLOSER
Invite Jim Green
Delete
Joe Black32Sydney No. 1 Lake ParkCOOLTEACHER
Invite Joe Black
Delete
  • 1
基本用法

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
NameAgeAddressTagsAction
First NameLast Name
JohnBrown32New York No. 1 Lake ParkNICEDEVELOPER
Invite Brown
Delete
JimGreen42London No. 1 Lake ParkLOSER
Invite Green
Delete
JoeBlack32Sydney No. 1 Lake ParkCOOLTEACHER
Invite Black
Delete
  • 1
JSX 风格的 API

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

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
NameAgeAddress
John Brown32New York No. 1 Lake Park
Jim Green42London No. 1 Lake Park
Joe Black32Sydney No. 1 Lake Park
Disabled User99Sydney No. 1 Lake Park
  • 1
可选择

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

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
NameAgeAddress
Edward King 032London, Park Lane no. 0
Edward King 132London, Park Lane no. 1
Edward King 232London, Park Lane no. 2
Edward King 332London, Park Lane no. 3
Edward King 432London, Park Lane no. 4
Edward King 532London, Park Lane no. 5
Edward King 632London, Park Lane no. 6
Edward King 732London, Park Lane no. 7
Edward King 832London, Park Lane no. 8
Edward King 932London, Park Lane no. 9
  • 1
  • 2
  • 3
  • 4
  • 5
选择和操作

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
NameAgeAddress
Edward King 032London, Park Lane no. 0
Edward King 132London, Park Lane no. 1
Edward King 232London, Park Lane no. 2
Edward King 332London, Park Lane no. 3
Edward King 432London, Park Lane no. 4
Edward King 532London, Park Lane no. 5
Edward King 632London, Park Lane no. 6
Edward King 732London, Park Lane no. 7
Edward King 832London, Park Lane no. 8
Edward King 932London, Park Lane no. 9
  • 1
  • 2
  • 3
  • 4
  • 5
自定义选择项

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
NameAgeAddress
Edward King 032London, Park Lane no. 01
Edward King 132London, Park Lane no. 11
Edward King 232London, Park Lane no. 21
Edward King 332London, Park Lane no. 31
Edward King 432London, Park Lane no. 41
Edward King 532London, Park Lane no. 51
Edward King 632London, Park Lane no. 61
Edward King 732London, Park Lane no. 71
Edward King 832London, Park Lane no. 81
Edward King 932London, Park Lane no. 91
Edward King 1032London, Park Lane no. 101
Edward King 1132London, Park Lane no. 111
Edward King 1232London, Park Lane no. 121
Edward King 1332London, Park Lane no. 131
Edward King 1432London, Park Lane no. 141
Edward King 1532London, Park Lane no. 151
Edward King 1632London, Park Lane no. 161
Edward King 1732London, Park Lane no. 171
Edward King 1832London, Park Lane no. 181
Edward King 1932London, Park Lane no. 191
Edward King 2032London, Park Lane no. 201
Edward King 2132London, Park Lane no. 211
Edward King 2232London, Park Lane no. 221
Edward King 2332London, Park Lane no. 231
Edward King 2432London, Park Lane no. 241
Edward King 2532London, Park Lane no. 251
Edward King 2632London, Park Lane no. 261
Edward King 2732London, Park Lane no. 271
Edward King 2832London, Park Lane no. 281
Edward King 2932London, Park Lane no. 291
Edward King 3032London, Park Lane no. 301
Edward King 3132London, Park Lane no. 311
Edward King 3232London, Park Lane no. 321
Edward King 3332London, Park Lane no. 331
Edward King 3432London, Park Lane no. 341
Edward King 3532London, Park Lane no. 351
Edward King 3632London, Park Lane no. 361
Edward King 3732London, Park Lane no. 371
Edward King 3832London, Park Lane no. 381
Edward King 3932London, Park Lane no. 391
Edward King 4032London, Park Lane no. 401
Edward King 4132London, Park Lane no. 411
Edward King 4232London, Park Lane no. 421
Edward King 4332London, Park Lane no. 431
Edward King 4432London, Park Lane no. 441
Edward King 4532London, Park Lane no. 451
Edward King 4632London, Park Lane no. 461
Edward King 4732London, Park Lane no. 471
Edward King 4832London, Park Lane no. 481
Edward King 4932London, Park Lane no. 491
选择性能

高损耗 render 性能调试。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Name
Age
Address
Jim Green42London No. 1 Lake Park
John Brown32New York No. 1 Lake Park
Joe Black32Sydney No. 1 Lake Park
Jim Red32London 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) { ... } 的形式。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Name
Age
Address
John Brown32New York No. 1 Lake Park
Jim Green42London No. 1 Lake Park
Joe Black32Sydney No. 1 Lake Park
Jim Red32London No. 2 Lake Park
  • 1
树型筛选菜单

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Name
Age
Address
John Brown32New York No. 1 Lake Park
Jim Green42London No. 1 Lake Park
Joe Black32Sydney No. 1 Lake Park
Jim Red32London No. 2 Lake Park
  • 1
自定义筛选的搜索

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Name
Chinese Score
Math Score
English Score
John Brown986070
Jim Green986689
Joe Black989070
Jim Red889989
  • 1
多列排序

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Name
Age
Address
John Brown32New York No. 1 Lake Park
Jim Green42London No. 1 Lake Park
Joe Black32Sydney No. 1 Lake Park
Jim Red32London No. 2 Lake Park
  • 1
可控的筛选和排序

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

  1. columns 中定义了 filteredValue 和 sortOrder 属性即视为受控模式。
  2. 只支持同时对一列进行排序，请保证只有一列的 sortOrder 属性是生效的。
  3. 务必指定 column.key。
CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Name
Age
Address
John Brown32New York No. 1 Lake Park
Joe Black42London No. 1 Lake Park
Jim Green32Sydney No. 1 Lake Park
Jim Red32London No. 2 Lake Park
  • 1
自定义筛选菜单

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

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Name
Gender
Email
暂无数据
暂无数据
远程加载数据

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

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

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

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

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Middle size table
NameAgeAddress
John Brown32New York No. 1 Lake Park
Jim Green42London No. 1 Lake Park
Joe Black32Sydney No. 1 Lake Park
  • 1
Small size table
NameAgeAddress
John Brown32New York No. 1 Lake Park
Jim Green42London No. 1 Lake Park
Joe Black32Sydney No. 1 Lake Park
  • 1
紧凑型

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
NameAgeAddress
Sample Name30Sample Address 120
Sample Name31Sample Address 121
Sample Name32Sample Address 122
Sample Name33Sample Address 123
Sample Name34Sample Address 124
Sample Name30Sample Address 125
Sample Name31Sample Address 126
Sample Name32Sample Address 127
Sample Name33Sample Address 128
Sample Name34Sample Address 129
  • 1
  • •••
  • 11
  • 12
  • 13
  • 14
  • 15
  • •••
  • 20
  • 10 条/页
紧凑型

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Header
NameCash AssetsAddress
John Brown￥300,000.00New York No. 1 Lake Park
Jim Green￥1,256,000.00London No. 1 Lake Park
Joe Black￥120,000.00Sydney No. 1 Lake Park
Footer
  • 1
带边框

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
NameAgeAddressAction
John Brown32New York No. 1 Lake ParkDelete
Jim Green42London No. 1 Lake ParkDelete
Not Expandable29Jiangsu No. 1 Lake ParkDelete
Joe Black32Sydney No. 1 Lake ParkDelete
  • 1
可展开

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
NameAge
Address
John Brown32New York No. 1 Lake Park
Jim Green42London No. 1 Lake Park
Not Expandable29Jiangsu No. 1 Lake Park
Joe Black32Sydney No. 1 Lake Park
  • 1
特殊列排序

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
RowHeadNameAgeHome phoneAddress
1John Brown320571-2209890918889898989New York No. 1 Lake Park
2Jim Green
3Joe Black320575-2209890918900010002Sydney No. 1 Lake Park
4Jim Red180575-2209890918900010002London No. 2 Lake Park
5Jake White1818900010002Dublin No. 2 Lake Park
  • 1
表格行/列合并

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

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
CheckStrictly:
NameAgeAddress
John Brown sr.60New York No. 1 Lake Park
Joe Black32Sydney No. 1 Lake Park
  • 1
树形数据展示

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

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Fixed first column:
NameAgeAddress
John Brown sr. John Brown sr. John Brown sr. John Brown sr. John Brown sr. John Brown sr.60New York No. 1 Lake Park
John Brown sr. John Brown sr. John Brown sr. John Brown sr. John Brown sr. John Brown sr.42New York No. 2 Lake Park
John Brown sr. John Brown sr. John Brown sr. John Brown sr. John Brown sr. John Brown sr.30New York No. 3 Lake Park
John Brown sr. John Brown sr. John Brown sr. John Brown sr. John Brown sr. John Brown sr.16New York No. 3 Lake Park
Jim Green sr. Jim Green sr. Jim Green sr. Jim Green sr.72London No. 1 Lake Park
Jim Green. Jim Green. Jim Green. Jim Green. Jim Green. Jim Green.42London No. 2 Lake Park
Jim Green jr. Jim Green jr. Jim Green jr. Jim Green jr.25London No. 3 Lake Park
Jimmy Green sr. Jimmy Green sr. Jimmy Green sr.18London No. 4 Lake Park
Joe Black32Sydney No. 1 Lake Park
  • 1
树形数据省略情况测试

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
NameAgeAddress
 
 
 
Edward King 032London, Park Lane no. 0
Edward King 132London, Park Lane no. 1
Edward King 232London, Park Lane no. 2
Edward King 332London, Park Lane no. 3
Edward King 432London, Park Lane no. 4
Edward King 532London, Park Lane no. 5
Edward King 632London, Park Lane no. 6
Edward King 732London, Park Lane no. 7
Edward King 832London, Park Lane no. 8
Edward King 932London, Park Lane no. 9
Edward King 1032London, Park Lane no. 10
Edward King 1132London, Park Lane no. 11
Edward King 1232London, Park Lane no. 12
Edward King 1332London, Park Lane no. 13
Edward King 1432London, Park Lane no. 14
Edward King 1532London, Park Lane no. 15
Edward King 1632London, Park Lane no. 16
Edward King 1732London, Park Lane no. 17
Edward King 1832London, Park Lane no. 18
Edward King 1932London, Park Lane no. 19
Edward King 2032London, Park Lane no. 20
Edward King 2132London, Park Lane no. 21
Edward King 2232London, Park Lane no. 22
Edward King 2332London, Park Lane no. 23
Edward King 2432London, Park Lane no. 24
Edward King 2532London, Park Lane no. 25
Edward King 2632London, Park Lane no. 26
Edward King 2732London, Park Lane no. 27
Edward King 2832London, Park Lane no. 28
Edward King 2932London, Park Lane no. 29
Edward King 3032London, Park Lane no. 30
Edward King 3132London, Park Lane no. 31
Edward King 3232London, Park Lane no. 32
Edward King 3332London, Park Lane no. 33
Edward King 3432London, Park Lane no. 34
Edward King 3532London, Park Lane no. 35
Edward King 3632London, Park Lane no. 36
Edward King 3732London, Park Lane no. 37
Edward King 3832London, Park Lane no. 38
Edward King 3932London, Park Lane no. 39
Edward King 4032London, Park Lane no. 40
Edward King 4132London, Park Lane no. 41
Edward King 4232London, Park Lane no. 42
Edward King 4332London, Park Lane no. 43
Edward King 4432London, Park Lane no. 44
Edward King 4532London, Park Lane no. 45
Edward King 4632London, Park Lane no. 46
Edward King 4732London, Park Lane no. 47
Edward King 4832London, Park Lane no. 48
Edward King 4932London, Park Lane no. 49
  • 1
  • 2
  • 50 条/页
固定表头

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

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Full Name
Age
Column 1Column 2Column 3Column 4Column 5Column 6Column 7Column 8Column 9Column 10Column 11Column 12Column 13Column 14Column 15Column 16Column 17Column 18Column 19Column 20Action
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Olivia32New York ParkNew York ParkNew York ParkNew York ParkNew York ParkNew York ParkNew York ParkNew York ParkNew York ParkNew York ParkNew York ParkNew York ParkNew York ParkNew York ParkNew York ParkNew York ParkNew York ParkNew York ParkNew York ParkNew York Parkaction
Ethan40London ParkLondon ParkLondon ParkLondon ParkLondon ParkLondon ParkLondon ParkLondon ParkLondon ParkLondon ParkLondon ParkLondon ParkLondon ParkLondon ParkLondon ParkLondon ParkLondon ParkLondon ParkLondon ParkLondon Parkaction
固定列

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

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

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

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Full NameAgeColumn 1Column 2Column 3Column 4Column 5Column 6Column 7Column 8Column 9Column 10Column 11Column 12Column 13Column 14Column 15Column 16Column 17Column 18Column 19Column 20Action 1Action 2Action 3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Olivia32New York ParkNew York ParkNew York ParkNew York ParkNew York ParkNew York ParkNew York ParkNew York ParkNew York ParkNew York ParkNew York ParkNew York ParkNew York ParkNew York ParkNew York ParkNew York ParkNew York ParkNew York ParkNew York ParkNew York Parkactionactionaction
Ethan40London ParkLondon ParkLondon ParkLondon ParkLondon ParkLondon ParkLondon ParkLondon ParkLondon ParkLondon ParkLondon ParkLondon ParkLondon ParkLondon ParkLondon ParkLondon ParkLondon ParkLondon ParkLondon ParkLondon Parkactionactionaction
堆叠固定列

混合固定列，滚动到一定距离进行堆叠，推荐配合 bordered 使用。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.14.0
Full NameAgeColumn 1Column 2Column 3Column 4Column 5Column 6Column 7Column 8Column 9Column 10Column 11Column 12Column 13Column 14Column 15Column 16Column 17Column 18Column 19Column 20Action
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Edward King 032London, Park Lane no. 0London, Park Lane no. 0London, Park Lane no. 0London, Park Lane no. 0London, Park Lane no. 0London, Park Lane no. 0London, Park Lane no. 0London, Park Lane no. 0London, Park Lane no. 0London, Park Lane no. 0London, Park Lane no. 0London, Park Lane no. 0London, Park Lane no. 0London, Park Lane no. 0London, Park Lane no. 0London, Park Lane no. 0London, Park Lane no. 0London, Park Lane no. 0London, Park Lane no. 0London, Park Lane no. 0action
Edward King 132London, Park Lane no. 1London, Park Lane no. 1London, Park Lane no. 1London, Park Lane no. 1London, Park Lane no. 1London, Park Lane no. 1London, Park Lane no. 1London, Park Lane no. 1London, Park Lane no. 1London, Park Lane no. 1London, Park Lane no. 1London, Park Lane no. 1London, Park Lane no. 1London, Park Lane no. 1London, Park Lane no. 1London, Park Lane no. 1London, Park Lane no. 1London, Park Lane no. 1London, Park Lane no. 1London, Park Lane no. 1action
Edward King 232London, Park Lane no. 2London, Park Lane no. 2London, Park Lane no. 2London, Park Lane no. 2London, Park Lane no. 2London, Park Lane no. 2London, Park Lane no. 2London, Park Lane no. 2London, Park Lane no. 2London, Park Lane no. 2London, Park Lane no. 2London, Park Lane no. 2London, Park Lane no. 2London, Park Lane no. 2London, Park Lane no. 2London, Park Lane no. 2London, Park Lane no. 2London, Park Lane no. 2London, Park Lane no. 2London, Park Lane no. 2action
Edward King 332London, Park Lane no. 3London, Park Lane no. 3London, Park Lane no. 3London, Park Lane no. 3London, Park Lane no. 3London, Park Lane no. 3London, Park Lane no. 3London, Park Lane no. 3London, Park Lane no. 3London, Park Lane no. 3London, Park Lane no. 3London, Park Lane no. 3London, Park Lane no. 3London, Park Lane no. 3London, Park Lane no. 3London, Park Lane no. 3London, Park Lane no. 3London, Park Lane no. 3London, Park Lane no. 3London, Park Lane no. 3action
Edward King 432London, Park Lane no. 4London, Park Lane no. 4London, Park Lane no. 4London, Park Lane no. 4London, Park Lane no. 4London, Park Lane no. 4London, Park Lane no. 4London, Park Lane no. 4London, Park Lane no. 4London, Park Lane no. 4London, Park Lane no. 4London, Park Lane no. 4London, Park Lane no. 4London, Park Lane no. 4London, Park Lane no. 4London, Park Lane no. 4London, Park Lane no. 4London, Park Lane no. 4London, Park Lane no. 4London, Park Lane no. 4action
Edward King 532London, Park Lane no. 5London, Park Lane no. 5London, Park Lane no. 5London, Park Lane no. 5London, Park Lane no. 5London, Park Lane no. 5London, Park Lane no. 5London, Park Lane no. 5London, Park Lane no. 5London, Park Lane no. 5London, Park Lane no. 5London, Park Lane no. 5London, Park Lane no. 5London, Park Lane no. 5London, Park Lane no. 5London, Park Lane no. 5London, Park Lane no. 5London, Park Lane no. 5London, Park Lane no. 5London, Park Lane no. 5action
Edward King 632London, Park Lane no. 6London, Park Lane no. 6London, Park Lane no. 6London, Park Lane no. 6London, Park Lane no. 6London, Park Lane no. 6London, Park Lane no. 6London, Park Lane no. 6London, Park Lane no. 6London, Park Lane no. 6London, Park Lane no. 6London, Park Lane no. 6London, Park Lane no. 6London, Park Lane no. 6London, Park Lane no. 6London, Park Lane no. 6London, Park Lane no. 6London, Park Lane no. 6London, Park Lane no. 6London, Park Lane no. 6action
Edward King 732London, Park Lane no. 7London, Park Lane no. 7London, Park Lane no. 7London, Park Lane no. 7London, Park Lane no. 7London, Park Lane no. 7London, Park Lane no. 7London, Park Lane no. 7London, Park Lane no. 7London, Park Lane no. 7London, Park Lane no. 7London, Park Lane no. 7London, Park Lane no. 7London, Park Lane no. 7London, Park Lane no. 7London, Park Lane no. 7London, Park Lane no. 7London, Park Lane no. 7London, Park Lane no. 7London, Park Lane no. 7action
Edward King 832London, Park Lane no. 8London, Park Lane no. 8London, Park Lane no. 8London, Park Lane no. 8London, Park Lane no. 8London, Park Lane no. 8London, Park Lane no. 8London, Park Lane no. 8London, Park Lane no. 8London, Park Lane no. 8London, Park Lane no. 8London, Park Lane no. 8London, Park Lane no. 8London, Park Lane no. 8London, Park Lane no. 8London, Park Lane no. 8London, Park Lane no. 8London, Park Lane no. 8London, Park Lane no. 8London, Park Lane no. 8action
Edward King 932London, Park Lane no. 9London, Park Lane no. 9London, Park Lane no. 9London, Park Lane no. 9London, Park Lane no. 9London, Park Lane no. 9London, Park Lane no. 9London, Park Lane no. 9London, Park Lane no. 9London, Park Lane no. 9London, Park Lane no. 9London, Park Lane no. 9London, Park Lane no. 9London, Park Lane no. 9London, Park Lane no. 9London, Park Lane no. 9London, Park Lane no. 9London, Park Lane no. 9London, Park Lane no. 9London, Park Lane no. 9action
  • 1
  • 2
  • 3
  • 4
  • 5
  • •••
  • 10
  • 10 条/页
固定头和列

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

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

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Columns displayed
Column 1Column 2Column 3Column 4Column 5Column 6Column 7Column 8
New York ParkNew York ParkNew York ParkNew York ParkNew York ParkNew York ParkNew York ParkNew York Park
London ParkLondon ParkLondon ParkLondon ParkLondon ParkLondon ParkLondon ParkLondon Park
  • 1
隐藏列

使用 hidden 隐藏列。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.13.0
Name
OtherCompanyGender
Age
AddressCompany AddressCompany Name
StreetBlock
BuildingDoor No.
 
 
 
 
 
 
 
 
John Brown1Lake ParkC2035Lake Street 42SoftLake CoM
John Brown2Lake ParkC2035Lake Street 42SoftLake CoM
John Brown3Lake ParkC2035Lake Street 42SoftLake CoM
John Brown4Lake ParkC2035Lake Street 42SoftLake CoM
John Brown5Lake ParkC2035Lake Street 42SoftLake CoM
John Brown6Lake ParkC2035Lake Street 42SoftLake CoM
John Brown7Lake ParkC2035Lake Street 42SoftLake CoM
John Brown8Lake ParkC2035Lake Street 42SoftLake CoM
John Brown9Lake ParkC2035Lake Street 42SoftLake CoM
John Brown10Lake ParkC2035Lake Street 42SoftLake CoM
  • 1
  • 2
  • 3
  • 4
  • 5
  • •••
  • 10
  • 10 条/页
表头分组

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
nameageaddressoperation
Edward King 0
32London, Park Lane no. 0Delete
Edward King 1
32London, Park Lane no. 1Delete
  • 1
可编辑单元格

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
nameageaddressoperation
Edward 032London Park no. 0Edit
Edward 132London Park no. 1Edit
Edward 232London Park no. 2Edit
Edward 332London Park no. 3Edit
Edward 432London Park no. 4Edit
Edward 532London Park no. 5Edit
Edward 632London Park no. 6Edit
Edward 732London Park no. 7Edit
Edward 832London Park no. 8Edit
Edward 932London Park no. 9Edit
  • 1
  • 2
  • 3
  • 4
  • 5
  • •••
  • 10
  • 10 条/页
可编辑行

带行编辑功能的表格。

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
NamePlatformVersionUpgradedCreatorDateAction
ScreeniOS10.3.4.5654500Jack2014-12-24 23:12:00Publish
DateNameStatusUpgrade StatusAction
2014-12-24 23:12:00This is production nameFinishedUpgraded: 56
Pause
Stop
More
2014-12-24 23:12:00This is production nameFinishedUpgraded: 56
Pause
Stop
More
2014-12-24 23:12:00This is production nameFinishedUpgraded: 56
Pause
Stop
More
ScreeniOS10.3.4.5654500Jack2014-12-24 23:12:00Publish
ScreeniOS10.3.4.5654500Jack2014-12-24 23:12:00Publish
  • 1
NamePlatformVersionUpgradedCreatorDateAction
ScreeniOS10.3.4.5654500Jack2014-12-24 23:12:00Publish
DateNameStatusUpgrade StatusAction
2014-12-24 23:12:00This is production nameFinishedUpgraded: 56
Pause
Stop
More
2014-12-24 23:12:00This is production nameFinishedUpgraded: 56
Pause
Stop
More
2014-12-24 23:12:00This is production nameFinishedUpgraded: 56
Pause
Stop
More
ScreeniOS10.3.4.5654500Jack2014-12-24 23:12:00Publish
ScreeniOS10.3.4.5654500Jack2014-12-24 23:12:00Publish
  • 1
NamePlatformVersionUpgradedCreatorDateAction
ScreeniOS10.3.4.5654500Jack2014-12-24 23:12:00Publish
DateNameStatusUpgrade StatusAction
2014-12-24 23:12:00This is production nameFinishedUpgraded: 56
Pause
Stop
More
2014-12-24 23:12:00This is production nameFinishedUpgraded: 56
Pause
Stop
More
2014-12-24 23:12:00This is production nameFinishedUpgraded: 56
Pause
Stop
More
ScreeniOS10.3.4.5654500Jack2014-12-24 23:12:00Publish
ScreeniOS10.3.4.5654500Jack2014-12-24 23:12:00Publish
  • 1
嵌套子表格

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
NameAgeAddress
John Brown32Long 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 Green42London No. 1 Lake Park
Joe Black32Sidney No. 1 Lake Park
  • 1
拖拽排序

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
NameGenderAgeEmailAddress
John Brownmale32John Brown@example.comLondon No. 1 Lake Park
Jim Greenfemale42jimGreen@example.comLondon No. 1 Lake Park
Joe Blackfemale32JoeBlack@example.comSidney No. 1 Lake Park
George Hccmale20george@example.comSidney No. 1 Lake Park
  • 1
列拖拽排序

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
NameAgeAddress
John Brown32Long text Long
Jim Green42London No. 1 Lake Park
Joe Black32Sidney No. 1 Lake Park
  • 1
拖拽手柄列

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Date
Amount
TypeNoteAction
2018-02-11120incometransferDelete
2018-03-11243incometransferDelete
2018-04-1198incometransferDelete
  • 1
可伸缩列

集成 react-resizable 来实现可伸缩列。如果有排序需要，可以通过额外标记阻止触发排序。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
NameAgeAddressLong Column Long Column Long ColumnLong Column Long ColumnLong Column
John Brown32New York No. 1 Lake Park, New York No. 1 Lake ParkNew York No. 1 Lake Park, New York No. 1 Lake ParkNew York No. 1 Lake Park, New York No. 1 Lake ParkNew York No. 1 Lake Park, New York No. 1 Lake Park
Jim Green42London No. 2 Lake Park, London No. 2 Lake ParkLondon No. 2 Lake Park, London No. 2 Lake ParkLondon No. 2 Lake Park, London No. 2 Lake ParkLondon No. 2 Lake Park, London No. 2 Lake Park
Joe Black32Sydney No. 1 Lake Park, Sydney No. 1 Lake ParkSydney No. 1 Lake Park, Sydney No. 1 Lake ParkSydney No. 1 Lake Park, Sydney No. 1 Lake ParkSydney No. 1 Lake Park, Sydney No. 1 Lake Park
  • 1
单元格自动省略

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

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
NameAgeAddressLong Column Long Column Long ColumnLong Column Long ColumnLong Column
John Brown32New York No. 1 Lake Park, New York No. 1 Lake ParkNew York No. 1 Lake Park, New York No. 1 Lake ParkNew York No. 1 Lake Park, New York No. 1 Lake ParkNew York No. 1 Lake Park, New York No. 1 Lake Park
Jim Green42London No. 2 Lake Park, London No. 2 Lake ParkLondon No. 2 Lake Park, London No. 2 Lake ParkLondon No. 2 Lake Park, London No. 2 Lake ParkLondon No. 2 Lake Park, London No. 2 Lake Park
Joe Black32Sydney No. 1 Lake Park, Sydney No. 1 Lake ParkSydney No. 1 Lake Park, Sydney No. 1 Lake ParkSydney No. 1 Lake Park, Sydney No. 1 Lake ParkSydney No. 1 Lake Park, Sydney No. 1 Lake Park
  • 1
自定义单元格省略提示

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Name
Age
Address
Edward King 032London, Park Lane no. 0
Edward King 133London, Park Lane no. 1
Edward King 234London, Park Lane no. 2
Edward King 335London, Park Lane no. 3
Edward King 436London, Park Lane no. 4
  • 1
自定义空状态

自定义空状态。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
NameBorrowRepayment
John Brown1033
Jim Green1000
Joe Black1010
Jim Red7545
Total19588
Balance107
NameDescription
 
 
LightEverything that has a beginning, has an end.
BambooEverything that has a beginning, has an end.
LittleEverything that has a beginning, has an end.
LightEverything that has a beginning, has an end.
BambooEverything that has a beginning, has an end.
LittleEverything that has a beginning, has an end.
LightEverything that has a beginning, has an end.
BambooEverything that has a beginning, has an end.
LittleEverything that has a beginning, has an end.
LightEverything that has a beginning, has an end.
BambooEverything that has a beginning, has an end.
LittleEverything that has a beginning, has an end.
LightEverything that has a beginning, has an end.
BambooEverything that has a beginning, has an end.
LittleEverything that has a beginning, has an end.
LightEverything that has a beginning, has an end.
BambooEverything that has a beginning, has an end.
LittleEverything that has a beginning, has an end.
LightEverything that has a beginning, has an end.
BambooEverything that has a beginning, has an end.
SummaryThis is a summary content
总结栏

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
IDFistNameLastNameGroupAgeAddress 1Address 2Address 3Action
0
First_0
Last_0
25
London No. 0 Lake Park
Sydney No. 0 Lake Park
Action1
Action2
1
First_1
Last_1
26
New York No. 1 Lake Park
London No. 1 Lake Park
Sydney No. 1 Lake Park
Action1
Action2
2
First_2
Last_2
27
New York No. 2 Lake Park
London No. 2 Lake Park
Sydney No. 2 Lake Park
Action1
Action2
3
First_3
Last_3
28
New York No. 3 Lake Park
London No. 3 Lake Park
Sydney No. 3 Lake Park
Action1
Action2
4
First_4
Last_4
29
London No. 4 Lake Park
Sydney No. 4 Lake Park
Action1
Action2
5
First_5
Last_5
30
New York No. 5 Lake Park
London No. 5 Lake Park
Sydney No. 5 Lake Park
Action1
Action2
6
First_6
Last_6
31
New York No. 6 Lake Park
London No. 6 Lake Park
Sydney No. 6 Lake Park
Action1
Action2
7
First_7
Last_7
32
New York No. 7 Lake Park
London No. 7 Lake Park
Sydney No. 7 Lake Park
Action1
Action2
8
First_8
Last_8
33
London No. 8 Lake Park
Sydney No. 8 Lake Park
Action1
Action2
9
First_9
Last_9
34
New York No. 9 Lake Park
London No. 9 Lake Park
Sydney No. 9 Lake Park
Action1
Action2
Group 0
Group 1
Group 2
虚拟列表

通过 virtual 开启虚拟滚动，此时 scroll.x 与 scroll.y 必须设置且为 number 类型。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.9.0
Name (all screens)
John Brown
  • 1
响应式

响应式配置列的展示。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
cool
NamePlatformVersionUpgradedCreatorDateAction
ScreemiOS10.3.4.5654500Jack2014-12-24 23:12:00Publish
ScreemiOS10.3.4.5654500Jack2014-12-24 23:12:00Publish
ScreemiOS10.3.4.5654500Jack2014-12-24 23:12:00Publish
cool
  • 1
嵌套带边框的表格 Debug

看看边框的样式是不是影响到别的表格。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
  • 1
NameAgeAddressTagsAction
John Brown32New York No. 1 Lake ParkNICEDEVELOPER
Invite John Brown
Delete
Jim Green42London No. 1 Lake ParkLOSER
Invite Jim Green
Delete
Joe Black32Sydney No. 1 Lake ParkCOOLTEACHER
Invite Joe Black
Delete
  • 1
分页设置

表格的分页设置。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Name
false: Edward King 0
Another Row
false: Edward King 2
Another Row
false: Edward King 4
Another Row
false: Edward King 6
Another Row
false: Edward King 8
Another Row
  • 1
  • 2
  • 3
  • 4
  • 5
自定义选择项组

自定义选项分组。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Full NameAgeColumn 1Column 2Column 3Column 4Column 5Column 6Column 7Column 8Action
 
 
 
 
 
 
 
 
 
 
 
Edward 032London Park no. 0London Park no. 0London Park no. 0London Park no. 0London Park no. 0London Park no. 0London Park no. 0London Park no. 0action
Edward 132London Park no. 1London Park no. 1London Park no. 1London Park no. 1London Park no. 1London Park no. 1London Park no. 1London Park no. 1action
Edward 232London Park no. 2London Park no. 2London Park no. 2London Park no. 2London Park no. 2London Park no. 2London Park no. 2London Park no. 2action
Edward 332London Park no. 3London Park no. 3London Park no. 3London Park no. 3London Park no. 3London Park no. 3London Park no. 3London Park no. 3action
Edward 432London Park no. 4London Park no. 4London Park no. 4London Park no. 4London Park no. 4London Park no. 4London Park no. 4London Park no. 4action
Edward 532London Park no. 5London Park no. 5London Park no. 5London Park no. 5London Park no. 5London Park no. 5London Park no. 5London Park no. 5action
Edward 632London Park no. 6London Park no. 6London Park no. 6London Park no. 6London Park no. 6London Park no. 6London Park no. 6London Park no. 6action
Edward 732London Park no. 7London Park no. 7London Park no. 7London Park no. 7London Park no. 7London Park no. 7London Park no. 7London Park no. 7action
Edward 832London Park no. 8London Park no. 8London Park no. 8London Park no. 8London Park no. 8London Park no. 8London Park no. 8London Park no. 8action
Edward 932London Park no. 9London Park no. 9London Park no. 9London Park no. 9London Park no. 9London Park no. 9London Park no. 9London Park no. 9action
Scroll ContextFix Right
  • 1
  • 2
  • 3
  • 4
  • 5
  • •••
  • 10
  • 10 条/页
随页面滚动的固定表头和滚动条

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Name
Age
Address
Action
John Brown2New York No. 0 Lake Park
Delete
More actions
John Brown12New York No. 1 Lake Park
Delete
More actions
John Brown22New York No. 2 Lake Park
Delete
More actions
John Brown32New York No. 3 Lake Park
Delete
More actions
John Brown42New York No. 4 Lake Park
Delete
More actions
John Brown52New York No. 5 Lake Park
Delete
More actions
John Brown62New York No. 6 Lake Park
Delete
More actions
John Brown72New York No. 7 Lake Park
Delete
More actions
John Brown82New York No. 8 Lake Park
Delete
More actions
John Brown92New York No. 9 Lake Park
Delete
More actions
Here is footer
  • 1
动态控制表格属性

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
NameAgeAddress
John Brown32New York No. 1 Lake Park
Jim Green42London No. 1 Lake Park
Joe Black32Sydney No. 1 Lake Park
  • 1
带下拉箭头的表头

调试使用。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Name
Age
Address
Action
John Brown2New York No. 0 Lake Park
Delete
More actions
John Brown12New York No. 1 Lake Park
Delete
More actions
John Brown22New York No. 2 Lake Park
Delete
More actions
John Brown32New York No. 3 Lake Park
Delete
More actions
John Brown42New York No. 4 Lake Park
Delete
More actions
John Brown52New York No. 5 Lake Park
Delete
More actions
John Brown62New York No. 6 Lake Park
Delete
More actions
John Brown72New York No. 7 Lake Park
Delete
More actions
John Brown82New York No. 8 Lake Park
Delete
More actions
John Brown92New York No. 9 Lake Park
Delete
More actions
Here is footer
  • 1
组件 Token

组件 Token

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
树形数据保留key测试

treeData Table 使用 CheckStrictly: false & preserveSelectedRowKeys: true 的示例

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
CheckStrictly:
preserveSelectedRowKeys:
NameAgeAddress
Edward 032London Park no. 0
Edward 132London Park no. 1
Edward 232London Park no. 2
Edward 332London Park no. 3
Edward 432London Park no. 4
  • 1
  • 2
  • 3