[BUG] error when trying to implement multiple top level conditionalFilter using useTable from @refinedev/react-table

[BjornPython]

Describe the bug

I am getting the error:

when trying to implement multiple top level conditionalFilter using @refinedev/react-table's useTable.

Steps To Reproduce

Create a table using @refinedev/react-table's useTable.

use the and filterOperator for the columns with date values.

  const columns = React.useMemo(
    () => [
      {
        id: 'createdAt',
        header: 'CreatedAt',
        accessorKey: 'createdAt',
        cell: (e) => {
          return (
            <span>
              {dayjs(e.getValue().toString()).format('YYYY-MM-DD hh:mm:ss a')}
            </span>
          )
        },
        meta: {
          filterOperator: 'and',
          filterComponent: TableColumnDateFilter, // custom component for applying date filters
          filterComponentProps: {
            field: 'createdAt',
          },
        },
      },
      {
        id: 'updatedAt',
        header: 'Updated At',
        accessorKey: 'updatedAt',
        cell: (e) => {
          return (
            <span>
              {dayjs(e.getValue().toString()).format('YYYY-MM-DD hh:mm:ss a')}
            </span>
          )
        },
        meta: {
          filterOperator: 'and',
          filterComponent: TableColumnDateFilter, // custom component for applying date filters
          filterComponentProps: {
            field: 'updatedAt',
          },
        },
      },
    ],
    []
  )

  const [columnVisibility, setColumnVisibility] =
    React.useState({})
  const [columnFilters, setColumnFilters] = React.useState(
    []
  )

  const table = useTable({
    columns,
    state: {
      columnVisibility,
      columnFilters,
    },
    onColumnVisibilityChange: setColumnVisibility,
    onColumnFiltersChange: setColumnFilters,
  })

use setFilterValue for setting the column filter values.

set the filter value by doing something like:

// more react here
        <Calendar
          initialFocus
          mode="range"
          defaultMonth={date?.from}
          selected={date}
          onSelect={(newDateRange) => {
            setFilterValue([
              { field, operator: 'gte', value: newDateRange.from },
              { field, operator: 'lte', value: newDateRange.to },
            ])
            setDate(newDateRange)
          }}
          numberOfMonths={2}
        />
// more react here

My Problem

after setting a filter for the createdAt column, my columnFilters` value is:

[
    {
        "id": "createdAt",
        "value": [
            {
                "field": "createdAt",
                "operator": "gte",
                "value": "2024-04-08T16:00:00.000Z"
            },
            {
                "field": "createdAt",
                "operator": "lte",
                "value": "2024-04-18T16:00:00.000Z"
            }
        ]
    },
]

and the filters value I get in my dataprovider's getList is:

[
  {
    field: 'createdAt',
    operator: 'and',
    value: [
      {
        field: 'createdAt',
        operator: 'gte',
        value: '2024-04-08T16:00:00.000Z',
      },
      {
        field: 'createdAt',
        operator: 'lte',
        value: '2024-04-19T16:00:00.000Z',
      },
    ],
  },
]

but when I add another conditionalFilter for the updatedAt column, the conditionalFilters error arises:

Expected Behavior

I expect we should have an option of providing key values to useTable's columnFilters. that way we could remove the conditionalFilter error in the console.

Packages

"@refinedev/core": "^4.48.0",
"@refinedev/react-table": "^5.6.7",

Additional Context

Just for the sake of testing, I also tried hardcoding filters with key values in columnFilters, but i am still getting the same error.

  const [columnFilters, setColumnFilters] = React.useState([
    {
      key: 'createdAt-filter',
      id: 'createdAt',
      value: [
        {
          field: 'createdAt',
          operator: 'gte',
          value: '2024-04-15T16:00:00.000Z',
        },
        {
          field: 'createdAt',
          operator: 'lte',
          value: '2024-05-14T16:00:00.000Z',
        },
      ],
    },
    {
      key: 'updatedAt-filter',
      id: 'updatedAt',
      value: [
        {
          field: 'updatedAt',
          operator: 'gte',
          value: '2024-04-09T16:00:00.000Z',
        },
        {
          field: 'updatedAt',
          operator: 'lte',
        },
      ],
    },
  ])

[aliemir]

Hey @BjornPython sorry for the issue, we'll investigate with the steps you've provided and get back to you when we have any updates on this. At first glance it looks like a mapping issue between @refinedev/react-table's filters to @refinedev/core and then its passed to the data provider's getList method with missing fields.

[BjornPython]

Thanks @aliemir, sounds good!