TanStack
Column visibility not able to manage after refresh (even passing the same data while rendering on page load)
Describe the bug
When react-table render then I am doing Column Visibility and managing that Column Visibility JSON/OBJECT/Params (with required column names) in localstorage / Cookies so when I do again refresh then passing same value in column visibility method but it is just showing toggle (active/inactive) but it is showing all columnsrenders
Your minimal, reproducible example
https://codesandbox.io/s/new
Steps to reproduce
When react-table render then I am doing Column Visibility and managing that Column Visibility JSON/OBJECT/Params (with required column names) in localstorage / Cookies so when I do again refresh then passing same value in column visibility method but it is just showing toggle (active/inactive) but it is showing all columnsrenders
Expected behavior
Expected behaviour if I pass same format with required value in column visibility method/function then it should work as his behaviour
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
All Browser
react-table version
^7.8.0
TypeScript version
No response
Additional context
Code
{allColumns?.map((column, index) => (
<div key={column.id} id={column.id} className="column-list">
{/* {console.log(column,"status")} /}
<div className="paidUnpaidpin form-switch form-check-success d-flex p-0 mb-1 unpaid-switch ">
{/ {console.log(column?.getToggleHiddenProps())} */}
<Input
{...column.getToggleHiddenProps()}
type="switch"
name={"status"}
theme={selectThemeColors}
id={switch-success${column.id}}
checked={showColumn[index]?.show}
onClick={() =>
setShowColumn((showColumn) =>
showColumn.map((content, i) => {
if (index === i) {
let newContent = { ...content };
newContent.show = newContent.show === 0 ? 1 : 0;
return newContent;
}
return content;
})
)
}
className="mx-50"
/>
<span className="text-uppercase">{column?.sortField}
))}
const filteredColumn = useMemo( () => allColumns.map((column) => { return { id: column?.id, col: column?.sortField, show: column?.totalVisibleHeaderCount, getToggleHiddenProps: column?.getToggleHiddenProps, }; }), [allColumns] ); // console.log(filteredColumn,"filteredColumnn") const [showColumn, setShowColumn] = useLocalStorage( "colunmns", filteredColumn );
Terms & Code of Conduct
- [X] I agree to follow this project's Code of Conduct
- [X] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
### Tasks
@tannerlinsley
@pruthvidarji1993 Try following the steps in this article https://borstch.com/snippet/saving-user-preferences-for-column-visibility
