React Table responsive hidden columns - reactjs

Question

I'm trying to find a way to hide a few columns based on the window size using react-table.
I've gotten as far as using a custom hook to return the window size, then based on those size's to return an array with the column accessor id's
const { width } = useWindowDimensions();
const [cols, setCols] = useState([""]);
.
.
. useEffect(() => {
console.log("cols", cols);
if (width < 1000) {
setCols(["id", "osName"]);
} else {
setCols(["id"]);
}
}, [width, setCols]);
.
.
. <ComputerTable
hiddenColumns={cols}
columns={columns}
data={...}
};
})}
/>
this passes through my Table component and is loaded on
useTable(
.
.
.
initialState: { pageIndex: 0, hiddenColumns: hiddenColumns || [] },
.
.
)
This works on the initial page render, however when the window resizes it does not update.
cols does appear to be updating on the fly within the component code when I console.log it, but in the view itself, the table does not re-render based on that array update.
Can I accomplish this with my logic, or is there a better way to accomplish this?

Answer 1

initialState: { pageIndex: 0, hiddenColumns: hiddenColumns || [] }, is an initial state, not an updating one. You will need to engineer things so you can say:
colsToHide.forEach(c => c.toggleHidden(true))
// OR
colsToHide.forEach(c => c.toggleHidden(c.isVisible)) // to toggle state
// OF
colsToHide.forEach(c => c.toggleHidden(state.blah)) // for if you setup some state
Use an useEffect() to perform state setup as required, and in the return (...) for rendering the table.
I am about to write up what I did in a new post to answer how to hide columns NOT using
<IndeterminateCheckbox {...getToggleHideAllColumnsProps()}/>
which I could only find answers for.
See React-table hide various columns from button click