table
table copied to clipboard
docs: add getFilteredRowModel information to Filters page
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)}
/>
</>
)