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:
yarn add react-table
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.
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
This is another default function for React-table. To do this, we add
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
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
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
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
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
To use pagination in the table, we need
usePagination hooks from react table. import the hook and add it to the
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 is an action-based prop that we can use inside the
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
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.
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.