Date-range/custom filterVariant does not work with a correctly setup accessorFn

[17as]

mantine-react-table version

2.0.0-beta.6

react & react-dom versions

18.2.0

Describe the bug and the steps to reproduce it

I tried to implement a date-range filter variant for dateOfBirth. I am using date from a rest api fetched using @tanstack/react-query library.

If I setup the accessorFn like below, filter functionality works fine, but in the table cell where the date of birth should be displayed no date is shown
accessorFn: (originalRow: { applicant: { dateOfBirth: string | number | Date }; }) => { const date = new Date(originalRow?.user?.dateOfBirth); !isNaN(date.getTime()) ? date.toISOString() : ""; },

Otherwise, is I setup accessorFn the correctly with a return statement
accessorFn: (originalRow: { applicant: { dateOfBirth: string | number | Date }; }) => { const date = new Date(originalRow?.user?.dateOfBirth); return !isNaN(date.getTime()) ? date.toISOString() : ""; },

table cell displays the correct date of birth but the date-range filter does not work anymore. The table displays absolutely no rows, but the date is passed correctly to the table (for example pagination calculates correctly the number of pages when the filter values are changed, but the table shows 0 rows).

I also tried filterVariant: "custom" but with the very same behaviour: works with the accessorFn setup like in the first example, does not works when accessorFn has a return statement.

Minimal, Reproducible Example - (Optional, but Recommended)

n/a

Screenshots or Videos (Optional)

No response

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

None

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.

[redvelvet511]

Hi! I am also experiencing the same issue. Have you possibly found a workaround it? I'm still trying to find a solution.. @17as

[17as]

Thank you for your answer, I am not on that project anymore but I will forward so that someone can pick this issue up.

[alessandrojcm]

Hey, I tried this locally and this works:

type Person = {
  dateOfBirth: Date;
  id: number;
  name: string;
};

const data: Person[] = [
  {
    dateOfBirth: new Date('1990-01-15T00:00:00.000Z'),
    id: 1,
    name: 'John Doe',
  },
  {
    dateOfBirth: new Date('1985-05-20T00:00:00.000Z'),
    id: 2,
    name: 'Jane Smith',
  },
  {
    dateOfBirth: new Date('1995-11-08T00:00:00.000Z'),
    id: 3,
    name: 'Bob Johnson',
  },
  {
    dateOfBirth: new Date('1988-03-25T00:00:00.000Z'),
    id: 4,
    name: 'Alice Williams',
  },
  {
    dateOfBirth: new Date('1992-07-30T00:00:00.000Z'),
    id: 5,
    name: 'Tom Brown',
  },
];

export const DateRangeFilterWithAccessorFnBug = () => (
  <Box>
    <MantineReactTable
      columns={[
        {
          accessorKey: 'id',
          header: 'ID',
        },
        {
          accessorKey: 'name',
          header: 'Name',
        },
        {
          accessorFn: (row) => {
            return row.dateOfBirth;
          },
          Cell: ({ cell }) => {
            const date = cell.getValue<Date>();
            return date.toLocaleDateString();
          },
          filterVariant: 'date-range',
          header: 'Date of Birth',
          id: 'dateOfBirth',
        },
      ]}
      data={data}
      initialState={{ showColumnFilters: true }}
    />
  </Box>
);

This also works

<MantineReactTable
      columns={[
        {
          accessorKey: 'id',
          header: 'ID',
        },
        {
          accessorKey: 'name',
          header: 'Name',
        },
        {
          accessorFn: (row) => { 
           return row.dateOfBirth;
          },
          Cell: ({ cell }) => {
            const originalDate = data.find(item => item.id === cell.row.original.id)?.dateOfBirth;
            return originalDate?.toLocaleDateString() || '';
          },
          filterVariant: 'date-range',
          header: 'Date of Birth',
          id: 'dateOfBirth',
        },
      ]}
      data={data}
      initialState={{ showColumnFilters: true }}
    />

Are your dates coming back from your API strings or Date objects? If the former then you need to cast them.