如何使用 React Table 库创建一列仅包含图标的单元格？

问题描述

是否可以在没有任何其他相应数据的情况下在列单元格内呈现图标，这些数据来自表为其他表值提取的源？我只是想在每行的末尾制作一列向右的箭头。 FWIW，这个附加列应该有一个空白标题。

以下是我目前尝试实现它的方式，这会导致 Error: A column ID (or string accessor) is required! 错误：

const columns = [
  {
    Header: 'First Name',accessor: 'firstName',},{
    Header: 'Last Name',accessor: 'lastName',{
    Cell: () => (<ArrowFacingRight />)
  },]

有人可以解释一下我如何去做我想要完成的事情吗？

解决方法

就像错误所说的那样，您的每一列都需要一个 id 字段或一个 accessor 字段，它是一个字符串。所以 react-table 有一些东西可以识别每一列。当您不尝试访问数据数组中的任何字段时，您应该使用 id 字段。这样的事情应该可以工作：

const columns = [
  {
    Header: 'First Name',accessor: 'firstName',},{
    Header: 'Last Name',accessor: 'lastName',{
    Header: "",id: "icon",Cell: () => (<ArrowFacingRight />)
  },]

您还应该包含 Header: "" 以使用空字符串填充列标题。

有关详细信息，请查看文档中列选项下的 id 部分：https://react-table.tanstack.com/docs/api/useTable#column-options