Creating a Custom Text Input Filter for React TanStack Table

Show how to develop a custom text input filter component for a specific column in React TanStack Table, including passing and using the filter value.

import React from 'react';

Import React to use its features for creating the filter form component.

const TextInputFilter = ({ column: { filterValue, setFilter, id } }) => (
  <span>
    <input
      value={filterValue || ''}
      onChange={e => setFilter(e.target.value || undefined)}
      placeholder={`Search ${id}`}
    />
  </span>
);

Defines a TextInputFilter component. It takes a column object destructured to get filterValue, setFilter, and id. Uses these to render an input element where users can type their search query. The onChange event updates the column's filter value.

export default TextInputFilter;

Exports the TextInputFilter component for use in column definitions.

// In the columns definition file or component
import TextInputFilter from './TextInputFilter';

const columns = [
  {
    Header: 'Name',
    accessor: 'name',
    Filter: TextInputFilter,
    filter: 'includes'
  }
  // Add more column definitions here
];

Imports TextInputFilter and uses it in a column definition for a 'Name' column. Here, 'Filter' specifies the component to use for filtering, and 'filter' defines the filtering method.