TanStack
setColumnFilter(num) is broken when given a numeric value
TanStack Table version
8.21.2
Framework/Library version
React 18.2.0
Describe the bug and the steps to reproduce it
When I set a numeric column filter, it immediately reverts to undefined, but it works if I set it to a string value.
const col = table.getColumn('colour');
const onClick = () => {
col.setColumnFilter('purple');
};
useEffect(() => {
console.log(col.getColumnFilter()); // prints undefined, undefined, purple
}, [col]);
But when I use a numeric column filter value it behaves differently.
const col = table.getColumn('colourId');
const onClick = () => {
col.setColumnFilter(99);
};
useEffect(() => {
console.log(col.getColumnFilter()); // prints undefined, undefined
}, [col]);
The sandbox shows the issue pretty clearly.
- Click the "Red colour" filter button and view that the filter works.
- Click the "Clear filters" button to reset the filters.
- Click the "Red colourId" filter button and see that it does nothing. Essentially the filter set up in
showRedByIdClicked()has not effect...
Let me know if there is more I can do to help.
Your Minimal, Reproducible Example - (Sandbox Highly Recommended)
https://codesandbox.io/p/sandbox/kzxcl2
Screenshots or Videos (Optional)
No response
Do you intend to try to help solve this bug with your own PR?
No, because I do not know how
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.
I think the issue is when the column has numeric value, in my testing it gets broken no matter what value is filter.
Looking at source code I think problem is with this function that makes wrong assumption when checking filterFn and removes the filter.
https://github.com/TanStack/table/blob/f7bf6f1adfa4f8b28b9968b29745f2452d4be9d8/packages/table-core/src/features/ColumnFiltering.ts#L417
Temporary workaround for me is to define column like this and then filter gets set:
columnHelper.accessor("test", { id: "test", filterFn: () => true, }),
I think the issue is when the column has numeric value, in my testing it gets broken no matter what value is filter.
Looking at source code I think problem is with this function that makes wrong assumption when checking filterFn and removes the filter.
table/packages/table-core/src/features/ColumnFiltering.ts
Line 417 in f7bf6f1
export function shouldAutoRemoveFilter<TData extends RowData>( Temporary workaround for me is to define column like this and then filter gets set:
columnHelper.accessor("test", { id: "test", filterFn: () => true, }),
thx, this work for me
