Quirks because of useColumnFilters JSON.stringify

[maelp]

I've seen that even though tanstack table column filter can accept any JS object, and that my objects contain Date objects, when I use tanstack-table-search-params they are converted in the tanstack filter state to strings because of

  // If `router.query` is included in the dependency array,
  // `columnFilters` will always be regenerated.
  // To prevent this, use `JSON.stringify` and `JSON.parse`
  // when utilizing a custom decoder.
  const isCustomDecoder = !!options?.decoder;
  const stringCustomColumnFilters = options?.decoder?.(router.query)
    ? JSON.stringify(options.decoder(router.query))
    : "";
  const _columnFilters = useMemo(
    () =>
      isCustomDecoder
        ? stringCustomColumnFilters === ""
          ? []
          : JSON.parse(stringCustomColumnFilters)
        : uncustomisedColumnFilters,
    [stringCustomColumnFilters, uncustomisedColumnFilters, isCustomDecoder],
  );

is there a way to avoid this? Or at least to provide a custom JSON serializer/decoder which would properly parse dates?

(I'm doing this because I'm integrating tanstack-table-search-params with https://github.com/bazzalabs/ui for the cool filtering widget, and I want to use their Date range filtering)

[maelp]

Asking Claude about it, it tells me:

A better solution

  They could stringify the input (router.query) but not the output (decoder result):

  const queryKey = JSON.stringify(router.query);
  const _columnFilters = useMemo(
    () => isCustomDecoder ? options.decoder(router.query) : uncustomisedColumnFilters,
    [queryKey, isCustomDecoder]
  );