React table v8 - 如何渲染自定义单元格内容？

Question

我正在使用@tanstack/react-tablev8，我想在我的表格行单元格之一中添加一些图标和按钮。查看文档我可以使用显示列：

Display columns do not have a data model which means they cannot be sorted, filtered, etc, but they can be used to display arbitrary content in the table, eg. a row actions button, checkbox, expander, etc.

该文档还提到了有关单元格内容的自定义渲染的内容： By default, columns cells will display their data model value as a string. You can override this behavior by providing custom rendering implementations. ... You can provide a custom cell formatter by passing a function to the cell property ...

文档显示了单元格自定义渲染的示例：

columnHelper.accessor('firstName', {
  cell: props => <span>{props.getValue().toUpperCase()}</span>,
})

因此，我使用以下方法定义了一个显示列ColumnHelper：

columnHelper.display({
  id: "actions",
  cell: (props) => (
    <div className="w-10 h-10 bg-red">
      <span>actions?</span>
    </div>
  ),
}),

创建表时如何访问此渲染函数？我正在创建表体，如下所示（表变量由 useReactTable 挂钩返回）：

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

cell.getValue()并且cell.renderValue()不调用自定义渲染函数，并且我在单元格对象上没有看到任何其他渲染函数。我只是忽略了一些非常简单的事情吗？

Answer 1

事实证明我忽略了一些简单的事情。@tanstack/react-table导出一个用于渲染单元格的 flexRender 函数，例如

import {flexRender} from "@tanstack/react-table";

...

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