[SOLVED] Show only some column in react table based on certain condtions

Show only some column in react table based on certain condtions

I have react table and a react-select element. react select has 3 options. and based on that option the data will be updated into react table. mytable has 12 columns.

I need to display 7 column when option 1 & 2 is selected and all 12 columns when option 3 selected.

I am able to hide columns based on this but I am unable to bring back all columns when option 3 is chosen.

I tried the below, and also tried

show: false,

and

isVisible: false,

if (Status !== 'option3') {
    initialState.hiddenColumns = (['column8','column9','column10', 'column11', 'column12']);
  }
  if (Status === 'option3') {
    initialState.autoResetHiddenColumns = true;

**mytable instance **

() => [
{
Header: 'column1',
accessor: 'column1',
},
{
Header: 'column2',
accessor: 'column12',
disableFilters: true,
},
......
{
Header: 'column12',
accessor: 'column12',
disableFilters: true,
},

    ],
    [],

);

Solution

So I did a work around like this

    const columnsToShow = condition !== 'something' ? 7 : 12;
  const filteredColumns = COLUMNS.slice(0, columnsToShow);

and in my table instance I passed this filteredColumns

    {
      columns: filteredColumns,
      data: Data,
      initialState: tableInitialLoad,
      defaultColumn,
    }