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:
Next, add a HTML input field to the Table component, or somewhere entirely else if you want, to set the search state:
The search state is working. Finally, search the list of items (here: nodes) before it reaches the Table component:
Thatâs it. If you want the search to be case insensitive, then you have to change the filter function to:
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.