react-table 隐藏自定义访问器但包含在全局过滤中

Question

我正在使用 react-table，并且有一个自定义单元格循环遍历名为 'skus'

的关联记录数组

我想隐藏此列，但将其包括在内，以便它可以在搜索栏中用于全局筛选。我已经能够获取列中呈现的数据，并将其包含在全局搜索过滤器中。现在，我无法隐藏该列。

这里有 1 个列可以隐藏，而我正在循环的列没有隐藏：

   {
     Header: 'Category',
     accessor: 'brand.category.name',
     isVisible: false,
   },
   {
     Header: 'SKU',
     accessor: row => row.skus.map((sku) => `sku${sku.sku}`),
     isVisible: false,
   },

我正在使用此效果删除带有 isVisible: false 的列，适用于

React.useEffect(() => {
  setHiddenColumns(
    columns.filter(column => (column.isVisible === false)).map(column => column.accessor)
  );
}, [setHiddenColumns, columns]);

问题显然是我正在为访问器映射数组，但我不知道如何将其包含在全局过滤器中并隐藏该列。

Answer 1

我不太清楚SKU的结构是什么，但有几点需要注意：

SKU 列为其访问器使用了一个函数。根据文档，如果您具有作为访问器的功能，则 ID 字段是必需的。 https://react-table.tanstack.com/docs/api/useTable#column-options

为列设置 ID 后，您还可以通过将 ID 传递给 table 的初始状态来隐藏该列。假设您将列 ID 设置为“SKU”：

{
  id: 'SKU'
  Header: 'SKU',
  accessor: row => row.skus.map((sku) => `sku${sku.sku}`),
},

在您的 table 实例中，您可以传递隐藏列的初始状态，如下所示：

const {
  ...
} = useTable(
{
  columns,
  data,
  initialState: {
    hiddenColumns: ['SKU']
  }
},
useGlobalFilter
);

hiddenColumns 属性获取要隐藏的列的字符串 ID 数组。

这是一个使用 react-table 文档中示例的 codesandbox。为了演示 ID 字段，我修改了 firstName 列以使用函数访问器而不是字符串访问器。 https://codesandbox.io/s/stupefied-ardinghelli-89j20?file=/src/App.js

在 codesandbox 中，您可以取消隐藏 firstName 列，找到要搜索的值，重新隐藏 firstName 列，然后尝试搜索。它仍会搜索该列:)

react-table 隐藏自定义访问器但包含在全局过滤中

react-table hide custom accessor but include in global filtering

javascript

reactjs

react-table