How do you handle a mixture of string/number columns with global filter?

[PatricioNG]

EDIT: Was poking at this for a few more moments and realized that it's providing that error on columns that contain numbers, but if all numerical columns are set to enableGlobalFilter: false then it's OK. So let me rephrase my question - How would I specify and handle a numerical column for global filters? 😄

====

Hi - upgrading from v7 to v8 and keep running into TypeError: l.toLowerCase is not a function for my global filter. I've followed the example for global filtering and read through the docs but can't seem to pinpoint what's causing it. Seems that if I add on enableGlobalFilter: false for certain columns it fixes it, but I'm not connecting the dots on why those columns are an issue as it's using an accessoryKey on a value that is a string or number and not an object/array/etc.

I've scoured the docs and googled around on the issue but can't seem to find anything related, any advice would be handy.

This is the type def for the data, an array of inventory objects

    SKU: string;
    Category: string | null;
    Name: string | null;
    Bin_Location_1F: string | null;
    Bin_Location_3F: string | null;
    Total_1F: number;
    Total_3F: number;
    Total_Digital: number;
    Total_Digital_Minus_Hold: number;
    In_Hold: number;
    Available_1F: string | null,
    Available_3F: string | null,
    Available_Digital: string | null,
    Buffer_1F: number;
    Buffer_3F: number;
    Total_Minus_Hold_1F: number;
    Total_Minus_Hold_3F: number;

And my column def

        {
            header: 'SKU',
            accessorKey: 'SKU'
        },
        {
            header: 'Name',
            accessorKey: 'Name'
        },
        {
            header: 'Category',
            accessorKey: 'Category'
        },
        {
            header: 'Bin 1F',
            accessorKey: 'Bin_Location_1F'
        },
        {
            header: 'Bin 3F',
            accessorKey: 'Bin_Location_3F'
        },
        {
            header: 'Total 1F',
            accessorKey: 'Total_1F'
        },
        {
            header: 'Total 3F',
            accessorKey: 'Total_3F'
        },
        {
            header: 'Total Digital',
            accessorKey: 'Total_Digital'
        },
        {
            header: 'In Hold',
            accessorKey: 'In_Hold'
        },
        {
            header: 'Total Minus Hold',
            accessorKey: 'Total_Digital_Minus_Hold'
        },
        {
            header: 'Total Minus Hold 1F',
            accessorKey: 'Total_Minus_Hold_1F'
        },
        {
            header: 'Total Minus Hold 3F',
            accessorKey: 'Total_Minus_Hold_3F'
        },

        {
            header: 'Available 1F',
            accessorKey: 'Available_1F'
        },
        {
            header: 'Available 3F',
            accessorKey: 'Available_3F'
        },
        {
            header: 'Available Digital',
            accessorKey: 'Available_Digital'
        },
        {
            header: 'Buffer 1F',
            accessorKey: 'Buffer_1F'
        },
        {
            header: 'Buffer 3F',
            accessorKey: 'Buffer_3F'
        }

Any advice would be lovely 🙏

[mamlzy]

is still no update about this?

[victorkvarghese]

any updates? @tannerlinsley @KevinVandy

getting same issue. how to handle a mix of string, numeric and boolean columns?

[HowardStredwick]

Similar problem; mixture of primitives and nodes in the same column. I suspect the answer is to provide customer filters per column definition.

[greg-wiltshire]

I approached it in one of two ways.

1. Set only the columns that you know are strings and have no null values (to make sure that there is a toLowerCase function) to be included in the global filter. To do this I added to the column definition:

enableGlobalFilter: true

2. If you can not be certain that the string columns do not have null values or want to filter numbers/booleans etc then I had to write a function. To achieve this I did the following:

• Added this to my table options:

enableGlobalFilter: true,
onGlobalFilterChange: setGlobalFilter,
globalFilterFn: globalFilterFunction,

Here setGlobalFilter is a React useState hook that is managing the state of the table. globalFilterFunction is my custom function, an example of this would be something like this (using Typescript):

    const globalFilterFunction = (row: Row<Record<string, null | boolean | string | number | string[]>>, columnId: string, filterValue: null | string): boolean => {
        
        const value = row.getValue<string, null | boolean | string | number | string[]>(columnId)
        
        if (filterValue === null || filterValue === "") {

            return true
            
        } else if (value == null) {

            return false

        } else if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {

            return value.toString().toLowerCase().includes(filterValue)
            
        } else if (Array.isArray(value)) {

            return value.some(item => item.toLowerCase().includes(filterValue))

        } else {

            return false
        }
    }

Obviously the above function can be whatever you like depending on your data and filtering rules.

[HowardStredwick]

Thanks for the detailed explanation Greg.

[sean-esper]

I'm trying to get this to work, but it never seems to call my filterFn

How does the table know the filter value has changed?

const table = useReactTable({
    // Data
    data: users,
    columns,

    // Render pipeline
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    initialState: {
      pagination: {
        pageIndex: 0,
        pageSize: PAGE_SIZE,
      },
    },
    enableGlobalFilter: true,
    onGlobalFilterChange: updateGlobalFilterDebounced,
    globalFilterFn: globalFilterFunction,

    debugTable: true,
  });

const globalFilterFunction = useCallback(
    (row: Row<IDepartmentUser>, columnId: string, filterValue: null | string): boolean => {
      const value = row.getValue(columnId);
      console.log('WHOA NELLY');
      console.log({ value, filterValue, globalFilter });

      return true;
    },
    [globalFilter]
  );

[sean-esper]

Oh nevermind! You still need to use the internal table.setGlobalFilter. This is just overriding the global filter.

Appears to bypass the toLowerCase issue. Thanks!

[chiptus]

@tannerlinsley might want to use this function as a more general global function.

[amy-mac]

FYI This issue was fixed in https://github.com/TanStack/table/releases/tag/v8.5.26

[chiptus]

still an issue for me on 8.7