React 表格底层原语 @rc-component/table 实战指南

React 表格底层原语 rc-component/table 实战指南【免费下载链接】table Low-level table primitives for React, maintained in the Ant Design ecosystem.项目地址: https://gitcode.com/gh_mirrors/tab/table写数据管理页面时Ant Design 的 Table 一旦对不上你的设计你往往会选择放弃定制。rc-component/table 是 Ant Design Table 底层用的表格原语组件固定列、可展开行、合计行、虚拟滚动都是它的一等公民样式层完全留给你自己。它不绑定任何 UI 风格你要做的是把它当成表格引擎来用。它能把哪些事从你手里接过去固定列和固定表头配fixed加scroll就行滚动同步、阴影边线都由内部处理不用写 CSS 定位可展开行一个expandable对象管住展开图标、展开内容、哪行可展开三件事合计行 Summary表尾的合计、小计行不用你自己拼tfoot虚拟滚动VirtualTable只渲染视口内的行几千行数据滚动不卡全程类型推断TableUser之后列的dataIndex写错字段名编译器直接报错源码在 src/ 下按 Header、Body、Footer、VirtualTable 分模块想改行为时知道该去翻哪块。高频场景从最小表格到虚拟滚动基础表格怎么起步定义一个接口列和数据都挂在上面这是全部配置import Table from rc-component/table; import type { ColumnsType } from rc-component/table; interface User { key: string; name: string; age: number; } const columns: ColumnsTypeUser [ { title: 姓名, dataIndex: name, key: name }, { title: 年龄, dataIndex: age, key: age, width: 80 }, ]; const data: User[] [{ key: 1, name: Jack, age: 28 }]; export default () TableUser columns{columns} data{data} /;rowKey默认读数据的key字段所以示例里每条记录都带了key。固定列加横向滚动遇到表格比容器宽、希望首列或操作列始终可见的情况给这些列设fixed再给表格设scroll.x。const columns: ColumnsTypeUser [ { title: 姓名, dataIndex: name, key: name, width: 120, fixed: left }, { title: 地址, dataIndex: address, key: address }, { title: 操作, key: action, width: 100, fixed: right }, ]; // 设了 scroll.x 才有横向滚动条固定列才能钉住 TableUser columns{columns} data{data} scroll{{ x: 1200 }} /;注意固定列必须显式写width这一点下面坑里再展开。可展开行怎么配每行点开看详情这种需求全部收敛在expandable里TableUser columns{columns} data{data} expandable{{ // 展开后渲染的整行内容 expandedRowRender: record div详情{record.detail}/div, // 没有详情的行不出现展开图标 rowExpandable: record !!record.detail, }} /旧的expandRowRender、defaultExpandedRowKeys这类散装 props 已经废弃统一收进expandable对象src/Table.tsx 顶部注释里列了完整的迁移清单。合计行和表尾报表类页面常用的共 N 条、合计金额用Summary组件直接挂在 Table 里import { Summary } from rc-component/table; TableUser columns{columns} data{data} Summary Summary.Row Summary.Cell colSpan{2}共 {data.length} 条/Summary.Cell Summary.Cell平均 {avgAge} 岁/Summary.Cell /Summary.Row /Summary /Table大数据量切虚拟滚动数据超过几千行、滚动开始掉帧时把Table换成VirtualTable加一个heightimport { VirtualTable } from rc-component/table; // 只渲染视口内的行3000 行和 30 行体感一致 VirtualTableUser columns{columns} data{data} height{400} scroll{{ x: 1200 }} fixed /fixed表示开启固定列支持。虚拟模式下的细节实现可以看 src/VirtualTable/。一个贯穿示例拼出用户管理表格假设你要做的是一个用户管理列表首列姓名固定、操作列固定、每行可展开看详情、底部有合计行。做法就是把上面四段配置叠在同一个 Table 上列定义里给姓名、操作列加width和fixed表格加scroll{{ x: 1200 }}让横向滚动生效加expandable配expandedRowRender用Summary子节点加合计行一个组件四个配置项不用写任何定位或滚动相关的 CSS。项目里 docs/examples/ 有 40 多个可运行的示例文件fixedColumns.tsx、expandedRowRender.tsx、stickyHeaderAndSummary.tsx分别对应上面几段改参数就能看到效果。踩过的坑和解法固定列没设width列宽错乱固定列不参与自动布局不写width时会塌缩或和其他列错位。触发条件用了fixed但列没设宽度。解法所有固定列显式给width。rowKey缺失导致展开状态错行rowKey默认取记录的key字段如果你的数据没有这个字段展开、hover 状态会挂错行。解法显式传rowKeyid或rowKey{r r.id}。嵌套字段写成字符串路径取不到值dataIndex: address.city是无效的它不做路径解析。解法用数组形式dataIndex: [address, city]支持任意深度。只设scroll.x表头会跟着内容滚走固定表头需要scroll.y参与布局只设x时纵向滚动表头和表体会脱节。解法需要吸顶表头就同时设y示例见 docs/examples/stickyHeader.tsx。下一步本地跑起来继续看想动源码或跑完整示例把仓库拉下来即可git clone https://gitcode.com/gh_mirrors/tab/table装好依赖后跑npm startdumi 站点会列出全部 demo。两个值得直接翻的地方docs/examples/固定列、虚拟滚动、RTL、拖拽排序等场景的完整实现src/hooks/useColumns、useExpand、useSticky这些内部钩子理解组件行为机制的最短路径需要更细的 API 说明从 src/interface.ts 的ColumnType定义入手每个字段的语义都有注释。【免费下载链接】table Low-level table primitives for React, maintained in the Ant Design ecosystem.项目地址: https://gitcode.com/gh_mirrors/tab/table创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考