如何解决如何使用 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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。