As developers, we always look for methods to present the application data in a structured way. More often, we use tables for that. However, most of the time, we need features like searching, filtering, sorting with tables.

That’s where we can use libraries like React Table that saves time in development.

Choosing React Table Library

React Table is a collection of hooks for building robust Tables and Datagrid experiences.

Being one of the most renowned table libraries for React, it offers many features to make you fall for it.

• React Table is a headless utility, which implies it doesn’t render or provide any UI elements, markup, or styles and allows you to have 100% control over markup and styles.
• It is a collection of hooks and, these hooks are compact, lightweight, and highly extensible.
• It provides an uncompromised user experience and UI.
• There is easily comprehensible typography and custom elements within the Table.
• It facilitates searching options on the Table or particular columns while enabling filtering or sorting data.
• React Table is super solid and declarative in that it aid for pagination and lets you show hide columns, inline data editing, column resizing to fit with long data points, and support for horizontal and vertical scrolling.
• A modal/details panel can be used to edit an entire row of data.
• Its support for multiple devices with fixed headers and columns for quick data viewing lets you achieve higher responsiveness.

As you can see, React Table covers most of the table functionalities for us, and that’s why I choose it over other libraries.

Creating a Table with React-Table

I have created a basic table using React Table and shared it to Bit.dev. Examine it or import it (clone) to your Bit workspace and give it a try.

Now let’s see how to build a simple table UI with basic filtering and sorting functionalities.

Step 1 — Setting up the project

First, you need to create a React application and integrate relevant APIs to fetch data for your tables.

In this example, I will be using “User Details” from “JSON Placeholder Free fake API.” Also, I will be using Axios to make API calls.

When you think of a table structure, you generally think of rows and columns. With nested columns, sub rows, and other elements, table configurations can become even more complicated.

Here, I have created the simple table structure named tabledata and included two headers and column groups. There is also an accessor for each column, which is the data in the data object.

Note: React.useMemo is used to create a table structure to ensure that the data isn’t recreated on every render.

Step 2 — Creating the table component.

Then we need to add React Table to the application. For that, let’s create a separate component. You can install it using NPM or Yarn.

npm install react-table or yarn add react-table

As I have mentioned before, React Table consist of a variety of hooks. In this example, I will be using the userTable hook. Here, the table component accepts two props named data and columns to generate the table’s header and cells.

Initial table.js file will look as follows, and you need to import this file to App.js

The above code will generate a basic table view like this:

At a high level, this table is satisfactory. But what if you want unique styles? You can create custom styles for each cell with React Table at this point.

Step 3 — Add searching/filtering functionality

Now I will show you the steps to add search functionality to your React Table.

First, we need to have a search input in our table.js. And then, we can use useFilters hook provided by React Table to filter out results.

I have implemented the filtering option only for the name attribute. When the user changes the search bar’s input value, it will show only the matching rows.

Step 4 — Add sorting functionality

To add the sorting option to our table, we need to incorporate the useSortBy plugin hook provided by the React Table. It will sort in ascending and descending order dynamically. It's that simple.

You can decide whether to enable this option for all the columns or for specific columns only; it is all up to you. You can manipulate this by applying the disableSortBy option on a column to disable sorting.

To enable sorting for all the columns, edit table.js by adding the following.

After all these configurations, your App.js and table.js will eventually look like below.

When and Where to Use React-Table?

Although React Table is rich in features, it’s essential to understand where it fits well and where it won’t.

Where it fits well

• Your table UI needs core functionality like sorting, filtering, and pagination. React Table would be a good choice.
• Your Table acts solely as a showcase but needs to be very light and efficient; you can go for React Table.

Where it won’t

• If you are looking for advanced support in horizontal and vertical scrolling, React Table might not be the best match for you.
• If you need to facilitate inline editing with React Table, you have to depend on plugins to add such functionality.
• When dealing with infinitely long tables, it’s better to go for an alternative than sticking to React Table.

Final Thoughts

React Table is the most widely known table library for React. It would be a better choice for table UIs with limited data, custom styles, and basic functionalities like sorting and filtering.

However, based on the project requirements, various alternatives may exist.

So, I invite you to use React Table Library and share your thoughts in the comments section.

Thank you for reading..!!!

Build & share independent components with Bit

Bit is an ultra-extensible tool that lets you create truly modular applicationswith independently authored, versioned, and maintained components.

Use it to build modular apps & design systems, author and deliver micro frontends, or simply share components between applications.