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

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 表文档中示例的代码和框。为了演示 ID 字段，我修改了 firstName 列以使用函数访问器而不是字符串访问器。 https://codesandbox.io/s/stupefied-ardinghelli-89j20?file=/src/App.js

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