Having a TypeError with: filterValue.toLowerCase is not a function

[BigSillyTiger]

Hi, I was trying to implement column filter(faceted) to my project(react / typescript), I literally just cp/cv the example code to my project and feeding header filter with my table data, but I got type error:

Uncaught TypeError: filterValue.toLowerCase is not a function at Object.includesString [as filterFn] (@tanstack_react-table.js?v=fda84354:768:30) at @tanstack_react-table.js?v=fda84354:2747:55 at Object._getFilteredRowModel (@tanstack_react-table.js?v=fda84354:63:14) at table.getFilteredRowModel (@tanstack_react-table.js?v=fda84354:1019:20) at table.getPreGroupedRowModel (@tanstack_react-table.js?v=fda84354:1215:47) at table.getGroupedRowModel (@tanstack_react-table.js?v=fda84354:1221:22) at table.getPreSortedRowModel (@tanstack_react-table.js?v=fda84354:2209:46) at @tanstack_react-table.js?v=fda84354:2847:65 at Object._getSortedRowModel (@tanstack_react-table.js?v=fda84354:54:21) at table.getSortedRowModel (@tanstack_react-table.js?v=fda84354:2217:20)

and seems like the error is caused by onchange in the component DebouncedInput, something wrong with column.setFilterValue,
has anyone come across this issue before?

[BigSillyTiger]

just found out that I need to manually add a filterFn to the column def
but why the example code runs very well without the code below?

filterFn: rangeFilterFn,
            meta: {
                filterVariant: "range",
            },

...

import { Row } from "@tanstack/react-table";

export const rangeFilterFn = <T>(
    row: Row<T>,
    id: string,
    value: [string, string]
) => {
    const newV = [parseFloat(value[0]), parseFloat(value[1])];
    if (value[0] !== "" && value[1] === "") {
        return (row.getValue(id) as number) >= newV[0];
    } else if (value[0] === "" && value[1] !== "") {
        return (row.getValue(id) as number) <= newV[1];
    } else if (value[0] !== "" && value[1] !== "") {
        return (
            (row.getValue(id) as number) <= newV[1] &&
            (row.getValue(id) as number) >= newV[0]
        );
    } else if (value[0] === "" && value[1] === "") {
        return true;
    }

    return value.includes(row.getValue(id));
};

[EverStarck]

yup, happened the same to me, I forgor to add the filterFn. related for shadcn: shadcn-ui/ui#934 (comment)