How to make a table in React with React Table Library

Getting Started

Creating our React App

Installing React Table Library and Importing it

//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

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

Table Options

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

I am a front-end developer from India with over one year of experience in freelancing with skills like Git, HTML5, CSS3, Bootstrap 4&5, and React.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Why refactoring class components to Hooks is not always straightforward

JavaScript Control Structure :

How to solve GeeTest “slider CAPTCHA” with JS

Reactivating Your Inactive Users The Testbook Way!

Automatically format code in Visual Studio Code when working with JavaScript and React with…

Web Frameworks Marketing

How to speed up Node.js modules installation in CI/CD Pipeline as of 2020

React Plotly crashes on npm start

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
Ateev Duggal

Ateev Duggal

I am a front-end developer from India with over one year of experience in freelancing with skills like Git, HTML5, CSS3, Bootstrap 4&5, and React.

More from Medium

Trick for Conditional Rendering in Navlink component of React Router

How to pass a child component with a callback function with a parameter that accepts value from the…

Profiling — React Applications

How To Navigate Programmatically Using React Router