datatables icon indicating copy to clipboard operation
datatables copied to clipboard

Store sort, filters state

Open davidonet opened this issue 3 months ago • 1 comments

The DataTable is a great project with a lot features but... I can't figure out how to store the values of ThFilter so if I click to access detail of an item and come back the DataTable is exactly in the same state with filters, sort, offset.. In ssr version, I see that if I want to set many filters, a row per pages and an offset. Each call to .set()trigger a call to my server.js so I have as many db query as I have configuration value.

I figure out to store things in a store :

export const tableState = $state({
  currentPage: 1,
  rowsPerPage: 25,
  offset: 0,
  sort: {},
  filters: [],})

and on mount and unmount:

export function unMountHelper(table) {
  tableState.currentPage = table.currentPage
  tableState.rowsPerPage = table.rowsPerPage
  tableState.offset = table.offset
  tableState.sort = table.sort
  tableState.filters = $state.snapshot(table.filters)
}

export function mountHelper({ table }) {
  const { currentPage, rowsPerPage, sort, filters } = tableState
  table.sort = sort
  table.setRowsPerPage(rowsPerPage || 25)
  table.setPage(currentPage || 1)
}

but I don't know how to handle filters

davidonet avatar Sep 22 '25 14:09 davidonet

Hello, Thx for raising this issue. I think there are workarounds to avoid saving the table state in a store. This is not the first time it has been asked, so i probably need to test it and add an example in the documentation.

Here is a suggestion: https://github.com/vincjo/datatables/discussions/94#discussioncomment-14344732

I think the main problem is that TableHandler is re-instantiated, which could be avoided by calling a more global instance since the stores are in TableHandler.

vincjo avatar Sep 30 '25 14:09 vincjo