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

Index

Getting Started

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",},];

Creating our React App

Working on the UI part of the app

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

Using the useState hook for defining and managing states

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

--

--

--

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

Using @Output and EventEmitter

Build a shopping cart in Node.js and React

Web APIs 20 years ago ASP .NET WebServices

Introduction to Hooks In React and What Benefits They Pose

What is the short declaration operator and how does it differ from the var keyword in Golang ?

How to send WhatsApp Messages from Twilio using firebase cloud functions (AngularJS)?

Making use of Ansible Facts and Variables to configure httpd webserver without using when keyword…

Firebase SMS Code Expiration on the Same Device-OTP React Native

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

Contact Picker API In React

Complete Tutorial On Redux Using With React JS | Devstringx

Redux Using With React JS |

Eager loading in React

A pagination state management with useReducer