How to make a table in React with React Table Library

React table is a library used for creating data tables with data grids which can sometimes be a hassle to make or deal with.

It uses hooks to create powerful tables which are lightweight and extensible but is headless meaning that it does not have a design of its own, and we are free to design the table in whichever way we see fit.

This was done to keep the library light weighted.
It offers us many features like Sorting, Global Filtering, Paginations, Column Filtering, Grouping, etc. You can have a look at all the features on its official site.

We can also make a table in React with the help of hooks only it will also be lightweight and easy to make, but sometimes it is better to use a library than to create something from scratch just to save a ton of time

In this blog, we will only be making a table with the help of React Table Library which can do sorting, filtering, and have pagination in it.

Let’s start…

Index

1. Getting Started
2. Creating our React App
3. Installing the React table library and importing it
4. Creating the Columns and displaying them
5. Working on the UI part of the app
6. Adding Different Functionalities to make the table more interactive like Sorting, Global Filtering, and Pagination
7. Conclusion

Getting Started

We have prepared dummy data for this project consisting of 100 objects with key and value pairs and will be printing them dynamically from the Data.js file.

As React Table is a Headless library, we have to style it ourselves which will not be explained in detail here. But as we have only used Bootstrap for styling, you can use that as a starting point.

Before moving on to the development phase let’s see how our table will look after completion –

This is the live link to the table we will be building and its GitHub repository if you want to try something else.

Creating our React App

It’s easy to create a React App — go to the working directory in any IDE and enter the following command in the terminal:

npx create-react-app react-table-library

If you are unsure how to properly set up a create-react-app project you can refer to the official guide here at create-react-app-dev.‌‌

After the setup, run npm start in the same terminal to start the localhost:3000 where our React app will be hosted. We can also see all our changes there.

Installing React Table Library and Importing it

Like all other npm and yarn packages, installing or adding it is very simple

//For npm
npm install react-table
//For yarn
yarn add react-table

When the library is finally installed, it’s time to import it into our App.js file.

import React from "react";
import { dummy } from "./Data";
import { useTable } from "react-table";

useTable hook is the main hook of this library as it creates an instance that improves our interaction with the table.

According to the official documentation, “useTable is the primary hook used to build a React Table. It serves as the starting point for every option and every plugin hook that React Table supports.”

Creating and Displaying the Columns

useTable Hook has some options which enable it and us to interact with the table. The two most important options that we will be using here are data and columns.

const { instance } = useTable({
column,
data,
});

Where instance will be replaced with its different properties depending upon which property we chose to use.

Table Options

Column — This is a required field and should be memorized before passing it to the useTable hook.

This is the most important part of the UI as it will hold all the table headers and the columns inside it in an object form.

export const tableColumn = [
{
Header: "Id",
accessor: "id",
},
{
Header: "User Name",
accessor: "name",
},
{
Header: "Email",
accessor: "email",
},
{
Header: "Comments",
accessor: "body",
},
];

Data — It is also an important and required field that will contain our dummy data and should also be memorized.

Continue Reading.