rc-table 从零实战3 个核心类型写出类型安全的 React 表格【免费下载链接】table Low-level table primitives for React, maintained in the Ant Design ecosystem.项目地址: https://gitcode.com/gh_mirrors/tab/table自己用 table 标签拼一个 React 表格光是对齐、固定列、展开行就能吃掉半天接一个全功能表格库又常要为用不上的样式和封装买单。rc-component/table 就是为这个痛点准备的它是 Ant Design 生态维护的 React 低层表格组件固定列、展开行、虚拟滚动都内置API 按 TypeScript 类型优先设计dataIndex 写错在编译期就能发现。先建立心智模型它是表格原语一句话定位rc-component/table 负责把数据按列结构渲染成语义正确的 table排序、筛选、主题这类业务层能力留给你自己组装。它和通用 UI 表格库的差别如下维度通用 UI 表格库rc-component/table定位开箱即用的业务组件无侵入的表格原语样式自带主题与装饰只带必要的基础样式扩展方式固定的封装 API泛型约束 components替换任意节点Ant Design 的 Table 就构建在它之上你在 antd 里看到的固定列、树形数据行为底层都是这套逻辑。 三步跑通最小表格第一步安装依赖npm install rc-component/table第二步写一个最小示例。关键是给ColumnsType指定数据泛型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, width: 120 }, { title: 年龄, dataIndex: age, key: age }, ]; const data: User[] [ { key: 1, name: Jack, age: 28 }, { key: 2, name: Rose, age: 36 }, ]; export default () Table columns{columns} data{data} /;第三步渲染它。你会看到一个原生 table两列数据直接显示没有多余样式。注意rowKey默认取数据里的key字段示例数据里已带上。三个必须理解的核心类型1. TableProps 的泛型参数TablePropsRecordType是整张表的入口类型定义在 src/Table.tsx。它只暴露一个泛型RecordTypedata和columns都由它约束// RecordType 确定后columns 与 data 的类型自动对齐 TableUser columns{columns} data{data} rowKeykey /漏写泛型时dataIndex 打错字、render 里 record 字段拼错编译器都会静默放过。这是类型失效最高发的一个点。2. ColumnsType 与 dataIndexColumnsTypeRecordType是普通列与分组列的数组类型定义在 src/interface.ts。两件事值得记住dataIndex支持嵌套路径取深层字段不用手写 renderrender签名固定为(value, record, index)record就是完整行数据。{ title: 城市, dataIndex: [address, city], // 嵌套路径直接取深层字段 key: city, }3. rowKey 与 GetRowKey行标识决定展开、滚动定位这些功能能否生效。rowKey可以是字段名默认key也可以是返回值的函数// 数据没有唯一 key 时用函数合成 rowKey{(record: User) ${record.dept}-${record.name}}函数类型即GetRowKeyRecordType签名是(record, index?) Key。 三个实用模式模式一固定列宽表只锁关键列场景管理后台有 10 列横向滚动时姓名要始终可见。要点是三件一套列上写fixed: start旧的left已废弃、该列必须有width、表格传scroll.x。const columns: ColumnsTypeUser [ { title: 姓名, dataIndex: name, key: name, fixed: start, width: 120 }, { title: 部门, dataIndex: dept, key: dept, width: 160 }, // ... 其余列 ]; Table columns{columns} data{data} scroll{{ x: 800 }} /存在 fixed 列时表格会自动切到 fixed 布局不需要手动设置tableLayout。模式二展开行一个 expandable 对象场景点行首图标查看该行详情。所有展开相关配置都收在expandable里旧的顶层 expandedXxx 属性已废弃Table columns{columns} data{data} expandable{{ expandedRowRender: (record) p{record.detail}/p, rowExpandable: (record) record.hasDetail, // 控制哪些行可展开 }} /expandedRowKeys受控和onExpand回调也都从这个对象出不用额外搭状态。模式三万行数据切到 VirtualTable场景一次性渲染两万行会卡死页面需要虚拟滚动。从同一个包导入VirtualTable此时scroll的 x、y 必须是数字import { VirtualTable } from rc-component/table; VirtualTable columns{columns} data{rows} listItemHeight{48} // 行高供虚拟列表做定位 scroll{{ x: 600, y: 400 }} /拿到 ref 后可以scrollTo({ index: 500 })直接跳到第 500 行注意虚拟模式不支持align: center。⚠️ 避坑清单5 个高频问题现象原因处理方式固定列不锁住横向滚动时跟着走fixed列缺width或未传scroll.x每个 fixed 列设 width表格传scroll{{ x: 数字 }}dataIndex 打错字TS 不报错ColumnsType没带泛型RecordType 退化写ColumnsTypeUser并在 Table 上指定泛型控制台提示 fixed 取值已废弃还在用旧写法left/right改成start/endVirtualTable 滚动位置异常x 或 y 传了 true、字符串等非数字值两者都传数字scrollTo 的 align 不用 center展开行、scrollTo 定位错乱数据没有key字段而 rowKey 默认取key显式设置rowKey字段名或函数落地建议先定RecordType泛型再写 columns 和 data顺序反过来类型会一路失效固定列三件套fixedwidthscroll.x一次配齐别分步调试展开、树形数据都依赖稳定 rowKey合成 key 时保证全局唯一数据量超过千行再上 VirtualTable普通表格不必为虚拟滚动多付复杂度。完整属性与列配置说明见 docs/index.md类型定义的源头在 src/interface.ts。遇到不确定的字段名直接查这两处比翻博客可靠。【免费下载链接】table Low-level table primitives for React, maintained in the Ant Design ecosystem.项目地址: https://gitcode.com/gh_mirrors/tab/table创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考