Building an elegant HTML table using react-table and react-query

Tables are a nice way to display data that arrives on the frontend as a list (array) of objects (think JSON objects). They are very ubiquitous in many a UI implementations you work with or see around especially in admin dashboards or e-commerce checkout pages.

This is why today, i am going to be sharing how to build a very elegant (and versatile) table in ReactJS using react-table and react-query. By the end of this tutorial, you would be able to build and use a HTML table that can display your data in many interesting ways with custom controls built right in with the following functions:

1. A row select column (by default)
2. A custom table cell value formatter function
3. A custom header title with toggle checkboxes
4. A custom column with controls as part of a dropdown menu
5. A table state change callback
6. A table row selection callback

So, let’s dive right in!

P.S. This article is not going to introduce react-table or react-query. If you need introductions on how to install, learn and use these ReactJS libraries, look up this article and this one respectively. Pause this article and read those first before you continue here.

Also, the code in this article will be written in TypeScript 4.1+. I am using react-table v7.7.0 and react-query v3.21.0

Here is the final outcome of what we are trying to put together in this tutorial article:

Custom HTML Table — React-Table, React-Query, React

Before we get started building the table proper, we need to build a couple of smaller presentation and concrete components. They include the following

• A Badge component
• A Dropdown component
• A ProgressBar component
• A Paginator component (used with the Table)
• A SearchBar component (used with the Table)

We begin with the Badge component. See code below:

Next is the Dropdown component. See code below:

We now have to create the ProgressBar component. See code below:

Moving on, we define the Paginator component. See code below:

Finally, we setup the SearchBar component. See code below:

Now that we have all we need, let’s build our table proper. We will utilise excerpts from the react-table docs and throw in our own custom code in the mix to achieve what we want. Below is the final code for the table (It’s quite long — sorry 😐).

It’s has come together nicely now as we will soon see. You might notice that we have a TypeScript declare module block at the top of the code for the Table component code. This is so that our code compiles (by utilising Interface Merging) without errors as many of the types/interfaces defined in the official types declarations for react-table don’t work with TypeScript 4.x+ and/or are incorrectly defined.

Now we can create a static array of object (type Post) and fill up the table using the code below:

App

Below is how the table looks (with the array of Post objects) when we render it:

Table — rendering Post object(s)

As you can see above, how the search-bar and progress-bar are displayed above and also how the Badge component is used to modify the rendering of the “Title” column in uppercase.

Moving on from local static data for the table, let’s see how we can fetch data remotely using react-query in order to populate the table. Firstly, we need to setup the http client (axios) pointed to the api service URL like so:

Now, we need to create the query client with all it configuration which will used to manage fetches and saves to the api URL endpoint:

The query client will be used inside a ReactJS hook which will also make use of the fetch routine that sets up axios. Here is the ReactJS hook below:

See above in the comments why we have one hook function and a normal function exported. We are now going to make use of the above to manually paginate (NOTE: this is a react-table feature that allows us to control pagination directly whenever the table state changes as opposed to have the table do it for us) on the table. See below:

You now get a table that loads like this:

Table (Loading…)

And a table that looks like this when loaded:

Table (Loaded!)

That’s it folks! If you have any questions, criticisms or suggestions do let me know in the comments. I would love to hear from you! 👍

Also, here is the github repo to test it all out (if you are into it).