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

Question

是否可以在列单元格内呈现图标，而无需任何其他来自 table 为其他 table 值提取的来源的相应数据？我只是想在每一行的末尾制作一列 right-facing 箭头。 FWIW，这个附加列应该有一个空白 header。

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

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

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

Answer 1

如错误所述，您的每个列都需要一个 id 字段或一个 accessor 字段，它是一个字符串。这就是 react-table 可以用来识别每一列的东西。只要您不想访问数据数组中的任何字段，就应该使用 id 字段。这样的事情应该有效：

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

您还应该包括 Header: "" 以用空字符串填充列 header。

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

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

How to create a column of cells that only contain icons using React Table library?

reactjs

react-table

react-table-v7