T
TanStack•2y ago
typical-coral

global filter ignores other columns

I am using react-table like this: 
function Table({ data, columns }) {
  const [sorting, setSorting] = useState<SortingState>([
    {
      id: "id",
      desc: true,
    },
  ]);
  const [globalFilter, setGlobalFilter] = useState("");

  const table = useReactTable({
    data,
    columns,
    state: {
      globalFilter,
      sorting,
    },
    onSortingChange: setSorting,
    onGlobalFilterChange: setGlobalFilter,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
  });
// ...
}
function Table({ data, columns }) {
  const [sorting, setSorting] = useState<SortingState>([
    {
      id: "id",
      desc: true,
    },
  ]);
  const [globalFilter, setGlobalFilter] = useState("");

  const table = useReactTable({
    data,
    columns,
    state: {
      globalFilter,
      sorting,
    },
    onSortingChange: setSorting,
    onGlobalFilterChange: setGlobalFilter,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
  });
// ...
}
What I do not understand is why the global filter ONLY works with the column "id" but when I type "Peter" in my global filter input, I get nothing/table is removed, even if I have a user called "Peter". I mean I can see the columns firstName and lastName but the global filter is ignoring them
1 Reply
typical-coral
typical-coralOP•2y ago
I found the solution! when one of your rows contains null, it will be ignored while global filtering

Did you find this page helpful?