TanStack
filter is not working
TanStack Table version
pnpm ^8.20.6
Framework/Library version
next ^15.1.3
Describe the bug and the steps to reproduce it
When implementing manual server-side pagination, an issue arises when applying a filter while not on the first page. The pagination resets as expected, but the filter value does not update correctly. However, when on the first page, the filter functions as intended.
The problem seems to stem from the setFilterValue function provided by the column. This function appears to perform two actions simultaneously: resetting the pagination and setting the filter value. Due to this simultaneous operation, a conflict occurs, preventing the filter from applying correctly.
Your Minimal, Reproducible Example - (Sandbox Highly Recommended)
<FloatingLabelInput type={column.inputType ?? 'text'} label={column.label} value={(table.getColumn(String(column.value))?.getFilterValue() as string) || ''} onChange={(event) => { console.log({ event }); setTimeout(() => { table.resetPagination(); }, 0); table.getColumn(String(column.value))?.setFilterValue(event.target.value); }} classNameLabel="text-sm" className="h-12 w-full" showClearIcon={ column.showClearIcon && (table.getColumn(String(column.value))?.getFilterValue() as string) ? ( <LucideXIcon className="size-4" /> ) : undefined } />
Screenshots or Videos (Optional)
No response
Do you intend to try to help solve this bug with your own PR?
None
Terms & Code of Conduct
- [x] I agree to follow this project's Code of Conduct
- [x] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
Tip: Consider transforming a cell's value into a string before integrating with TanStack.
Similar issue: I've found that even though my array of strings was transformed into a single string via the ColumnDef's cell field, my filter logic was not working for that data. My filter logic worked for any ColumnDef that I defined as type string.
Solution: To resolve this, I transformed my data into a string and defined my TanStack table column cell data type as string.
Tip: Consider transforming a cell's value into a string before integrating with TanStack.
Similar issue: I've found that even though my array of strings was transformed into a single string via the ColumnDef's cell field, my filter logic was not working for that data. My filter logic worked for any ColumnDef that I defined as type string.
Solution: To resolve this, I transformed my data into a string and defined my TanStack table column cell data type as string.
THANK YOU!!!!!!!
If it weren't for you I would be swimming in shit for next 12 hours.
I have no idea why this isn't documented anywhere!!
I would call column.setFilter and updater would just spit out [] as columnFilters
columnHelper.accessor((row) => row.longitude.toString(), {
id: "longitude",
header: ({column}) => (
<DataTableColumnHeader column={column} title="Longitude"/>
),
cell: ({getValue}) => getValue<string>(),
enableSorting: true,
enableHiding: true,
meta: {
className: "text-left",
displayName: "Longitude",
filterType: "number",
},
}),
I will drop some keywords to save people in future: filter setFilterValue onColumnFiltersChange columnFilters updater filterValue
