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

We all know how important tables are and we all have made them with different UI’s in HTML, CSS, and JS. But today, we will be making the same table in React without using any other library or npm packages for any operation that our table will perform.

Let’s begin…

Index

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

• Deleting a row
• 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: "Sincere@april.biz",
phoneNumber: "1-770-736-8031 x56442",
website: "hildegard.org",
companyName: "Romaguera-Crona",
},
{
id: 2,
fullName: "Ervin Howell",
userName: "Antonette",
email: "Shanna@melissa.tv",
phoneNumber: "010-692-6593 x09125",
website: "anastasia.net",
companyName: "Deckow-Crist",
},
{
id: 3,
fullName: "Clementine Bauch",
userName: "Samantha",
email: "Nathan@yesenia.net",
phoneNumber: "1-463-123-4447",
website: "ramiro.info",
companyName: "Romaguera-Jacobson",
},
{
id: 4,
fullName: "Patricia Lebsack",
userName: "Karianne",
email: "Julianne.OConner@kory.org",
phoneNumber: "493-170-9623 x156",
website: "kale.biz",
companyName: "Robel-Corkery",
},
{
id: 5,
fullName: "Chelsey Dietrich",
userName: "Kamren",
email: "Lucio_Hettinger@annie.ca",
phoneNumber: "(254)954-1289",
website: "demarco.info",
companyName: "Keebler LLC",
},
{
id: 6,
fullName: "Mrs. Dennis Schulist",
userName: "Leopoldo_Corkery",
email: "Karley_Dach@jasper.info",
phoneNumber: "1-477-935-8478 x6430",
website: "ola.org",
companyName: "Considine-Lockman",
},
{
id: 7,
fullName: "Kurtis Weissnat",
userName: "Elwyn.Skiles",
email: "Telly.Hoeger@billy.biz",
phoneNumber: "210.067.6132",
website: "elvis.io",
companyName: "Johns Group",
},
{
id: 8,
fullName: "Nicholas Runolfsdottir V",
userName: "Maxime_Nienow",
email: "Sherwood@rosamond.me",
phoneNumber: "586.493.6943 x140",
website: "jacynthe.com",
companyName: "Abernathy Group",
},
{
id: 9,
fullName: "Glenna Reichert",
userName: "Delphine",
email: "Chaim_McDermott@dana.io",
phoneNumber: "(775)976-6794 x41206",
website: "conrad.com",
companyName: "Yosting Mantra",
},
{
id: 10,
fullName: "Clementina DuBuque",
userName: "Moriah.Stanton",
email: "Rey.Padberg@karina.biz",
phoneNumber: "024-648-3804",
website: "ambrose.net",
companyName: "Hoeger LLC",
},
];

Before we start the development, let’s see what the final result will look like.

We will not discuss the styling part of the app for that visit my Github repository

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 table-app-in-react

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.

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>
{data.map((data) => {
return (
<>
<tr>
<td>{data.fullName}</td>
<td>{data.userName}</td>
<td>{data.phoneNumber}</td>
<td>{data.website}</td>
<td>{data.companyName}</td>
<td>{data.email}</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>
</>
);
};

In the above code, we can see two buttons with onClick event handlers. They will be responsible for editing and deleting rows respectively.

Using the useState hook for defining and managing states

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

Also, read — useState Hook in React JS

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

Continue Reading