Is it possible to persist table filters in SessionStorage such that if the user visits the same page with table again and they have used their own 'Dynamic' filters before, they will see the same filtered table?
Hi @Marcus, here is a step-by-step guide on how to implement this:
@Paulo I am guessing it is not possible then to read the table's own filters and then watch for changes so they could be pushed into SessionStorage?
The sessionStorage
object stores data for only one session.
(The data is deleted when the browser is closed). - W3 School
Potentially, you could do this with SessionStorage but users may expect their 'saved' filters to persist across sessions.
I would prefer to put it in sessionStorage
for now and maybe migrate to localStorage
if needed, is it possible to "watch" the filters set by the user and to put them into the storage?
Sounds good!
To build that logic, you can reference the table's filterStack
property:
To save the filters, create an event handler for the table with the Change filter
event, and trigger a JS query or run a script to save these objects in the storage.
Because the filters are objects, and both session & local storage only take text as values for each key, you'll have to use JSON.stringify(tableName.filterStack.filters)
. This will save the 'stringified' version of the array of objects in your choice of storage. To save it in the storage, you need to use:
localStorage.setValue('filters', JSON.stringify(tableName.filterStack.filters)
To add the filters to the table when the user returns to the page/app, you'll need a JS query that runs on page load (use the .setFilterStack
function).
On that JS query, you'll have to parse this string before passing it to the setFilterStack
function: JSON.parse(localStorage.values.nameOfKey)
:
tableName.setFilterStack({
filters: JSON.parse(localStorage.values.filters)
})
Let me know if you have any questions!
Thank you so much , I'll let you know how it goes - but that looks great!