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 传递到表的初始状态来隐藏该列。假设您将列 ID 设置为“SKU”：

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

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

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列，然后尝试搜索。它仍然会在该列上搜索:)