如何在React Table上显示和隐藏某些列？

Question

我创建了一个 React Table。我想通过用户操作隐藏或显示表中的某些列。默认情况下，所有列都应该可见，但我们将有一些复选框来隐藏或显示某些列。

假设我想显示 8 列中的 4 列。请建议我一种简单的技术来实现这一目标。

我的列标题数组是

  const columns = [
  {
Header: 'Column 1',
    columns: [
       {
           Header: 'S Column 1',
           accessor: 'firstName'
       }
  ]
    },
   {
  Header: 'Column 2',
   columns: [
     {
        Header: 'S Column 2',
        accessor: 'firstName'
      }
   ]
       },
     {
        Header: 'Column 3',
        columns: [
     {
        Header: 'S Column 3',
        accessor: 'firstName'
      }
     ]
     },
       {
      Header: 'Column 4',
      columns: [
        {
        Header: 'S column 4',
        accessor: 'firstName'
       }
      ]
       },
     {
 Header: 'Column 5',
columns: [
     {
Header: 'S column 5',
 accessor: 'firstName'
    }
   ]
  },
  {
 Header: 'Column 6',
 columns: [
 {
    Header: 'S column 6a',
    accessor: 'firstName'
  },
    {
    Header: 'S column 6b',
    accessor: 'firstName'
   },
   {
    Header: 'S column 6c',
    accessor: 'firstName'
     },
   {
     Header: 'S column 6d',
     accessor: 'firstName'
     }
  ]
    },
  {
 Header: 'Column 7',
 columns: [
 {
  Header: 'S column 7',
     accessor: 'firstName'
   }
     ]
    },
    {
    Header: 'Column 8',
    columns: [
  {
   Header: 'S Column 8a',
   accessor: 'firstName'
  },
 {
   Header: 'S Column 8b',
   accessor: 'firstName'
   },
   {
Header: 'S Column 8c',
accessor: 'firstName'
  },
  {
  Header: 'S Column 8d',
  accessor: 'firstName'
  }
 ]
  },
  ];

请帮助我通过最简单的技术实现此功能。

如果可以的话，你可以在codesandbox上展示一个演示。

Answer 1

列中有一个属性

show

。

show: true, // can be used to hide a column

。
设为 false 以隐藏特定列。将用户的复选框值保留在状态中。 https://react-table.js.org/#/story/readme

注意：列属性

show

已弃用。请使用

initialstate.hiddenColumns

来代替。

检查：https://github.com/tannerlinsley/react-table/issues/1804

Answer 2

代码示例：

const columns = useMemo(
    () => [
        {
            Header: 'DeviceId',
            accessor: 'DeviceId',
        },
        {
            Header: 'Serial_Number',
            accessor: 'Serial_Number',
        },
        {
            Header: 'Type',
            accessor: 'Type',
        },
    ],[]
);

const initialState = { hiddenColumns: ['DeviceId'] };

useTable({
    columns,
    data,
    initialState
},
    useSortBy
)

文档https://react-table-v7.tanstack.com/docs/api/useTable#table-options

Answer 3

我一直在使用react-table，在查看了useTable hook的内部代码后，得到了这个解决方案；

initialState:{
 hiddenColumns:["id"] //array of column names to be hidden
}