Client-side column filtering
A browser-rendered data grid filters loaded rows without sending each filter operation to a server.
TanStack · Function
getFilteredRowModel
getFilteredRowModel configures the row model used for client-side column filtering. The table instance exposes the resulting filtered rows through the same-named method.
How it works
The table option accepts a factory callback. Calling the adapter-provided getFilteredRowModel() registers that callback, which computes the table's filtered row model when filtering is needed; the table instance then exposes the resulting model through getFilteredRowModel().
Syntax
getFilteredRowModel?: (table: Table<TData>) => () => RowModel<TData>Parameters
| Name | Type | Description |
|---|---|---|
table | Table<TData> | The table instance supplied to the row-model factory. |
Returns
The option returns a callback producing RowModel<TData>; the table instance method returns RowModel<TData> after column filtering.
Key points
- TanStack Table adapters provide the standard implementation, so applications can import it instead of writing filtering logic.
- The table instance method exposes rows after column filters have been applied.
- The configured option is initialized once for each table instance.
- The returned callback performs filtering lazily when the table requires the filtered model.
Common mistakes
- Do not register it for server-side filtering when the server already supplies filtered data.
- Client-side filtering will not be configured unless this option is supplied.
- The option expects a factory that returns the calculation function; pass the adapter factory's result rather than a row model directly.
Example: Enable client-side filtering
import { getCoreRowModel, getFilteredRowModel, useReactTable } from '@tanstack/react-table'
const table = useReactTable({
data: [
{ name: 'Ada', role: 'Engineer' },
{ name: 'Linus', role: 'Engineer' },
],
columns: [
{ accessorKey: 'name', header: 'Name' },
{ accessorKey: 'role', header: 'Role' },
],
getCoreRowModel: getCoreRowModel(),
getFilteredRowModel: getFilteredRowModel(),
})
console.log(table.getFilteredRowModel().rows.length)Creates a table with the built-in client-side filtered row-model factory and reads the resulting filtered rows.
When to use it
Custom filtering implementation
A custom adapter or table integration needs to supply its own row-model calculation.
Interview questions
QWhen is getFilteredRowModel required?
Use the option for client-side filtering. The adapter export returns a function that computes and returns the filtered row model when the table needs it.
Follow-up: How should server-side filtering be configured? Omit this option and pass data that the server has already filtered.
QWhat are the option and instance-method signatures?
The option is a table-level callback with signature (table: Table<TData>) => () => RowModel<TData>. The table instance method has a separate signature, () => RowModel<TData>, and returns the result after column filtering.
Follow-up: What does the callback's returned function do? It performs the row-model calculation when filtering is requested, rather than returning the model immediately.
QHow do you enable the default implementation?
The default implementation is exported by a table adapter. Import getFilteredRowModel from the adapter and configure getFilteredRowModel: getFilteredRowModel() for built-in client-side filtering.
Follow-up: Can the default be replaced? Yes; the option can receive a custom implementation that returns a function calculating the filtered row model.
Related
getCoreRowModelgetPreFilteredRowModelgetRowModelmanualFiltering