table icon indicating copy to clipboard operation
table copied to clipboard

docs: add getFilteredRowModel information to Filters page

Open theilgaz opened this issue 2 years ago • 0 comments

Global Filters is an excellent feature for dealing with huge datasets. I tried to use this fantastic functionality in TanStack React table, however it didn't work.

I discovered that 'getFilteredRowModel' is a necessary parameter when using 'globalFilter'. To enable global filtering, set 'getFilteredRowModel' from '@tanstack/react-table' to options like this:

    const table = useReactTable({
        data,
        columns,
        getCoreRowModel: getCoreRowModel(),
        onSortingChange: setSorting,
        getPaginationRowModel: getPaginationRowModel(),
        getSortedRowModel: getSortedRowModel(),
        getFilteredRowModel: getFilteredRowModel(), // add this line
        onGlobalFilterChange: setFilter, // add this line
        onRowSelectionChange, 
        state: {
            sorting,
            globalFilter: filter, // add this line
            rowSelection,
        },
    })

And we can use this filtering with custom input from another component, which should be called as follows:

    const [filter, setFilter] = useState<string>("")
    ...

return(
<>
    ...
     <input
          className="form-input pl-9 bg-white dark:bg-slate-800"
          type="search"
          placeholder={item.placeholder || t("functions.search")}
          value={item.value}
          onChange={(e) => item.onSearch(e.target.value)}
      />
</>
)

theilgaz avatar Oct 02 '23 14:10 theilgaz