React Table v8：如何调用自定义单元格的渲染函数？

你的问题出在单元格渲染时调用的方法错误，正确做法是使用cell.renderCell()触发自定义cell渲染函数，而非cell.getValue()或cell.renderValue()，具体原因如下：

• cell.getValue()：仅适用于绑定数据字段的accessor列，展示列（display column）无对应数据模型，调用后返回undefined，无法触发自定义渲染逻辑。
• cell.renderValue()：用于对数据模型的值做格式化展示，依赖列的数据源，不适用于无数据模型的展示列。
• cell.renderCell()：专门用来触发列定义中配置的cell渲染函数，无论普通数据列还是展示列都能正常生效。

修改你的tbody渲染代码即可解决问题：

<tbody>
  {table.getRowModel().rows.map((row, index) => (
    <tr className={classNames(index % 2 !== 0 && "bg-tableRowGray")}>
      {row.getAllCells().map((cell) => (
        <td>{cell.renderCell()}</td>
      ))}
    </tr>
  ))}
</tbody>

额外补充：如果需要在自定义cell函数中获取当前行数据，可以通过props.row.original拿到原始行数据，方便绑定行相关操作逻辑，示例如下：

columnHelper.display({
  id: "actions",
  cell: (props) => (
    <div className="flex gap-2">
      <button onClick={() => handleEdit(props.row.original.id)}>编辑</button>
      <button onClick={() => handleDelete(props.row.original.id)}>删除</button>
    </div>
  ),
}),

内容的提问来源于stack exchange，提问作者Thijs