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