@rc-component/table 完整上手：React 表格如何做到列配置与数据零错位
【免费下载链接】table📋 Low-level table primitives for React, maintained in the Ant Design ecosystem.项目地址: https://gitcode.com/gh_mirrors/tab/table
@rc-component/table是 Ant Design 生态中的 React 底层表格组件，也是 antd Table 的底层引擎。它通过TableProps<RecordType>和ColumnType<RecordType>两组泛型，把列配置和数据绑定在同一个类型上，写错dataIndex、漏配rowKey这类问题在编译期就能暴露大半。读完后你能独立搭出一个类型安全、支持固定列的表格，并知道如何裁剪出适合自己业务的 Table 实例。
先想清楚它解决什么问题
两个高频翻车现场：
dataIndex拼错或指向不存在的字段。JS 下表格静默渲染一列空单元格，没有任何报错，排查全靠肉眼对字段。- 列配置是手工数组，和数据结构完全脱钩。加一列不改类型、删一列不提示，改着改着配置和数据就对不上了。
@rc-component/table的思路是把这两件事绑死：<Table<RecordType>>的泛型参数同时约束columns和data，渲染回调里的record自动推断为RecordType。
3 步跑起来
装包并引入基础样式（React ≥ 18）：
npm install @rc-component/table然后按下面三步写第一个表格：
- 声明行数据类型，每行带一个稳定
key； - 用
TableProps<any>['columns']声明列，dataIndex对齐字段名； - 渲染
<Table<RecordType>>并传入columns与data。
import Table from '@rc-component/table'; import type { TableProps } from '@rc-component/table'; import '@rc-component/table/assets/index.less'; interface RecordType { a?: string; b?: string; } const data: RecordType[] = [ { a: '123', key: '1' }, { a: '456', b: 'x', key: '2' }, ]; const columns: TableProps<any>['columns'] = [ { title: 'A', dataIndex: 'a' }, { title: 'B', dataIndex: 'b' }, ]; export default () => <Table<RecordType> columns={columns} data={data} />;关键点：泛型RecordType只写一处，columns和data就同时被它约束，漏字段、错字段在编辑期就有提示。
核心 API 精讲：render 与嵌套取值
🔹render是每列的定制出口。三个参数全部有类型，不需要手写：
{ title: 'A', dataIndex: 'a', render: (value, record, index) => `${value}#${index}`, }value是dataIndex取出的值，record就是RecordType，index是行号，回调里可以直接安全地用record.b。
🔹 嵌套对象不用在render里一层层解包，dataIndex直接接收数组路径（见DataIndex类型定义）：
{ title: '城市', dataIndex: ['address', 'city'] }, { title: '街道', dataIndex: ['address', 'street'] },要点：多级取值交给dataIndex路径数组，render里拿到的value就是最内层的值。
固定列必须和横向滚动配对
给列加fixed之外，scroll.x要给出一个数值，固定效果才会生效：
const columns: TableProps<any>['columns'] = [ { title: 'ID', dataIndex: 'a', width: 80, fixed: 'start' }, { title: '说明', dataIndex: 'b' }, ]; <Table<RecordType> columns={columns} data={data} scroll={{ x: 800 }} />fixed取'start'/'end'（旧的'left'/'right'已弃用）。
避坑清单
现象：dataIndex 写错列整列空白，编译却不报错
原因：DataIndex允许字符串回退类型，单个字段拼错不会触发泛型检查。解决：把columns声明为ColumnsType<RecordType>并给data标上同款类型，让类型推断把列与数据连起来。
现象：行级动画、hover 错位，控制台刷 key 警告
原因：数据项既没有key/id，又没设rowKey，React diff 全靠数组位置。解决：给数据补稳定主键，或显式传rowKey="id"。
现象：列配了 fixed，滚动时却跟着内容一起滚
原因：缺少scroll.x，表格没进入横向滚动模式。解决：scroll里给一个数值，如scroll={{ x: 800 }}。
现象：几千行数据一打开就卡
原因：一次性渲染全部行。解决：换用同包的VirtualTable开启虚拟滚动，属性与Table基本一致。
进阶：用 genTable 裁剪自己的表格
包内除了默认Table，还导出了工厂函数genTable（genTable），接收一个 props 对比函数，决定何时触发重渲染：
import { genTable } from '@rc-component/table'; const Table = genTable((prevProps, nextProps) => prevProps.data !== nextProps.data);要点：业务侧包一层自己的 Table 时，用它定制更新策略，数据没变的行可以少渲染，这是 antd 底层优化常用的做法。
上手前检查清单
- ✅
RecordType只定义一次，columns与data全部从它派生 - ✅ 每行数据有稳定
key，或显式传了rowKey - ✅ 使用
fixed的列都配了scroll.x数值 - ✅ 大列表场景已评估
VirtualTable
更多示例与完整属性表见 docs/index.md，核心实现可从 src/Table.tsx 看起。跑通第一个表格后，建议直接照着 docs/examples/fixedColumns.tsx 把固定列加上。
【免费下载链接】table📋 Low-level table primitives for React, maintained in the Ant Design ecosystem.项目地址: https://gitcode.com/gh_mirrors/tab/table
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
