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;
    },