React Table Tutorial: useFilter (Part 2)
In the previous blogpost of React Table tutorial series, we learned how to get started with React-table-tutorial-7 and built a demo application using hook useTable. Adding more to the react-table tutorial series, we will now pick another hook, useFilter, and implement it in the same demo app, that we’ve built earlier.
So, I’d suggest going through my previous blog, React Table Tutorial: Project Setup and useTable, if you want to build the application from scratch; here, we will only implement the useFilter hook and explore a bit about the same.
Overview
Remember how we used to implement filtering in react-table v6 to v7? It was kind of messy and too much to take care of. But, thanks to react-table v7 for making it more accessible, handy, and customizable. The headless version of the react-table gives you control for designing and maintaining the table as per your requirements. Also, Also, new features of the react-table make the React table library lightweight and give you opportunities to improve performance.
React Table Tutorial Goal: useFilter hook
Getting started with React Table useFilter hook
Once, done with setting up the project with the useTable hook, follow these steps to implement useFilter and useGlobalFilter in your project.
According to our UI, this will be the project structure for the react-table example.
We will implement the default filter and select column filter. For that, we will
Update App.js & TableContainer.js
Create a new file named – Filter.js (which will have functional components for Filter views)
Without further ado, let’s create Filter.js and define React table components for Filter UI.
Read more for Defining Filter Components for UI
Also read:
React Table Tutorial: Project Setup and useTable (Part 1)
