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 } }) => (
  <input
    value={filterValue || ''}
    onChange={e => setFilter(e.target.value)}
    placeholder='Search...'
  />
);

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 } }) => (
  <>
    <input
      type='date'
      value={filterValue[0] || ''}
      onChange={e => setFilter([e.target.value, filterValue[1]])}
    />
    to
    <input
      type='date'
      value={filterValue[1] || ''}
      onChange={e => setFilter([filterValue[0], e.target.value])}
    />
  </>
);

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 } }) => (
  <select
    onChange={e => setFilter(e.target.value || undefined)}
    value={filterValue || ''}
  >
    <option value=''>All</option>
    {preDefinedValues.map((value, idx) => (
      <option key={idx} value={value}>
        {value}
      </option>
    ))}
  </select>
);

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.