Global Filter does not work, if one of your columns has null

[codelover2k]

If one of your columns contain null, the globalfilter does not work.
The only way to make it work, is to use map() and change every null to an empty string.

Is there maybe a way to tell react-table to transform nulls to empty strings or ignore them on globalfiltering, so to save some map() logic for every table that you are using?

[jameschetwood]

Im having the same issue in my app, but when I try to recreate a simple example it works fine.

https://codesandbox.io/p/devbox/epic-ride-forked-6j9dpl?file=%2Fsrc%2FApp.tsx%3A67%2C40

import { useState } from "react";
import {
  flexRender,
  getCoreRowModel,
  useReactTable,
  createColumnHelper,
  getFilteredRowModel,
} from "@tanstack/react-table";

type Row = {
  id: number;
  name: string;
  age?: number | null;
};

const columnHelper = createColumnHelper<Row>();

const columns = [
  columnHelper.accessor("id", {
    header: "ID",
    cell: (info) => info.getValue(),
  }),
  columnHelper.accessor("name", {
    header: "Name",
    cell: (info) => info.getValue(),
  }),
  columnHelper.accessor("age", {
    header: "Age",
    cell: (info) => info.getValue(),
  }),
];

const data: Row[] = [
  {
    id: 1,
    name: "Jim",
    age: 30,
  },
  {
    id: 2,
    name: "Pam",
    age: null,
  },
  {
    id: 3,
    name: "Mike",
  },
];

function App() {
  const [filtering, setFiltering] = useState("");

  const table = useReactTable({
    columns,
    data,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    state: {
      globalFilter: filtering,
    },
    onGlobalFilterChange: setFiltering,
    globalFilterFn: (row, columnIds, filterValue) => {
      if (columnIds === "id") {
        return `${row.original.id}` === filterValue;
      } else if (columnIds === "name") {
        return row.original.name === filterValue;
      } else if (columnIds === "age") {
        return `${row.original.age}` === filterValue;
      }
      return false;
    },
  });

  return (
    <div>
      <input
        type="text"
        value={filtering}
        onChange={(e) => setFiltering(e.target.value)}
        className="bg-red-200"
      />
      <table>
        <thead>
          {table.getHeaderGroups().map((headerGroup) => {
            return (
              <tr key={headerGroup.id}>
                {headerGroup.headers.map((header) => {
                  return (
                    <td key={header.id}>
                      {flexRender(
                        header.column.columnDef.header,
                        header.getContext(),
                      )}
                    </td>
                  );
                })}
              </tr>
            );
          })}
        </thead>

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

[jhelmink]

I think this is because you've written your own explicit Global filter function instead of using the default built in one;

    globalFilterFn: (row, columnIds, filterValue) => {
      if (columnIds === "id") {
        return `${row.original.id}` === filterValue;
      } else if (columnIds === "name") {
        return row.original.name === filterValue;
      } else if (columnIds === "age") {
        return `${row.original.age}` === filterValue;
      }
      return false;
    },

[eelenkoen-ns]

For anyone stumbling across this problem:

As stated in Global Filtering APIs | TanStack Table Docs (can-filter), if getColumnCanGlobalFilter is undefined, the column is assumed to be globally filterable if the value in the first row is a string or number type.

This can be verified in the source code:

• getCanGlobalFilter
• getColumnCanGlobalFilter

Therefore, a solution would be to overwrite getColumnCanGlobalFilter in your table definition to handle other types.

const table = useReactTable({
    ...
    getColumnCanGlobalFilter: function(){ /* add your logic here */ }
    ...
})