reactjsreact-tabletanstack

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,
        }