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

Question

我之前在 table 中使用过 show 属性 to show/hide 列，并且使用 react-table v7 效果很好。但是，最近我无法让它继续工作，因为我做了很多更改并且我的 table 非常复杂我不确定是什么原因造成的，也可能是 react-[=34 的更新=] 本身（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

为什么显示 'age' 列？

编辑深入研究 changelog 我现在了解到 show/hide 列确实发生了变化：

7.0.0-beta.28 Added the useColumnVisibility plugin as a core plugin along with several new instance and column-level methods to control column visibility Added the "column-hiding" example

但是，我仍然没有想出如何将 useColumnVisibility 挂钩应用到列，其方式与 show 过去的工作方式类似。 "column-hiding" 示例显示了如何使用复选框执行此操作，但对我的情况没有帮助（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,
      ...

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

Answer 2

我还对 show/hide 列使用 setHiddenColumns。但是，我使用 id 而不是返回 Header。我的代码：

...
  setHiddenColumns,
  flatColumns,
  headerGroups,
  state: { pageIndex, pageSize },
} = useTable({
  columns,
  data,
  initialState: { pageIndex: 0 },
  manualPagination: true,
  pageCount: controlledPageCount,
},
  useSortBy,
  usePagination
);

React.useEffect(() => {
const hiddenColumns = flatColumns.filter((column: any) => !column.show).map((column: any)=> column.id);
setHiddenColumns(hiddenColumns); }, []);

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

Has column show property stopped working in latest react-table v7?

react-table

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