A complete guide for React Table

In this article, We will discuss what is React table and how to efficiently use the react-table library to create tables in our React application. We will learn how to implement some basic functionalities like sorting, filtering and searching etc.

What is React Table?

A React Table is one of the most widely used table libraries in React. It uses React Hooks both internally and externally for almost all of its configuration and lifecycle management. Naturally, this is what allows React Table to be headless and lightweight while still having a concise and simple API.

On 1 July 2022, Tanner announced the release of TanStack table, which offers a major upgrade from React Table v7.

TanStack Table v8 is designed to be more performant and feature-rich than v7, supporting additional web frameworks like Vue, Solid, and Svelte. Later in this article, we’ll see what a potential migration from React Table v7 might look like.

When to use React Tables

There are many scenarios where we can use react-table such as basic sorting, filtering, grouping, and searching etc. You should consider using react-table when you met the following conditions.

• When out Table UI needs some basic features like sorting, filtering and pagination.
• Custom UI design for the table without affecting functionality.
• Easy extensibility, You can build your own features on top of React Table by using custom plugin Hooks.

React Table features

Let's get down to the react-table quick features.

• It is lightweight, about 5kb - 14kb+.
• It supports multiple features like sorting, filtering, pagination etc.
• It works with hooks and its a collection of custom react hooks.
• You can show and hide the columns.
• It supports nested/grouped headers.
• It has support for resizable table UI. It provides expandable rows to show complete data about the row.

Adding React Table to your app

For us to get started with react-table, we would have to install it in our react project directory using the command below:

Basic React Table

When using React tables, data and columns are the two significant pieces of information needed. The information we will pass into the rows is known as the data, and the objects used to define the table columns are called the columns (headers, rows, how we will show the row, etc.).

Get your data

We need to provide data to the react-table and here we are using useMemo hook in order to not to recreate the data instance on every render.

Define columns

Now we have some data, let's create columns definitions to pass into useTable hook.

Apply Table instance to markup

We have some data and columns that needs to be passed into table instance. Let's create table instace using useTable hook and apply it to HTML markup to make it live.

Now, once all of the above things are done, if we we put all of this together, we should get very basic table.

Implementing filtering the react table  with useGlobalFilter hook

This is another default function for React-table. To do this, we add useFilters and useGlobalFilter hooks to our code. The difference between these two hooks is that the first is responsible for filtering a specific column, while the global filter works on the entire table – any column and row.

Implementing Global Filtering

The useGlobalFilter allows us to filter the entire table based on any value passed into our filter text field. Let's start by passing in the useGlobalFilter hook as a second parameter where we initialized the useTable hook. And we will also add two methods to the previously destructured hooks and array methods. For implementing Global Filtering, we need to import useGlobalFilter and along with useTable hook.

In the input field, we set the value to globalFilter and the method to help set this value is setGlobalFilter(). With this, we have been able to implement global filtering successfully. For this, the code will look like the below.

Implementing Column Filtering

Now, let's look into column filtering in react-table. We can implement column filtering with the useFilters hook. Column filtering refers to having filter fields on each column capable of filtering the table based on each. These fields will be added directly to the table header, meaning we would need to edit the columns and markup. Let's start by creating the text field in a separate component which we would later add to all columns:

In the above code snippet, the form takes in a column prop which we can destructure to get the filterValue and setFilter values. These values would be used to control the forms input to help filter each column.

Let's import the useFilters hooks in our table component, and add it to the useTable hook instance:

Now, in our markup, we would add the filter field in our table header:

Implement sorting in react table with useSortBy hook

Sometimes when you create tables, you might want to add a sorting feature whereby when the user clicks the column header, the entire table sorts in ascending or descending order depending on the data type. You can implement sorting with the useSortBy hooks from react-table. As usual, you would need to add this hook to the useTable instance:

The next step would be to add a span tag alongside a condition to display whichever direction the table is sorted based on that column:

With this, we should have successfully able to do sorting on react-table.

Implement sorting in react table with usePagination hook

To use pagination in the table, we need usePagination hooks from react table. import the hook and add it to the useTable

Now, let's look into the markup as well. The below is the markup for the pagination.

After we make the change, our table will render only the first 10 elements from the data. So, it's time to implement the pagination buttons in the footer to navigate or fetch the next set of data. To implement navigation for the paginated table, react table provides four properties. They are,

• nextPage
• previousPage
• canPreviousPage
• canNextPage

nextPage is an action-based prop that we can use inside the onClick method. canNextPage returns a boolean to add a condition whether to render the next button or not. For example, if we reach the last page. We can disable the next button based on the canNextPage prop.

Not only filtering, sorting and pagination with react-table, we can do searching, grouping and many more. Checkout this Tanstack react table for more info.

Conclusion

In this article, we have learned what react table is and how and when to use react tables in our React project. Hope you enjoyed learning about table UIs. Let me know about your experience with tables in the comments.