How to make a table in React with React Table Library

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

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:

Installing React Table Library and Importing it

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

//For npmnpm install react-table//For yarnyarn add react-table
import React from "react";import { dummy } from "./Data";import { useTable } from "react-table";

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,});

Table Options

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

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store