Column filter for not working when first value in data is null

[tacomanator]

Describe the bug

The column filter does not work properly if the first record is null for the column. No records match the query, despite other records having a value which would otherwise match. If the first value is defined, the column filtering works as expected.

In the example, random data is created such that column a is never null, b is sometimes null, and c is usually null. Filtering on column a always works. However, filtering on column b or c works depending on if the first value is null or not.

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/muddy-rain-bj2j7d

Steps to reproduce

1. Go to example
2. Try filtering column a (works as expected)
3. Verify that column b has value in first row (if not, refresh)
4. Try filtering column b on a value in the column (works as expected)
5. Verify that column c has value in first row (if not, refresh)
6. Try filtering column c on a value in the column, row will not match

Expected behavior

Filtering for a column works even if the column has a null value in the first row.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Mac, Chrome Version 109.0.5414.119 (Official Build) (arm64)

react-table version

8.7.9

TypeScript version

4.9.5

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.

[patel-manas]

Hi Team, I am interested in looking this issue

[sefirosweb]

Me too, i have same issue, i attach very simple component:

//@ts-nocheck
import React, { useState } from 'react'
import { flexRender, useReactTable, getCoreRowModel, getFilteredRowModel, ColumnDef } from "@tanstack/react-table";

const data: Array<any> = [
    {
        id: 1,
        name: null, // change here to string value or null to see issue
    },
    {
        id: 2,
        name: 'hello',
    },
    {
        id: 3,
        name: 'welcome',
    },
]

const columns: Array<ColumnDef<any>> = [
    {
        accessorKey: 'id'
    },
    {
        accessorKey: 'name'
    },
]

const TestComponent = () => {
    const [globalFilter, setGlobalFilter] = useState("");

    const table = useReactTable({
        data,
        columns,
        state: {
            globalFilter
        },
        getCoreRowModel: getCoreRowModel(),
        onGlobalFilterChange: setGlobalFilter,
        getFilteredRowModel: getFilteredRowModel(),
        globalFilterFn: (row, column, value) => {
            console.log({ row })
            console.log({ column })
            console.log({ value })
        }
    })

    return (
        <>
            <div>
                <input type='text'
                    value={globalFilter}
                    onChange={(e) => {
                        setGlobalFilter(e.target.value)
                    }}
                />
            </div>

            <table>
                <tbody>
                    {table.getRowModel().rows.map((row) => (
                        <tr key={row.id}                        >
                            {row.getVisibleCells().map((cell) => (
                                <td key={cell.id}>
                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
                                </td>
                            ))}
                        </tr>
                    ))}
                </tbody>
            </table>
        </>
    )
}

export default TestComponent

If first value 1 the "name" is null they the filter for all rows with name doesnt works (see console log of globalFilterFn)

And when the FIRST is NOT null:

[codyzu]

I can't say for the OP, but for @sefirosweb I fixed the same problem by implementing getColumnCanGlobalFilter in the table options.

const table = useReactTable({
  ...
  getColumnCanGlobalFilter: () => true,
  ...
})

That wasn't entirely clear in the docs (I'm making a PR now), but the global filters will not be applied to a column if the first value is not a string or number.

[theMattCode]

A possible quick fix would be to use the accessor function and default to an empty string like this:

const columns = React.useMemo<ColumnDef<Person, any>[]>(
    () => [
      { id: "a", accessorKey: "a" },
      { id: "b", accessorFn: (row: Person) => row.b ?? "" },
      { id: "c", accessorFn: (row: Person) => row.c ?? "" },
    ],
    []
  );

See https://codesandbox.io/p/sandbox/nervous-goodall-7omsx4

[sefirosweb]

A possible quick fix would be to use the accessor function and default to an empty string like this:

With my custom component no works but seems i have any issue, with a "fresh" template seems works fine when is null value

Thanks and i check my own code

[sefirosweb]

Going through the problem I'm having, I found this solves part of the problem,

With global filter it works fine, but when you filter a specific column the fuzzy search doesn't work when the first value is null,

I want to say that it does find it if you put all the exact same string

On the other hand, if the first value is not null, it does an approximate search,

Attached sandbox:

https://codesandbox.io/p/sandbox/aged-water-kwfbs4?welcome=true&file=%2FREADME.md

[michynow]

I would like to second this.

I've also encountered this problem - however with the first row having JSX. If I've had moved the JSX to a second or any other row, the globalFilterFn executes.

Here's an example:
https://codesandbox.io/p/sandbox/react-typescript-forked-3tmgxm

Move the order of data array, and you'll see the search functionality is working dependant on what is in the first place of the array.

the getColumnCanGlobalFilter: () => true, solution makes this work - but it generally is counter-intuitive and has caused me quite a headache.

[Obvio]

This is the solution for anyone bumping into this in the future, including myself ;)
#4711 (comment)