Ant Design Table 组件完全指南数据展示、分页、排序筛选与行选择实战【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-designTable表格是 Ant Design 中用于展示行列数据的核心展示型组件。本指南以仓库 components/table/index.md 为主线结合组件源码与 20 余个官方 Demo系统讲解dataSource/columns的数据模型、rowSelection行选择、分页、排序筛选、展开行、树形数据以及行/列合并等全部核心能力并深入剖析其底层实现原理帮助你快速掌握在 React 项目中构建企业级复杂表格的完整方案。何时使用 Table根据官方文档的定义当你的业务场景满足以下任一条件时就应该考虑使用 Table当有大量结构化的数据需要展现时当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。Table 正是为“结构化的数据 复杂交互”而生它内置了本地排序、筛选、分页能力并允许通过render对单元格进行任意自定义渲染配合行选择与展开行几乎可以覆盖后台管理系统中的全部表格场景。快速上手三行代码渲染一张表使用 Table 的第一步是定义数据源与列配置。指定表格的数据源dataSource为一个数组同时通过columns数组描述每一列如何渲染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} /这是最简单的基本用法完整可运行示例见 components/table/demo/basic.md。其中dataSource是表格的数据数组必须为每一项指定唯一的key详见下文“注意”一节columns中title为列头文字dataIndex指明该列取数据项中的哪个字段key是 React 渲染数组时需要的标识。注dataSource在0.11.0版本后不再支持远程模式。远程数据需要自行通过onChange回调与服务端交互实现详见下文“远程加载与服务端排序筛选”。API 详解Table 组件参数Table 组件的完整参数如下与原文档一致并补充了源码中的默认值参数说明类型默认值rowSelection列表项是否可选择配置项Objectnullpagination分页器配置项参考 Pagination 组件设为 false 时不显示分页Object默认分页配置size表格尺寸default或smallStringdefaultdataSource数据数组Array[]columns表格列的配置描述具体项见下表Array-rowKey表格行 key 的取值Function(record, index): stringrecord.keyrowClassName表格行的类名Function(record, index): string-expandedRowRender额外的展开行Function-defaultExpandedRowKeys默认展开的行Array-onChange分页、排序、筛选变化时触发Function(pagination, filters, sorter)-loading页面是否加载中Booleanfalselocale默认文案设置目前包括排序、过滤、空数据文案Object见下方说明indentSize展示树形数据时每层缩进的宽度以 px 为单位Number15onRowClick处理行点击事件Function(record, index)-useFixedHeader是否固定表头Booleanfalsebordered是否展示外边框和列边框BooleanfalseshowHeader是否显示表头Booleantruefooter表格底部自定义渲染函数Function(currentPageData)-源码佐证默认值与内部行为在 components/table/index.jsx 的getDefaultProps中组件默认dataSource: []、useFixedHeader: false、rowSelection: null、size: large、loading: false、bordered: false、onChange: noop。内部的defaultPagination为{ pageSize: 10, current: 1, onChange: noop, onShowSizeChange: noop }index.jsx#L28-L33即不传pagination时默认每页 10 条、从第 1 页开始。此外indentSize在源码中的默认值是 20文档标注为 15实际以你传入的值或当前安装版本源码为准。locale的默认文案定义在 index.jsx#L21-L26const defaultLocale { filterTitle: 筛选, filterConfirm: 确定, filterReset: 重置, emptyText: 暂无数据, };loading为true时表格内容会被Spin组件包裹并显示加载动画index.jsx#L614-L622适合与服务端请求配合使用。Column 列配置列描述数据对象是columns中的一项参数说明类型默认值title列头显示文字String or React.Element-keyReact 需要的 key建议设置String-dataIndex列数据在数据项中对应的 keyString-render生成复杂数据的渲染函数参数分别为当前列的值、当前行数据、行索引return 里面可以设置表格行/列合并Function(text, record, index)-filters表头的筛选菜单项Array-onFilter本地模式下确定筛选的运行函数Function-filterMultiple是否多选Booleantruesorter排序函数本地排序使用一个函数需要服务端排序可设为 trueFunction or Boolean-colSpan表头列合并设置为 0 时不渲染Number-width列宽度String or Number-className列的 classNameString-从源码看columns中的每一项在渲染前会被归一化getColumnKey依次取column.key、column.dataIndex、下标作为该列的唯一标识index.jsx#L401-L403因此key与dataIndex至少提供一个。render(text, record, index)是使用频率最高的列配置官方 basic.md 示例中就用它把“操作”列渲染为超链接与按钮组合。rowSelection 选择功能的配置通过向rowSelection传入对象即可开启行选择第一列会自动渲染为联动的选择框demo 见 components/table/demo/row-selection.md参数说明类型默认值type多选/单选checkboxorradioStringcheckboxselectedRowKeys指定选中项的 key 数组需要和 onChange 进行配合Array[]onChange选中项发生变化时的回调Function(selectedRowKeys, selectedRows)-getCheckboxProps选择框的默认属性配置Function(record)-onSelect用户手动选择/取消选择某行的回调Function(record, selected, selectedRows)-onSelectAll用户手动选择/取消选择所有行的回调Function(selected, selectedRows, changeRows)-实现原理在 index.jsx#L345-L399 的renderRowSelection中组件会把一个key: selection-column的列插入到所有列的最前面当type radio时渲染Radio否则渲染带全选Checkbox的列。全选时会通过getCheckboxProps(item).disabled排除被禁用的行handleSelectAllRow。selectedRowKeys在源码中是受控与内部状态混合管理的当rowSelection.selectedRowKeys传入时由外部控制componentWillReceiveProps此时必须配合onChange更新它否则选中态不会响应。选择框属性配置getCheckboxProps(record)返回的disabled可禁止某行被勾选defaultChecked可设置默认选中见 components/table/demo/row-selection-props.mdconst rowSelection { getCheckboxProps(record) { return { disabled: record.name 胡彦祖, // 配置无法勾选的列 }; }, };单选模式设置rowSelection{{ type: radio }}即可把选择框切换为单选框此时handleRadioSelect会将selectedRowKeys重置为只包含当前行index.jsx#L210-L227。分页本地分页与完全关闭表格默认开启分页每页 10 条见源码defaultPagination。数据项较多时显示分页官方 paging.md 演示了 46 条数据的分页效果const data []; for (let i 0; i 46; i) { data.push({ key: i, name: 李大嘴${i}, age: 32, address: 西湖区湖底公园${i}号 }); } const pagination { total: data.length, showSizeChanger: true, onShowSizeChange(current, pageSize) { console.log(Current: , current, ; PageSize: , pageSize); }, onChange(current) { console.log(Current: , current); } }; Table columns{columns} dataSource{data} pagination{pagination} /pagination支持 Pagination 组件 的全部配置项如pageSize、current、total、showSizeChanger等。关闭分页传入pagination{false}即可此时表格将完整显示dataSource内的全部数据不进行任何分页components/table/demo/nopagination.md。从源码看hasPagination()在pagination ! false时返回 trueindex.jsx#L126-L128关闭分页后getCurrentPageData会把pageSize设为Number.MAX_VALUE从而一次展示全部数据index.jsx#L515-L538。排序与筛选本地处理原理本地排序给列配置sorter函数即可开启本地排序表头会出现上下箭头按钮const columns [{ title: 年龄, dataIndex: age, sorter: (a, b) a.age - b.age, }];实现原理toggleSortOrderindex.jsx#L130-L163负责切换升序ascend/降序descend/不排序三种状态同一时刻只允许一列参与排序避免排序顺序逻辑混乱。排序比较器会把sorter的结果按descend取反并在结果相等时用原始下标a.index - b.index保证排序稳定即相等元素保持原顺序。被排序的列会附加ant-table-column-sort样式类排序箭头通过caret-up/caret-down图标渲染index.jsx#L429-L454。排序后的数据在getLocalData中处理先data.slice(0)拷贝为每条数据打上index下标再执行data.sort(state.sorter)index.jsx#L544-L554。本地筛选给列配置filters菜单项与onFilter函数即可开启表头筛选const columns [{ title: 姓名, dataIndex: name, filters: [ { text: 姓李的, value: 李 }, { text: 姓胡的, value: 胡 }, ], onFilter: (value, record) record.name.indexOf(value) 0, }];filters为筛选菜单项数组每项包含text显示文本与value筛选值onFilter在本地模式下根据value与record判断某行是否保留filterMultiple默认true多选设为false后菜单将变为单选。筛选菜单由 components/table/filterDropdown.jsx 实现基于DropdownMenuCheckbox构建菜单底部提供“确定 / 重置”按钮文案来自locale.filterConfirm/locale.filterReset关闭菜单时会自动应用当前选择onVisibleChange。多级筛选值通过children字段支持子菜单结构renderMenus。筛选逻辑在getLocalData中执行对每个有筛选值的列用col.onFilter(v, record)对数据逐条过滤index.jsx#L556-L569。需要注意切换筛选或分页后已选中的行会被清空setSelectedRowKeys([])。onChange 回调分页、排序、筛选中的任意一项变化都会触发onChange(pagination, filters, sorter)。从prepareParamsArgumentsindex.jsx#L497-L509可以看出第三个参数的形态// 触发排序后 sorter 的结构 sorter { field: column.dataIndex, // 当前排序列 order: ascend | descend, // 排序方向 };远程加载与服务端排序筛选dataSource远程模式在0.11.0被移除后官方推荐通过onChange自行接管数据请求。核心思路是列不需要指定具体的onFilter和sorter函数而是把分页、筛选、排序参数发给服务端处理再把返回数据放回dataSource。见 components/table/demo/ajax.mdconst columns [{ title: 姓名, dataIndex: name, filters: [ { text: 姓李的, value: 李 }, { text: 姓胡的, value: 胡 }, ], }, { title: 年龄, dataIndex: age, sorter: true, // 服务端排序时只需设为 true无需排序函数 }, { title: 住址, dataIndex: address, }]; handleTableChange(pagination, filters, sorter) { // 把分页、筛选、排序参数发送给服务端 this.fetch({ pageSize: pagination.pageSize, currentPage: pagination.current, sortField: sorter.field, sortOrder: sorter.order, ...filters, }); } fetch(params {}) { this.setState({ loading: true }); reqwest({ url: /api/table, data: params }) .then(result { this.setState({ loading: false, data: result.data, pagination: { ...this.state.pagination, total: result.total }, }); }); }配套地将loading传给 Table 即可在请求期间展示加载动画。这种模式把“数据获取”与“数据展示”解耦开发者可以自由接入 axios、fetch 等任何请求方案。展开行与树形数据展开行当表格内容较多不能一次性完全展示时可以通过expandedRowRender为每行渲染一个可展开的附加区域见 components/table/demo/expand.mdTable columns{columns} expandedRowRender{record p{record.description}/p} dataSource{data} /配合defaultExpandedRowKeys数组值为行的 key可以指定默认展开的行。展开按钮默认渲染在第一列若同时开启了行选择会顺延到第二列源码中通过expandIconColumnIndex动态计算见 index.jsx#L609。树形数据当数据项包含children字段时Table 自动以树形结构展示并通过indentSize控制每一层缩进的宽度以 px 为单位完整示例见 components/table/demo/expand-children.mdconst data [{ key: 1, name: a, age: 32, address: 我是a, children: [{ key: 11, name: aa, age: 33, address: 我是aa, }, { key: 12, name: ab, age: 33, address: 我是ab, children: [/* 可无限嵌套 */], }], }, { key: 2, name: b, age: 32, address: 我是b, }];注当前版本暂不支持父子数据递归关联选择即选中父节点不会自动联动选中所有子节点。与树形选择相关的实现细节行选择在计算“当前页已选数据”时会通过 components/table/util.js 中的flatArray把树形数据递归展平为平铺数组默认递归字段名为children因此getFlatCurrentPageData返回的selectedRows是包含子节点的完整列表。行/列合并render 的高级用法表格支持行/列合并规则如下完整示例见 components/table/demo/colspan-rowspan.md表头只支持列合并使用 column 里的colSpan进行设置设为 0 时不渲染单元格支持行/列合并在render中返回{ children, props: { colSpan, rowSpan } }结构rowSpan/colSpan设为 0 时该单元格不渲染即被合并掉。const renderContent function (value, row, index) { let obj { children: value, props: {} }; if (index 4) { obj.props.colSpan 0; // 第 5 行该单元格被合并掉 } return obj; }; const columns [{ title: 姓名, dataIndex: name, render(text, row, index) { if (index 4) { return a href#{text}/a; } return { children: a href#{text}/a, props: { colSpan: 5 } // 第 5 行合并 5 列 }; } }, { title: 年龄, dataIndex: age, render: renderContent }, { title: 家庭电话, colSpan: 2, // 表头列合并 dataIndex: tel, render(value, row, index) { let obj { children: value, props: {} }; if (index 2) { obj.props.rowSpan 2; // 第 3 行行合并 2 行 } if (index 3) { obj.props.rowSpan 0; // 第 4 行被合并掉 } if (index 4) { obj.props.colSpan 0; } return obj; } }, { title: 手机号, colSpan: 0, // 表头该列不渲染 dataIndex: phone, render: renderContent }];这是实现“合并单元格”类报表需求如跨列合计、跨行分组表头的官方推荐方式。注意key 是表格稳定渲染的前提按照 React 的规范所有组件数组必须绑定 key。在 Table 中dataSource和columns里的数据值都需要指定key值。对于dataSource默认将每列数据的key属性作为唯一的标识。如果你的数据没有key属性务必使用rowKey来指定数据列的主键。若没有指定控制台会出现 React 关于 key 的警告提示表格组件也会出现各类奇怪的错误如选中错乱、展开行失效、渲染性能下降等。// 比如你的数据主键是 uid return Table rowKey{record record.uid} /;实现依据rowKey在源码中通过getRecordKey(record, index)生效——如果传入了rowKey函数则调用它取值否则回退为record.key再退一步才使用行下标indexindex.jsx#L338-L343。rowKey返回值将作为选中项、展开行、排序筛选时定位数据行的唯一标识因此主键稳定且唯一至关重要。columns中的key同理getColumnKey会按key→dataIndex→ 下标 的顺序取值index.jsx#L401-L403。底层实现速览Ant Design 的 Table 是对rc-table的二次封装见 index.jsx#L2import Table from rc-table在此基础上补齐了企业级表格最常用的能力行选择注入selection-column列复用 Checkbox / Radio 组件支持全选、禁用行排除与单选模式排序与筛选在getLocalData中统一完成本地排序与筛选的管线化处理并将结果通过onChange对外暴露为服务端模式留出接口分页内部维护pagination状态默认pageSize: 10复用 Pagination 组件支持受控current加载态loading时用 Spin 包裹表格并依据是否分页追加ant-table-with-pagination/ant-table-without-pagination样式类样式组件样式集中在 style/components/table.less表头、边框、尺寸default/small、排序高亮列ant-table-column-sort、空数据占位ant-table-placeholder等均由该样式文件定义。官方还提供了丰富的场景化 Demo 供参考行选择与操作列组合row-selection-and-operation.md、固定表头fixed-header.md、服务端加载ajax.md、分页列控制paging-columns.md以及尺寸size.md等均位于 components/table/demo/ 目录下是学习该组件的最佳实践素材。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考