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