React table v7 动态过滤/排序答案

【问题标题】：React table v7 dynamic filtering/sortingReact table v7 动态过滤/排序
【发布时间】：2021-09-03 22:49:36
【问题描述】：

我的反应表 v7 中有一个列，由于访问器基于我的数据，过滤不起作用，我希望在我的 ColumnFilter 上输入它时仍然能够搜索“未批准” .只有当数据中的approvedBy为null时才会显示notapproved的值。

      {
        Header: 'Approved By',
        accessor: 'approvedBy.fname',
        Filter: ColumnFilter,
        disableSortBy: true,
        Cell: e => {
          return (
            <>
              {e.row.original.approvedBy ? (
                `${e.row.original.approvedBy.fname} ${e.row.original.approvedBy.lname}`
              ) : (
                <Tag colorScheme="red">Not Approved</Tag>
              )}
            </>
          );
        },
      },

这是我的列过滤器组件。

function GlobalFilter({ column }) {
  const { filterValue, setFilter } = column;
  return (
    <Box>
      <Input
        my="1rem"
        placeholder="Search"
        value={filterValue || ''}
        onChange={e => setFilter(e.target.value)}
      />
    </Box>
  );
}

【问题讨论】：

标签： javascript reactjs react-table react-table-v7

【解决方案1】：

没有简单的方法可以做到这一点——你必须implement your own filter 来过滤你想要的方式。我也在一个项目中为一个非常相似的用例实现了一个。

那个，或者你可以改变你的data 数组，用“Not Approved”替换虚假的approvedBy 值，用“{fname} {lname}”替换真实的值。这意味着 react-table 现在实际上正在查看您希望它查看的数据，而不是 Object 或 false。实施起来也可能不方便，具体取决于您的数据结构。

【讨论】：