Integrating Global Search

Implement a global search feature across all columns in the TanStack Table, showing how to configure and optimize for performance.

import { useGlobalFilter, useTable } from 'react-table';

Import necessary hooks from react-table.

const GlobalFilter = ({ globalFilter, setGlobalFilter }) => (
  <input
    value={globalFilter || ''}
    onChange={e => setGlobalFilter(e.target.value)}
    placeholder={'Search all columns...'}
  />
);

Defines the GlobalFilter component which takes globalFilter state and setGlobalFilter function as props.

const Table = ({ columns, data }) => {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    state,
    setGlobalFilter
  } = useTable({ columns, data }, useGlobalFilter);
  
  const { globalFilter } = state;
  
  return (
    <div>
      <GlobalFilter globalFilter={globalFilter} setGlobalFilter={setGlobalFilter} />
      <table {...getTableProps()}>
        <thead>
          {/* Render the header rows here */}
        </thead>
        <tbody {...getTableBodyProps()}>
          {/* Render the body rows here */}
        </tbody>
      </table>
    </div>
  );
};

Sets up the table component, integrating the useTable hook with useGlobalFilter for global filtering. The GlobalFilter component is utilized to control the global filter state.