date-range column filter retrieved from state causes .toISOString() exception

[konnsim]

mantine-react-table version

1.3.4

react & react-dom versions

18.2.0

Describe the bug and the steps to reproduce it

The attempted retrieval and population of a date range column filter min/max values from persisted state (local or session storage) into a date selection input throws an exception on the value.toISOString() call of the HiddenDatesInput component.

Minimal, Reproducible Example - (Optional, but Recommended)

Apply the date range filters on the Created column then refresh the page.
https://codesandbox.io/p/devbox/young-sun-xy2p97

Note that adding changing column filter display mode to popover stops the exception being thrown on page load and moves it to when opening the Created column filter.

Screenshots or Videos (Optional)

Do you intend to try to help solve this bug with your own PR?

No, because I do not have time to dig into it

Terms

• I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[alessandrojcm]

You're serializing the filter state to JSON but you are not casting the value back to a Date when you read from local storage, the table expects a Date object hence it fails. See the amended code sandbox https://codesandbox.io/p/devbox/exciting-archimedes-9rg687?file=%2Fsrc%2FTS.tsx%3A51%2C54

[konnsim]

Awesome thanks heaps Alessandro.

Your adjusted codesandbox has a logical error in the if(!f.id === 'createdAt') condition but you're right on the money with what the problem is thank you.

Just for posterity for anyone looking to this in the future the final logic I used for parsing the stored date column min/max filter values back from local storage is:

if (columnFilters) {
  const parsedFilters = (
    JSON.parse(columnFilters) as MRT_ColumnFiltersState
  ).map((f) => {
    if (f.id === 'createdAt') {
      return {
        id: f.id,
        value: (f.value as [string | null, string | null]).map((d) =>
          d === null ? null : dayjs(d).toDate(),
        ),
      };
    }
    return f;
  });
  setColumnFilters(parsedFilters);
}

with a custom filter function on the Created column to make the date range inclusive of any createdAt dates on the same day as the Max value of:

filterVariant: 'date-range',
filterFn: (row, id, value: [Date | null, Date | null]) => {
  const date = row.getValue<Date>(id);
  return (
    value[0] === null ||
    value[1] === null ||
    (date >= dayjs(value[0]).startOf('day').toDate() &&
      date <= dayjs(value[1]).endOf('day').toDate())
  );
},