Error when global filter called for numeric columns

[lexanth]

Describe the bug

#4124 (fixed by a5578ac) makes the table now call the global filter functions for strings and numbers.

However, most of the built-in filter functions don't handle numbers, they assume the value is a string (https://github.com/TanStack/table/blob/main/packages/table-core/src/filterFns.ts)

This makes it very liable to break (e.g. auto filter does includesString, which breaks on toLowerCase). The workaround is easy - provide a custom filter function for numeric columns or exclude them from the filtering.

It would be nicer if the default filter functions handled numbers

Your minimal, reproducible example

https://nyxdj8.sse.codesandbox.io

Steps to reproduce

1. Type "a" in the global filter
2. See Uncaught TypeError: _row$getValue.toLowerCase is not a function in the console (filtering doesn't complete)

Expected behavior

The default filter functions should handle numbers by default

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

macOS, Chrome

react-table version

8.3.0

TypeScript version

4.6.3

Additional context

No response

Terms & Code of Conduct

• I agree to follow this project's Code of Conduct
• 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.

[marceloverdijk]

While upgrading from 8.2.x to 8.3.3 I'm experiencing the same.

      {
        id: 'matches',
        header: 'Matches',
        accessorFn: (originalRow) => originalRow.matches.toString(), // matches is a number
        // accessorKey: 'matches', // this worked before
        sortDescFirst: true, // and I also had to add this explicitly
      },

[fabiendeborde]

Just stumbled upon this and found a way around the error.
Using the latest ColumDefs documentation, I updated my numeric columns to display a string instead of a number (since it doesn't really make sense to use a number here anyway...)
Now the global filter is working without having to provide a custom filter function.

const columns: ColumnDef<User>[] = [
  columnHelper.accessor(row => row.id.toString(), {
    id: 'id',
    header: 'User ID'
  }),
  ...
]

[marceloverdijk]

@fabiendeborde i don't think using the accessor is the smartest way to do this.
In fact this will impact your sorting, as it will now sort by the string value and not the number value..
Imagine number values like: 10, 101, 20

[jeg924]

Does "2 tasks done" mean someone is working on a fix?

[fabiendeborde]

@marceloverdijk I was worried about that too, but the default sorting is working just fine...
To me, since the search input is also a string, it doesn't shock me much to cast the number data to a string, as long as the sorting keeps working.
(Entering a string and expecting the filter function to find a number feels a bit too "magical" to me)

[jeg924]

@fabiendeborde Thanks for your work, you solved my problem!

[marceloverdijk]

@tannerlinsley was there a fix for this? as with latest 8.5.5 I'm still getting a l.toLowerCase is not a function error when using a global filter with numeric columns...

[marceloverdijk]

@marceloverdijk I was worried about that too, but the default sorting is working just fine... To me, since the search input is also a string, it doesn't shock me much to cast the number data to a string, as long as the sorting keeps working. (Entering a string and expecting the filter function to find a number feels a bit too "magical" to me)

Yes I noticed this as well for some of my tables, that the sorting was working just fine as expected (sorting by number and not string). However it's a bit strange it's working like that to be honest --> as we explicitly converted to string...

Now the funny part is I see this behaviour for all my tables except for just 1...

Breaking my head on this one ;-)

[liubomyr123]

Just stumbled upon this and found a way around the error. Using the latest ColumDefs documentation, I updated my numeric columns to display a string instead of a number (since it doesn't really make sense to use a number here anyway...) Now the global filter is working without having to provide a custom filter function.

const columns: ColumnDef<User>[] = [
  columnHelper.accessor(row => row.id.toString(), {
    id: 'id',
    header: 'User ID'
  }),
  ...
]

Thanks, helped me!

[s-iliyas]

We can use this too,

    {
      accessorKey: "id",
      accessorFn: (row) => row?.id?.toString(),
      filterFn: (row, columnId, filterValue) => {
        console.log(row.getValue(columnId), filterValue);
        return row.getValue(columnId) === parseInt(filterValue);
      },
      header: ({ column }) => {
        return (
          <p
            onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
            className="flex items-center"
          >
            Id
            <ArrowUpDown className="ml-2 h-4 w-4" />
          </p>
        );
      },
      cell: ({ row }) => <p>{row.getValue("id")}</p>,
    },

[real-marty]

Just stumbled upon this and found a way around the error. Using the latest ColumDefs documentation, I updated my numeric columns to display a string instead of a number (since it doesn't really make sense to use a number here anyway...) Now the global filter is working without having to provide a custom filter function.

const columns: ColumnDef<User>[] = [
  columnHelper.accessor(row => row.id.toString(), {
    id: 'id',
    header: 'User ID'
  }),
  ...
]

Thanks, helped me!

import { ColumnDef, createColumnHelper } from "@tanstack/react-table";

const columnHelper = createColumnHelper<Job>();

export const jobColumns: ColumnDef<Job, string>[] = [
  columnHelper.accessor((row) => row.id.toString(), {
    id: "id",
    header: "User ID",
  }),