定义列并渲染行
使用访问器、表头和单元格渲染器配置列定义，以显示数据
定义列并渲染行 是 CoddyKit 上的免费 React Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。
ColumnDef 类型
TanStack Table 中的每一列都由一个 ColumnDef 对象描述。最重要的两个字段是 accessorKey（数据对象中的属性名称）和 header（列标签字符串或渲染函数）。
对于扁平数据，accessorKey 方法最为理想；复杂值或计算值则需要使用 accessorFn。
accessorKey 与 accessorFn
当数据中有 name 或 email 这样的直接属性时，请使用 accessorKey: 'name'。当您需要计算值时（例如组合 firstName 和 lastName），请使用 accessorFn: row => row.firstName + ' ' + row.lastName。
为 ColumnDef 提供行数据泛型后，两者都能获得完整的类型支持。
使用 cell 自定义单元格渲染
ColumnDef 中的 cell 字段接受一个接收单元格上下文并返回 JSX 的函数。您可以通过它在单元格中渲染徽章、按钮、图片或任何自定义界面。
对于纯文本值，cell.renderValue() 就足够了。对于更丰富的内容，请从 cell.getContext() 中解构所需信息。
构建 columns 数组
请在组件外定义 columns，以避免每次渲染时重新创建它。将该数组与 data 和 getCoreRowModel 一起传给 useReactTable。
为 ColumnDef 标注数据类型后，TypeScript 会推断列类型，并为 accessorKey 值提供自动补全。
getCoreRowModel 详解
getCoreRowModel 是从 @tanstack/react-table 导入的工厂函数。您需要将它的返回值传给 useReactTable，以告知实例如何根据数据数组构建基本的行列表。
通过传入额外的模型工厂函数，可以在此基础上叠加其他行模型（排序、筛选和分页）。
使用 getHeaderGroups 渲染 thead
调用 table.getHeaderGroups()，并遍历结果来渲染 thead。每个表头组都有一个 headers 数组；每个表头都有一个列定义和一个 id。
使用 flexRender(header.column.columnDef.header, header.getContext()) 渲染表头内容，无论内容是字符串还是返回 JSX 的函数。
使用 getRowModel 渲染 tbody
调用 table.getRowModel().rows，并将每一行映射为一个 tr 元素。在其中调用 row.getVisibleCells()，再将每个单元格映射为一个 td。
使用 flexRender(cell.column.columnDef.cell, cell.getContext()) 渲染单元格内容，同时保留列中定义的任何自定义单元格渲染器。
flexRender 工具函数
flexRender 是一个辅助工具，可以接收 React 组件、返回 JSX 的函数或普通值，并以一致的方式进行渲染。借助它，列定义中的表头和单元格既可以使用简单字符串，也可以使用完整的渲染函数。
这种统一的 API 意味着您无需在渲染前检查定义的类型。
单元格上下文与 renderValue
cell.renderValue() 会将原始 accessor 值格式化为字符串并返回。若需要更多控制，cell.getContext() 会提供完整的渲染上下文，其中包括行、列、表格实例和原始值。
自定义单元格渲染器可以利用该上下文访问单个 accessor 值之外的相关行数据。
列固定与元数据
每个 ColumnDef 都接受一个 meta 字段，您可以在其中附加任意元数据，例如 isSticky: true 或 alignment: 'right'。在渲染器中通过 column.columnDef.meta 访问这些元数据。
要将列固定在左侧或右侧，TanStack Table 提供了列固定状态以及列对象上的辅助方法。
整合所有内容
使用 accessorKey、header 和可选的 cell 定义 ColumnDef 数组。使用 data、columns 和 getCoreRowModel 调用 useReactTable。使用 getHeaderGroups 映射渲染 thead，使用 getRowModel().rows 映射渲染 tbody，并用 flexRender 渲染每个表头和单元格。
这一最小设置就能为您提供一个功能完整且样式完全自定义的表格。
accessorKey 与 accessorFn
在 TanStack Table 的列定义中，什么时候应使用 accessorFn 而不是 accessorKey？
课程回顾
使用 ColumnDef 定义列：直接字段使用 accessorKey，计算值使用 accessorFn。将 columns 和 getCoreRowModel 传给 useReactTable，然后使用 getHeaderGroups 渲染表头，使用 getRowModel().rows 渲染表格行。
flexRender 工具会统一处理字符串形式和函数形式的表头及单元格定义。
常见问题解答
「定义列并渲染行」课时是免费的吗？
是的 — 「定义列并渲染行」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。
「定义列并渲染行」这节课中我会学到什么？
使用访问器、表头和单元格渲染器配置列定义，以显示数据 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 React Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「定义列并渲染行」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 React Academy 课中编写并运行代码吗？
能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。