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.

No I think it will not work only by css. If you can, you can show a demo. — , Dec 05 '18 at 17:56

score 44 · Accepted Answer · edited Apr 10 '20 at 06:52

44

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

edited Apr 10 '20 at 06:52

kuzdogan

554
7
13

answered Dec 05 '18 at 18:02

Janaka Chathuranga

1,742
16
19

1

Can you please show me a demo on Code Sandbox. I am a beginner in React. – Dec 05 '18 at 18:14
Can you please somehow show a demo how can I disable a column if the checkbox is unchecked? – Dec 05 '18 at 18:16
Thanks a lot. One further question. You have used the checkbox for First Name. But I want to do for the entire name. If I disable name both first and last name will be disabled. Can you kindly make this last change in your demo? – Dec 05 '18 at 18:55
1

Lol. @Scooby, You should really study a little bit about react and it's concept ;) I did the change in the sandbox. https://codesandbox.io/s/03x3r0vx1l . Check it out.! – Janaka Chathuranga Dec 06 '18 at 07:13
thanks! saved me some searching - the former storybook docs seem to have disappeared – Kris Lamote Mar 22 '19 at 10:40
Thanks. Appreciate the detail also regarding hiddenColumns – Andre DiCioccio May 26 '20 at 00:20
1

There's an example on the react table docs covering exactly this case https://react-table.tanstack.com/docs/examples/column-hiding – Stuart Hallows May 05 '21 at 07:59

score 17 · Answer 2 · edited Feb 08 '23 at 23:15

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

How to show and hide some columns on React Table?

2 Answers2

Linked