Custom global filter?

[maybebansky]

I need to have a global filter but with different filter logic for each column.

type Row = {
  id: number;
  name: string;
};

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

const table = useReactTable({
    columns,
    data,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    state: {
      globalFilter: filtering,
    },
    onGlobalFilterChange: setFiltering,
    globalFilterFn: (row, columnIds, filterValue) => {
      console.log({ row, columnIds, filterValue });
      return true;
    },
});

I understand that I need to use the globalFilterFn prop on useReactTable, rather than define the filter logic in columns as you would do for column filters?

I'm logging the arguments for the globalFilterFn function to see what's going on, but the only value in columnIds is id. I'm not seeing name.

Have I done something wrong or is this to be expected? As columnIds only has id I can't see how to write filter logic for the other columns?

Here is my full code: https://codesandbox.io/p/devbox/epic-ride-7v9jtl?file=%2Fsrc%2FApp.tsx%3A24%2C37

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

type Row = {
  id: number;
  name: string;
};

const columnHelper = createColumnHelper<Row>();

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

const data: Row[] = [
  {
    id: 1,
    name: "Jim",
  },
  {
    id: 2,
    name: "Pam",
  },
];

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

  const table = useReactTable({
    columns,
    data,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    state: {
      globalFilter: filtering,
    },
    onGlobalFilterChange: setFiltering,
    globalFilterFn: (row, columnIds, filterValue) => {
      console.log({ row, columnIds, filterValue });
      return true;
    },
  });

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

export default App;

[maybebansky]

It's because return true prevents the function from iterating over the other columns 🤦. Changing it to false works as expected:

    globalFilterFn: (row, columnIds, filterValue) => {
      console.log({ row, columnIds, filterValue });
      return false;
    },

[msruan]

marry with me!!!!!
i was looking for how to implement global filter by hours, and u make it so easy.
thank u very much!
(off: where did u learned how to make it? the docs make me really confused)