How to: React Table with Search

In this tutorial, I want to show you how to use React Table Library with a search feature. In the previous example, you installed React Table Library to create a Table component. Now, we will enable users to search data in the table.

React Table Library does not come with a native search feature, however, as you have access to the data from the outside, you can manipulate it before passing it to the table. Let’s see how this works.

First, create a new React useState Hook — which holds the state of the search — and a new event handler — which acts as a callback function for the user interaction later on:

javascript

const App = () => {
  const [search, setSearch] = React.useState('');

  const handleSearch = (event) => {
    setSearch(event.target.value);
  };

  ...
};

Next, add a HTML input field to the Table component, or somewhere entirely else if you want, to set the search state:

javascript

const App = () => {
  ...

  return (
    <>
      <label htmlFor="search">
        Search by Task:
        <input id="search" type="text" onChange={handleSearch} />
      </label>

      <Table data={data}>
        ...
      </Table>
    </>
  );
};

The search state is working. Finally, search the list of items (here: nodes) before it reaches the Table component:

javascript

const App = () => {
  const [search, setSearch] = React.useState('');

  const handleSearch = (event) => {
    setSearch(event.target.value);
  };

  const data = {
    nodes: list.filter((item) =>
      item.name.includes(search)
    ),
  };

  return (
    <>
      <label htmlFor="search">
        Search by Task:
        <input id="search" type="text" onChange={handleSearch} />
      </label>

      <Table data={data}>
        ...
      </Table>
    </>
  );
};

That’s it. If you want the search to be case insensitive, then you have to change the filter function to:

javascript

const data = {
  nodes: list.filter((item) =>
    item.name.toLowerCase().includes(search.toLowerCase())
  ),
};

You have seen that React Table Library does not offer a native plugin for a search feature. However, as you can simply pass a searched list from the outside to the table, after searching it outside the Table component, you have all the options you need to hand.

If you want to see how a table filter works as well, head over to my React Table with Filter tutorial.

Never Miss an Article