How to show and hide some columns on React Table?

Question

I have created a React Table. I want to hide or show some columns in my table by user action. By default all columns should be visible but we will have some check boxes to hide or show some columns.

Image of my table

Suppose I want to show 4 of the 8 columns. Please suggest me an easy technique to achieve this.

My Column Header Array is

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

Please help me to achieve this feature by easiest technique.

If you can, you can show a demo on codesandbox.

Answer 1

In column there is a property show.
show: true, // can be used to hide a column.
Make it false to hide the particular column. Keep user's check-box values in the state. https://react-table.js.org/#/story/readme

Note: The column property showis deprecated. Use initialstate.hiddenColumns instead.

Check: https://github.com/tannerlinsley/react-table/issues/1804

Answer 2

Code example:

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
)

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

Answer 3

I have been using react-table and after looking at the internal code of useTable hook, got this solution;

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

Answer 4

For React Table V8, you can use the columnVisibility key.

ex.

initialState: {
  columnVisibility: {
    name: false;
    address: false;
  }`
}