How to: React Table with Search

 by Robin Wieruch
 - Edit this Post

This tutorial is part 2 of 2 in this series.

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 -- which holds the state of the search -- and a new -- which acts as a callback function for the user interaction later on:

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:

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:

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:

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 tutorial.

Keep reading about 

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

In this tutorial, I want to show you how to use React Table Library to create a Tree Table or Tree List . In the previous example, you installed React Table Library to create a table component…

The Road to React

Learn React by building real world applications. No setup configuration. No tooling. Plain React in 200+ pages of learning material. Learn React like 50.000+ readers.

Get it on Amazon.