Calling table.SetState() does not seem to trigger sync with URL params

[jasonhilldm]

First off I want to say that this module is super helpful!

I have found a problem with calling table.setState() to change multiple state values on the table. My use case is that I have a filter bar with a reset button that clears the global filter as well as all column filters:

table.setState((old) => ({
  ...old,
  globalFilter: undefined,
  columnFilters: [],
}));

When I define the onStateChange option on the table, I can see that the new state value has come through correctly with the above values reset, but the URL sync is not happening so the actual table filters do not get applied.

Maybe this call to table.setState() does not trigger the individual events like onGlobalFilterChange and onColumnFilterChange that you have defined in this module.

Would it be better to handle all table state changes via a single onStateChange event handler anyway instead of wiring up individual event handlers? Or did you find issues with that approach?

[jasonhilldm]

I was able to work around this issue by individually resetting the filters:

table.setGlobalFilter("");
table.setColumnFilters([]);

But, I did need to include a debounce in the hook options otherwise the global filter was not being reset (either in the table state or the query):

const stateAndOnChanges = useTableSearchParams(
  {
    query: pageContext.urlParsed.search,
    pathname: pageContext.urlPathname,
    push: (url) => navigate(url),
  },
  {
    debounceMilliseconds: 100,
  }
);

[taro-28]

@jasonhilldm
Thanks for using the library!

I did a quick investigation, and it looks like the fix may take a little time—sorry about that.

To enable table.setState(), it should be possible to support it by adding an onStateChange callback to the return value of useTableSearchParams.

However, as you discovered, when the table state is updated consecutively within a single handler, the URL parameters aren’t synced correctly. Unless we solve this underlying issue, simply adding onStateChange won’t be sufficient.

Therefore, I’ll first work on ensuring that consecutive state updates sync properly. I’ll post an update here once it’s resolved, so I’d appreciate your patience in the meantime!

[jasonhilldm]

Thanks for the update.

What I was wondering is if your library can just subscribe to the onStateChange callback as this should then fire when any changes to state occur on the table. Then you can push all of the query changes in one go rather than subscribing to the individual state changes for sorting, filtering, etc. as this creates some syncing issues.

[taro-28]

@jasonhilldm
Sorry for the delay.
I've added support for onStateChange.
This should now synchronize the table state with URL parameters even when using table.setState() or table.reset().

• support onStateChange #595

However, the bug when executing setXXX consecutively still remains, so please keep the issue open...!