Global Filtering on Table

[jbudus]

Hi all,

I'm by no means an expert but know enough to implement a working MERN stack. I'm using shadcn-ui Table and have implemented the reusable components that are shown in the document all successfully. However, I cannot figure out how to move from column filtering to global filtering and though have studied tanstack-table as much as I could, failed to be successful. I would love to create a component that uses the best of shadcn ui Table and implements globalFiltering.

Does anyone have the patience to provide a guide or sample of this for me. I've watched YouTube videos, seen examples of tanstack implementation but not any that show shadcn-ui/Table + global filtering implementation of tanstack/table.

Thank in advance

J

[Reggenius]

Hello @jbudus
Hope you are good?

I was able to implement a global search functionality in shadcn-ui/Table with the help of the information gotten from the post (URL provided) below:
Post URL: Reddit comment

All I had to do was define a useState variable:
const [globalFilter, setGlobalFilter] = React.useState<any>([]);

Added the globalFilter object in the state object-key inside the initialised constant (table):

const table = useReactTable({
    data: clawData,
    columns,
    onSortingChange: setSorting,
    onColumnFiltersChange: setColumnFilters,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    onColumnVisibilityChange: setColumnVisibility,
    onRowSelectionChange: setRowSelection,
    state: {
      sorting,
      columnFilters,
      columnVisibility,
      rowSelection,
      globalFilter
    },
  });

Then modified the Input searchbar accordingly like this:

<Input
      placeholder="SEARCH"
      value={globalFilter ?? ""}
      onChange={(e) => {
        setGlobalFilter(e.target.value);
        table.setGlobalFilter(String(e.target.value));
    }}
      className="max-w-sm"
    />

Hope it helps.