Advanced Column Filtering

Shows how to create a complex column filter that allows users to filter data based on multiple criteria within React TanStack Table, such as text inclusion, date ranges, or predefined lists.
const AdvancedTextFilter = ({ column: { filterValue, setFilter } }) => (
    value={filterValue || ''}
    onChange={e => setFilter(}
Defines a simple text input filter that allows users to filter data based on text inclusion. It captures the user's input and uses it to filter the column data.
const DateRangeFilter = ({ column: { filterValue = [], setFilter } }) => (
      value={filterValue[0] || ''}
      onChange={e => setFilter([, filterValue[1]])}
      value={filterValue[1] || ''}
      onChange={e => setFilter([filterValue[0],])}
Introduces a date range filter component. Users can specify a start and end date to filter data within a certain date range. The setFilter function is called with an array containing the start and end dates as its value.
const PredefinedListFilter = ({ column: { filterValue, setFilter, preDefinedValues } }) => (
    onChange={e => setFilter( || undefined)}
    value={filterValue || ''}
    <option value=''>All</option>
    {, idx) => (
      <option key={idx} value={value}>
Creates a filter with a predefined list of options. This is useful for columns where the values are known in advance and limited. Users can select a value from the dropdown to filter the column data accordingly.
const columns = useMemo(() => [{
  Header: 'Name',
  accessor: 'name',
  Filter: AdvancedTextFilter,
}, {
  Header: 'Registration Date',
  accessor: 'registrationDate',
  Filter: DateRangeFilter,
}, {
  Header: 'Status',
  accessor: 'status',
  Filter: PredefinedListFilter,
  preDefinedValues: ['Active', 'Inactive', 'Pending'],
}], []);
Defines the columns for the React TanStack Table, each equipped with a specific filter type. This example includes a text filter for names, a date range filter for registration dates, and a predefined list filter for statuses. The preDefinedValues property for the Status column specifies the available options for that filter.