Filter persistence on page reload or leave and return...

[kscottthomas]

I quite possibly maybe overthinking this but all I want to do is have the table filters persist if someone leaves the page and returns. I am able to save the columnFilters off into localstorage and retrieve and use however I am having trouble using the onColumnFiltersChange event to clear the filters.

Is there a simple, documented way of achieving this?

Thank you in Advance! Scott

[KevinVandy]

From your original question, it sounds like you are able to successfully persist? I'm not sure of your exact question. Sounds like you are on the write path to managing the columnFilters state yourself.

If you follow this basic structure, it should work fine.

const [columnFilters, setColumnFilters] = useState([])

useEffect(() => {
  //read from localstorage
}, []}

useEffect(() => {
  //write to localstorage
}, [columnFilters]}

return (
  <MaterialReactTable
    columns={columns}
    data={data}
    onColumnFiltersChange={setColumnFilters}
    state={{ columnFilters }}
  />
)

[kscottthomas]

Perfect, thank you for getting back to me so quickly!