Last update date: 
A filter function determines whether a row should be included based on filter values.
You can define your own custom filter functions for columns.
The Official Type Signature
TanStack Table exposes a generic type for filter functions:
ts
A filter function receives:
- row: Row object
- columnId: string
- filterValue: any
- addMeta: (optional) function for metadata
How to Define a Custom Type
Learn how to define strongly typed, reusable custom filter functions for TanStack Table using FilterFn<T> from generic to fully typed tables.
For a Generic Table
ts
import type { FilterFn } from ‘@tanstack/react-table’;
// For any row type:
const myFilter: FilterFn<any> = (row, columnId, filterValue, addMeta) => {
// return true if row passes filter
return row.getValue(columnId) === filterValue;
};
For a Typed Table (Recommended)
ts
import type { FilterFn } from ‘@tanstack/react-table’;
type Person = { name: string; age: number };
const myPersonFilter: FilterFn<Person> = (row, columnId, filterValue, addMeta) => {
// Example: filter by substring match
const value = row.getValue<string>(columnId);
return typeof value === ‘string’ && value.toLowerCase().includes(String(filterValue).toLowerCase());
};
Also Read: How to Update the Create React App to Its Latest Version?
Custom Type Alias (For Reuse)
ts
import type { FilterFn } from ‘@tanstack/react-table’;
type MyFilterFn<T> = FilterFn<T>;
// Usage:
const myFilter: MyFilterFn<Person> = (row, columnId, filterValue) => {
// custom logic
return true;
};
Registering Your Custom Filter
ts
import { createColumnHelper } from ‘@tanstack/react-table’;
const columnHelper = createColumnHelper<Person>();
const columns = [
columnHelper.accessor(‘name’, {
header: ‘Name’,
filterFn: myPersonFilter, // <– use your custom filter here
}),
];
Worth Reading
Tip
Use the FilterFn<T> type from TanStack Table for your custom filter functions, type your data for safety, and always return a boolean to indicate if the row passes the filter!
