[BUG] error when trying to implement multiple top level `conditionalFilter` using useTable from @refinedev/react-table
BjornPython opened this issue · 2 comments
Describe the bug
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',
},
],
},
])
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.
Thanks @aliemir, sounds good!