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

Security Aspects to consider for a React Native Application

Angular- Intro to WebPack(Module Bundler)

Best library for formatting and manipulating numbers in JavaScript

An In-Depth Guide To AES Encryption With Angular Service Implementation

var hipHipArray = [“hip”, “hip”]

Creating an Idempotent API using Node.js

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

React: useEffect and componentDidMount

What is React?

React Router V6

What And Why React.js