Как показать и скрыть некоторые столбцы в React Table?

Question

Я создал таблицу реагирования. Я хочу скрыть или показать некоторые столбцы в моей таблице по действиям пользователя. По умолчанию все столбцы должны быть видны, но у нас будет несколько флажков, чтобы скрыть или показать некоторые столбцы.

Изображение моего стола

Предположим, я хочу показать 4 из 8 столбцов. Пожалуйста, предложите мне простую технику для достижения этой цели.

Массив заголовков столбцов

  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'
  }
 ]
  },
  ];

Пожалуйста, помогите мне добиться этой функции с помощью самой простой техники.

Если вы можете, вы можете показать демо на коды andbox.

Answer 1

В столбце есть свойство show,
show: true, // can be used to hide a column,
Сделать ложным, чтобы скрыть конкретный столбец. Держите значения флажка пользователя в состоянии. https://react-table.js.org/

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
    )