How to Make a Table in React using Hooks with Multiple Features


  1. Getting Started
  2. Creating the App — React Table
  3. Working on the UI part of the App
  4. Using useState hook for defining and managing states
  5. Making the Form Component for adding a new row
  6. Working on functionalities
  • Editing a row
  • Saving the Edited row
  • Sorting the table
  • Pagination
  • Filtration

Getting Started

We have made dummy data for this project consisting of 10 objects with 6 key and value pairs as shown and named the file data.js.

export const data = [{id: 1,fullName: "Leanne Graham",userName: "Bret",email: "",phoneNumber: "1-770-736-8031 x56442",website: "",companyName: "Romaguera-Crona",},{id: 2,fullName: "Ervin Howell",userName: "Antonette",email: "",phoneNumber: "010-692-6593 x09125",website: "",companyName: "Deckow-Crist",},{id: 3,fullName: "Clementine Bauch",userName: "Samantha",email: "",phoneNumber: "1-463-123-4447",website: "",companyName: "Romaguera-Jacobson",},{id: 4,fullName: "Patricia Lebsack",userName: "Karianne",email: "",phoneNumber: "493-170-9623 x156",website: "",companyName: "Robel-Corkery",},{id: 5,fullName: "Chelsey Dietrich",userName: "Kamren",email: "",phoneNumber: "(254)954-1289",website: "",companyName: "Keebler LLC",},{id: 6,fullName: "Mrs. Dennis Schulist",userName: "Leopoldo_Corkery",email: "",phoneNumber: "1-477-935-8478 x6430",website: "",companyName: "Considine-Lockman",},{id: 7,fullName: "Kurtis Weissnat",userName: "Elwyn.Skiles",email: "",phoneNumber: "210.067.6132",website: "",companyName: "Johns Group",},{id: 8,fullName: "Nicholas Runolfsdottir V",userName: "Maxime_Nienow",email: "",phoneNumber: "586.493.6943 x140",website: "",companyName: "Abernathy Group",},{id: 9,fullName: "Glenna Reichert",userName: "Delphine",email: "",phoneNumber: "(775)976-6794 x41206",website: "",companyName: "Yosting Mantra",},{id: 10,fullName: "Clementina DuBuque",userName: "Moriah.Stanton",email: "",phoneNumber: "024-648-3804",website: "",companyName: "Hoeger LLC",},];

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:

Working on the UI part of the app

For starters, let’s create a table with all the headings as per the dummy JSON data’s keys and print its values dynamically using the map() function.

import React, { useState } from "react";import { data } from "./Data";export const App = () => {return (<><div className="container-fluid"><div className="row pt-5"><form><table className="table table-striped table-primary table-hover text-center fs-5 table-bordered border-dark"><thead><tr><th id="tr" onClick={() => Sort("fullName")}>Name</th><th id="tr" onClick={() => Sort("userName")}>User Name</th><th id="tr" onClick={() => Sort("phoneNumber")}>Phone Number</th><th id="tr" onClick={() => Sort("website")}>Website</th><th id="tr" onClick={() => Sort("companyName")}>Company Name</th><th id="tr" onClick={() => Sort("email")}>Email</th><th id="tr">Action</th></tr></thead><tbody>{ => {return (<><tr><td>{data.fullName}</td><td>{data.userName}</td><td>{data.phoneNumber}</td><td>{}</td><td>{data.companyName}</td><td>{}</td><td className="d-flex p-4"><button className="btn btn-dark me-3"><i class="fa-solid fa-pen-to-square"></i></button><button className="btn btn-danger"><i class="fa-solid fa-trash"></i></button></td></tr></>);})}</tbody></table></form></div></div></>);};

Using the useState hook for defining and managing states

We have made different states for each operation that the table will perform.

// input data for tableconst [tableData, setTableData] = useState(data);//for data idsconst [toggle, setToggle] = useState(null);//for filtering dataconst [search, setSearch] = useState("");// for editing dataconst [editData, setEditData] = useState({fullName: "",userName: "",address: "",phoneNumber: "",email: "",website: "",companyName: "",});//for sortingconst [order, setOrder] = useState("asc");// for pagination// No of pagesconst [number, setNumber] = useState(1);//Number of Posts per pageconst [postPerPage] = useState(4);



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