This post is a continuation of my article on Using React Query with React Table. I recommend reading that first to understand the full context.

We will also be following along with the same set of example code which can be found at github.com/nafeu/react-query-table-sandbox. We will be focusing on the ReactTableFilterSort.jsx file.

You can get it quickly set up with:

What We Are Building

Understanding Our Data

In the example code, I prepared a mock api which returns data for an imaginary software dev discussion group website. The data is formatted like so:

For the purpose of this tutorial, our data will not get any more complex than this. How can we now leverage React Table to implement a global filter and sortability into our table? We will do so by modifying our existing ReactQueryWithTable example. Let's get started.

Adding a Global Filter Component

First we want to import some additional hooks from the react-table library, namely the useGlobalFilter, useAsyncDebounce and useSortBy hooks:

Then we want to create a new component called GlobalFilter which takes a few React Table defined props and renders a search box for us:

Using useState and globalFilter, we create a value state variable which keeps track of what we put into our search box, and we use useAsyncDebounce to call setGlobalFilter with a 200ms input delay.

We can’t really see it here, but setGlobalFilter performs quite a bit of magic. As our globalFilter object is connected to the rest of the table, updates from setGlobalFilter will modify the visible rows in our table.

Updating our TableQuery Component

The only modification we do here is add enabled: !tableData to prevent the table from re-fetching in the background as it can mess up the filtered or sorted order. Implementing re-fetching with a filtered or sorted structure is a more advanced topic that won't be covered in this article.

Updating our TableInstance Component

Here we just update the tableInstance instantiation with the hooks useGlobalFilter and useSortBy

Updating our TableLayout Component

Here is where the bulk of our updates are in comparison to the ReactQueryWithTable.jsx file:

We pull out the following additional props from our table instance:

These allow us to access the globalFilter object, info on visibleColumns, the globalFilter setter and the preGlobalFilteredRows helper.

Inside our <thead> we insert a new <tr>, set it's colSpan to the count of visibleColumns and insert our GlobalFilter component like so:

This is what it renders:

After this <tr> and inside the same <thead>, we include a modified version of the headerGroups like so:

One of the most important things here is the use of column.getSortByToggleProps(), this is what allows us to hook into React Table's sorting functionality.

Honestly, that is all it takes. We add some extra UI elements in the form of:

Which display the sorting state. They utilize .isSorted and .isSortedDesc which again, are values provided to us by React Table thanks to useSortBy.

And there you have it, that’s all it takes to implement a global filter and sorting using React Table. We are using all default configurations here, but React Table also allows you to control the algorithms behind sorting and filtering. Hope this has helped.

Happy Coding!

--

--

--

is a musician and full-stack web developer from Toronto, Canada who studied Computer Science and Linguistics at the University of Toronto.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

100 Days of Code — Day 14: Building a Unit Converter

How to design a parking lot using?

Quick Thoughts on React (virtual DOM)

Intellij SFCC 2020.1.5 / Salesforce B2C Commerce plugin for Jetbrains IDEs

Set up new Project with .Net Core and Angular 9

Find The Parity Outlier

Creating animated glTF Characters with Mixamo and Blender

Testing Maps e2e with Cypress

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nafeu Nasir

Nafeu Nasir

is a musician and full-stack web developer from Toronto, Canada who studied Computer Science and Linguistics at the University of Toronto.

More from Medium

Svelte vs Vue: Which Front-End Framework is Right for You?

Svelte vs Vue

Why You Should Choose ReactJS For Your Next Project? | Benefits of React JS

What to do after Colt Steele’s Web Developer Bootcamp?

How to host a react app to netlify from Github Pages.