列显示属性是否在最新的 react-table v7 中停止工作？

Question

我之前使用过 show 属性来显示/隐藏表中的列，并且使用 react-table v7 运行良好。但是，最近我无法让它继续工作，因为我进行了大量更改，而且我的表非常复杂，我不确定是什么原因造成的，可能也是 react-table 本身的更新（7.0.0- beta.12 到 7.0.0-rc.5）。

无论如何，现在我什至无法让最基本的展示示例起作用：

const columns = React.useMemo(
() => [
  {
    Header: "Info",
    columns: [
      {
        Header: "Age",
        accessor: "age",
        show: false
      },
      {
        Header: "Visits",
        accessor: "visits"
      }
    ]
  }
],
[]);

https://codesandbox.io/s/react-table-hide-column-2g3js

为什么显示“年龄”列？

编辑 挖掘更改日志我现在明白列显示/隐藏确实发生了变化：

7.0.0-beta.28添加了 useColumnVisibility 插件作为核心插件以及几个新的实例和列级方法来控制列可见性 添加了“列隐藏”示例

但是，我仍然没有弄清楚如何以类似于 show 过去工作方式的方式将 useColumnVisibility 挂钩应用于列。“列隐藏”示例显示了如何使用复选框进行操作，但对我的情况没有帮助（afaik）。

Answer 1

我在使用 show 时遇到了类似的问题。不是show在列中设置，而是设置initialState.hiddenColumns，在这里您可以将现有节目转换为初始隐藏列：

  useTable<T>(
    {
      columns,
      data,
      hiddenColumns: columns.filter(column => !column.show).map(column => column.id)
    },

我无法使用它，因为我的列是动态加载的（因此初始状态设置为一些不存在的列，并且只是设置为一个空数组）所以我使用了：

  React.useEffect(
    () => {
      setHiddenColumns(
        columns.filter(column => !column.show).map(column => column.id)
      );
    },
    [columns]
  );

哪里setHiddenColumns提供useTable：

const {
    headerGroups,
    rows,
    prepareRow,
    state,
    toggleRowSelected,
    toggleAllRowsSelected,
    setHiddenColumns
  } = useTable<T>(
    {
      columns,
      data,
      getRowId,
      ...

这意味着如果我更改列道具，它将反映在表格中。