DEV Community

loading...
Cover image for An easy way to create a customize dynamic table in react js

An easy way to create a customize dynamic table in react js

Abdul Basit
MERN Stack Developer at Orange Fox Labs
Updated on ・3 min read

In this article I will try to teach how to create a dynamic table in react.
Ya I know its quite simple, but this tutorial is for beginners and a beginner should know how to get this kind of stuff done.

I am assuming you know how to create a project and how javascript classes work. If you dont't, read this article first.

Lets begin
We have data in the form of array of objects just like APIs. You can use API too.

Lets create a simple component and store the data in the state.

import React, { Component } from 'react'

class Table extends Component {
   constructor(props) {
      super(props) //since we are extending class Table so we have to use super in order to override Component class constructor
      this.state = { //state is by default an object
         students: [
            { id: 1, name: 'Wasif', age: 21, email: 'wasif@email.com' },
            { id: 2, name: 'Ali', age: 19, email: 'ali@email.com' },
            { id: 3, name: 'Saad', age: 16, email: 'saad@email.com' },
            { id: 4, name: 'Asad', age: 25, email: 'asad@email.com' }
         ]
      }
   }

   render() { //Whenever our class runs, render method will be called automatically, it may have already defined in the constructor behind the scene.
      return (
         <div>
            <h1>React Dynamic Table</h1>
         </div>
      )
   }
}

export default Table //exporting a component make it reusable and this is the beauty of react

We have 4 students with id, name, age and email address. Since our table will be dynamic so it doesn't matter if we have 4 or 100 students.

For Table Data

Now we want to print out students data in the Dom. We often use map function in react to itearate over array.
Lets write a separate function for table data and calling it in our render method. This approach will make our code cleaner and easier to read.

   renderTableData() {
      return this.state.students.map((student, index) => {
         const { id, name, age, email } = student //destructuring
         return (
            <tr key={id}>
               <td>{id}</td>
               <td>{name}</td>
               <td>{age}</td>
               <td>{email}</td>
            </tr>
         )
      })
   }

   render() {
      return (
         <div>
            <h1 id='title'>React Dynamic Table</h1>
            <table id='students'>
               <tbody>
                  {this.renderTableData()}
               </tbody>
            </table>
         </div>
      )
   }

You may have noticed our renderTableData method only returns tr not the tr inside table. Since tr alone can not be a child of div so we have to wrap tr inside table and tbody in our render method.

table header

We are done with table data, a table should have a header too. Lets work on header.

For Table Header

Now we will write another method for table header.

   renderTableHeader() {
      let header = Object.keys(this.state.students[0])
      return header.map((key, index) => {
         return <th key={index}>{key.toUpperCase()}</th>
      })
   }

   render() {
      return (
         <div>
            <h1 id='title'>React Dynamic Table</h1>
            <table id='students'>
               <tbody>
                  <tr>{this.renderTableHeader()}</tr>
                  {this.renderTableData()}
               </tbody>
            </table>
         </div>
      )
   }

Object.Keys gives us all the keys of students in the form of array and we stored it in a variable header. So we can iterate the header (array) using map method.
You may think why we don't use forEach, it does the same. The reason is when we want to return something as result we use map method, while forEach doesn't return anything, it just iterates over array's elements.

Styling

Lets add little bit styling in our table to make it look good

#title {
  text-align: center;
  font-family: arial, sans-serif;
}

#students {
  text-align: center;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  border: 3px solid #ddd;
  width: 100%;
}

#students td, #students th {
  border: 1px solid #ddd;
  padding: 8px;
}

#students tr:nth-child(even){background-color: #f2f2f2;}

#students tr:hover {background-color: #ddd;}

#students th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #4CAF50;
  color: white;
}

table header

That's all, we are done with our basic table. In next article we will add some features in table, like sorting, adding and removing data. Here is the codepen link of the project.

Here you can read functional component with hooks implementation.

Discussion (75)

Collapse
femakin profile image
femakin

Nice Post But how do someone Put this type of Object in a Table ? {
Australia: 1
Burma: 2
Canada: 3
China: 1
Cyprus: 1
Egypt: 3
France: 2
Greece: 1
Iran (Persia): 1
Isle of Man: 1
Japan: 1
Norway: 1
Russia: 4
Singapore: 1
Somalia: 1
Thailand: 4
Turkey: 2
United Arab Emirates: 1
United Kingdom: 8
United States: 28}

Collapse
abdulbasit313 profile image
Abdul Basit Author

You can do two things.

  1. Write the logic that changes this object into array or array of objects.
  2. If you have hard coded data then write it in this way countries : [ { country : 'US', id: 1, } ] Something like this
Collapse
femakin profile image
femakin

I think I will go with the first option. But will I be able to add the unique name and ID then

Thread Thread
abdulbasit313 profile image
Abdul Basit Author

Yes you can further spread the object or array. Read about spread operator

Thread Thread
femakin profile image
femakin

Alright Thanks

Collapse
shahirhossaini profile image
Shahir Hossaini

Object.keys(yourObject).map(obj => (


{obj}
{yourObject[obj]}

))

use this method it will solve your problem.

Collapse
femakin profile image
femakin

Can someone please help me with this

Collapse
harishchandrajr profile image
Harishchandra • Edited

After looking at your code it looks easy to me now 😀, I am trying to create table too, but I don't have table data, what I have is row no and column no and based on them I am tring to generate empty table for input, the problem which I am facing is creating header, do you have any suggestions for that ??, I really need some help

Collapse
abdulbasit313 profile image
Abdul Basit Author

You mean let's say you want to generate 3×4 table?
I am not really sure but you can store rows and columns numbers into variable and based on that generate the table.

Collapse
harishchandrajr profile image
Harishchandra • Edited

Yes, I am able to generate rows, but facing issue with creation of headers and then storing tables value in to variable in form of list of dictionary,
Below is the part which is I am trying to build.
codesandbox.io/s/issue-with-header...

Collapse
diraskreact profile image
Dirask-React • Edited

Hello 👋
Thanks for sharing! 👍
Recently I created a solution for dynamic table using functional components, so if you are interested you can go and check it. 😊
dev.to/dirask/react-how-to-create-...

Collapse
aashiqincode profile image
Aashiq Ahmed M

Hey im glad to start the discussion once again, I want to edit the row field may be by one time click on the row or having a separate button ,Can you explain to make it happen.

Collapse
abdulbasit313 profile image
Abdul Basit Author

It depends on your approach. How do you want to edit? Do you have input fields for edit row data? I mean the same input fields which will be used to add and edit data, and the second approach is to convert the same row's td into input field

Collapse
aashiqincode profile image
Aashiq Ahmed M

Yes , in the same implementation of you, can you just start the basics

Thread Thread
abdulbasit313 profile image
Abdul Basit Author

this repo may help github.com/AbdulBasit313/React-Typ... instead of tr I am using list here.

Thread Thread
aashiqincode profile image
Aashiq Ahmed M

It's cool btw, but my case is to just edit the tr on a button click and update the state

Thread Thread
abdulbasit313 profile image
Abdul Basit Author

What do you want to happen on clicking button? where do you want to write edit data?

Thread Thread
aashiqincode profile image
Aashiq Ahmed M

In the td itself

Collapse
nkartik01 profile image
Kartik Narang

can you please share an api implementation of this using axios.

Collapse
abdulbasit313 profile image
Abdul Basit Author

I am almost done with a draft, will publish in a day or two...

Collapse
nkartik01 profile image
Kartik Narang

Still Waiting

Thread Thread
abdulbasit313 profile image
Abdul Basit Author
Collapse
salimeh1364 profile image
Salimeh1364

hi abdul ,
in advance thanks for your clear code, i have a question
i have one array that include fore example 10 field that each field has many information , i want to show each field in one table ,it means if i have 10 field in array show in 10 table saparately . thanks alot

Collapse
meisam25970 profile image
MeiSaM Valizadeh

hello please help me for this error

import React, { useState } from "react";

import "./AddUser.css";
import {
validate,
validatorRequire,
validatorNumber,
} from "../../shared/util/validator";
import { Link } from "react-router-dom";
import * as userService from "./service";

const AddUser = () => {
const [formState, setFormaState] = useState({
errors: [],
users: [],
});
// class addUser extends Component {
// componentDidMount() {
// userService
// .getUsers()
// .then((response) => this.setFormaState({ users: response.data }));
// }
// }
// componentDidMount() {

// }
const addUserSubmitHandler = (event) => {
event.preventDefault();
const errors = validateForm();

if (errors.length) {
  alert("gikhare sag");
  setFormaState({ ...formState, errors });
  return;
}
userService.addUser(formState.user);
setFormaState({ errors: [], users: userService.getUsers() });

};

const validators = {
code: [validatorRequire(), validatorNumber()],
fname: [validatorRequire()],
lname: [validatorRequire()],
phone: [validatorRequire(), validatorNumber()],
fee: [validatorRequire(), validatorNumber()],
};

const farsiNames = {
code: "کد",
fname: "نام",
lname: "نام خانوادگی",
phone: "شماره تماس",
fee: "دستمزد",
};

const changeHandler = (e) => {
const user = {};
const name = e.target.name;
const value = e.target.value;
user[name] = value;
const errors = validate(value, validators[name], farsiNames[name]);
setFormaState({
...formState,
user: { ...formState.user, ...user },
errors,
});
};
const validateForm = () => {
let errors = [];
const fields = Object.keys(farsiNames);
for (let field of fields) {
const fieldErrors = validate(
formState.user ? formState.user[field] : undefined,
validators[field],
farsiNames[field]
);
errors = errors.concat(fieldErrors);
}

return errors;

};

return (


{formState.errors.map((error, index) => (

{error}

))}

element="input"
type="text"
id="code"
name="code"
className="code form-control m-2 col-md-1 d-block"
placeholder="کد"
onChange={changeHandler}
/>
    <input
      element="input"
      type="text"
      id="fname"
      name="fname"
      className="fname form-control m-2 col-md-2 d-block"
      placeholder="نام"
      onChange={changeHandler}
    />
    <input
      element="input"
      type="text"
      id="lname"
      name="lname"
      className="lname form-control m-2 col-md-2 "
      placeholder="نام خانوادگی"
      onChange={changeHandler}
    />
    <input
      element="input"
      type="text"
      id="phone"
      name="phone"
      className="phone form-control m-2 col-md-3"
      placeholder="شماره تماس"
      onChange={changeHandler}
    />
    <input
      element="input"
      type="text"
      id="fee"
      name="fee"
      className="fee form-control col-md-3 m-2 p-3"
      placeholder="دستمزد"
      validators={[validatorRequire]}
      onChange={changeHandler}
    />
  </div>

  <button className="btn btn-success mx-auto d-block mt-5">
    اضافه کردن
  </button>

  <div className="container mt-5">
    <table className="table table-striped">
      <thead>
        <tr>
          <th scope="col">ردیف</th>
          <th scope="col">{farsiNames.code}</th>
          <th scope="col">{farsiNames.fname}</th>
          <th scope="col">{farsiNames.lname}</th>
          <th scope="col">{farsiNames.phone}</th>
          <th scope="col">{farsiNames.fee}</th>
        </tr>
      </thead>

      <tbody>
        {formState.users.map((user, index) => {
          return (
            <tr key={index}>
              <th scope="row">{index + 1}</th>
              <td>{user.code}</td>
              <td>{user.fname}</td>
              <td>{user.lname}</td>
              <td>{user.phone}</td>
              <td>{user.fee}</td>
              <td>
                <Link to={"/userfee/" + user.code}>
                  <span role="button" className="btn btn-primary btn-sm">
                    Edit
                  </span>
                </Link>
              </td>
            </tr>
          );
        })}
      </tbody>
    </table>
  </div>
</form>

);
};
export default AddUser;

error = react-dom.development.js:11102 Uncaught TypeError: formState.users.map is not a function
at AddUser (AddUser.js:157)

Collapse
abdulbasit313 profile image
Abdul Basit Author

Please ask this question on stackoverflow

Collapse
aashiqincode profile image
Aashiq Ahmed M • Edited

What if we want to render row from the data from the input field?

Collapse
abdulbasit313 profile image
Abdul Basit Author

For that we will use another function called addData that will be called on clicking submit button, and we will add input data to our object using spread operator.

Collapse
aashiqincode profile image
Aashiq Ahmed M

Ya it's a task given by my manager, finished it.i used a form with input fields and on submit I got the value by document.getelementbyid and pushed into the state object and rendered it as a seperate row and also added a delete functionality by filter out by the id prop.Btw great article!

Thread Thread
abdulbasit313 profile image
Abdul Basit Author

Why did you use document.getElementById? In react we use e.target.value

Thread Thread
aashiqincode profile image
Aashiq Ahmed M

Ya its cool,but i had more input fields in the form and I struggled to manage them,can you come up with a solution, [e,target.name]?

Thread Thread
abdulbasit313 profile image
Abdul Basit Author

Yes

Collapse
guico33 profile image
guico33
key={Math.random()}

The key is supposed to be consistent between renders, random generated is a very bad solution.
Better use the array index if you don't have an unique identifier.

Collapse
abdulbasit313 profile image
Abdul Basit Author

hmmm... nice catch. fixed

Collapse
navasrifaya profile image
navas

hey man i have doubt in this how do i contact you?

Collapse
datmt profile image
Mạnh Đạt

Thanks for the tutorial. I'm a react beginner.

My question is, what if the number of column is unknown too?

Thanks again

Collapse
abdulbasit313 profile image
Abdul Basit Author • Edited

Here you go... you just need to change renderTableData function with below code. Let me know if it helps...

   renderTableData() {
      return this.state.students.map((student, index) => {
         let col = Object.keys(student)
         return (
            <tr key={student.id}>
               {col.map((val, index) => {
                  return <td key={index}>{student[col[index]]}</td>
               })}
            </tr>
         )
      })
   }
Collapse
hirupiyumika profile image
hirupiyumika

Thank you very much...!! It is very helpful.

Collapse
ronaldoperes profile image
Ronaldo Peres

Thank you,

How can I hide the first column?

Collapse
datmt profile image
Mạnh Đạt

Thank you!

Collapse
iam_pbk profile image
Bharathkumar

Suppose we want structure like "jsfiddle.net/cyril123/3n8xv3hL/" , how implement complex data with rowspan in react. Searched material-table but no luck it doesn't support complex data(material-table.com/).

Collapse
swaminathan0706 profile image
Swaminathan.V.B

Hi Abdul, Thanks for the tutorial appreciated your work..I am having an issue to be resolved let me know how will you destruct and array of objects which are having key values with space in between for example

const {Stock symbol,Stock name,No of share,Buy price,Current price,Profit Loss}= a;
its throwing error like identified expected
the example u have used all are single words for key like id,name,age,email...
also explain for two words like first name?

Collapse
abdulbasit313 profile image
Abdul Basit Author
let student = {
  "roll no" : 654321,
  "first name" : "John" 
  } 

const {"roll no":  id,  "first name": name} = student

console.log(id, name)

Let me know if it helps...

Collapse
vrma_shubham profile image
shubham

how to create a table like

| Name | 1/1/2020 | 2/1/2020 | 3/1/2020 | 4/1/2020 | ........... (can be any number of dates)header

| Raj | RajData | RajData | RajData | RajData | ............(data as per date for this name)body

| . | X Data | X Data | X Data | X Data | ............(data as per date for this name)body

.
.

names are dynamic too so please help me to solve this type of table structure in reactjs
please help i have no clue for this kind of table as i am beginner

Collapse
arsalan1998 profile image
De_Codr

u can go with MUI Data Tables they are easy to implement and more flexible to handle bulk data

Collapse
amisoliman70 profile image
Ahmed Soliman

Hi Abdul Basit, this is very helpful to me. Thank you!

How can I add rows to table dynamically? For example, if I create a table for a customer that have unknown number phone devices. So if a customer have 2 phone devices, we should have 2 rows, and if 3 phone devices, we should have 3 rows, etc.

Would you be able to show us how to add rows to a table?

Thanks
Ahmed

Collapse
fazzysyed profile image
fazzysyed

how to add search and sorting in the table

Collapse
abdulbasit313 profile image
Abdul Basit Author

You can use ant design for that. By the way I have plan to update this article in couple of days.

Collapse
arsalan1998 profile image
De_Codr

u can go with MUI Data Tables they are awesome

Collapse
saltan1 profile image
saltan-1

How can I reach you regarding app development. Thanks

Collapse
faizanmustafa profile image
FaizanMustafa

Thanks ton. This post is really helpful for me.

Collapse
akash4111997 profile image
akash thoriya

How can I add buttons to each row [For example Buttons could be View, Edit, Delete ]

Collapse
abdulbasit313 profile image
Abdul Basit Author

Inside renderTableData method.

Collapse
abdulbasit313 profile image
Abdul Basit Author
Collapse
ahmedhouari4 profile image
ahmed houari

He Abdul Basit,thanks for the very helpfull tutorial .How can i map a simple array[0,1....,8] in a table(3X3).

Collapse
abdulbasit313 profile image
Abdul Basit Author

You need to write conditions inside your method...

Collapse
ahmedhouari4 profile image
ahmed houari

thanks Abdul Basit.
so i need two for loops as usual in js

Collapse
esinthe19 profile image
Esin G

Easy to follow! it helped me a lot. thanks!

Collapse
micahbala profile image
Micah Bala

Thanks Abdul Basit for this tutorial, it helped me out, I have spend over 3 hours trying to render data from json on a table correctly. Thanks again.

Collapse
coconutnegro profile image
Hendra Widjaja

You used too many ids. Be careful

Collapse
shantnu02 profile image
SHANTANU SINGH

if i just show Id, name only and when this datatable made nd in that if i click 2 nd no.
of id then it goes to next page nd show full data??????

Collapse
phykurox profile image
phykurox • Edited

How do I renderTableData without refreshing whenever there's new data added to the state?

Collapse
abdulbasit313 profile image
Abdul Basit Author

How you are adding new data? you just need to use spread operator if you are adding data locally. like [...oldState, newObj]

Collapse
blup00 profile image
blup00

Thank you, great code, easy to follow!!

Collapse
alexjohan97 profile image
Alex Avelino Campos • Edited

please, how can i just show specific columns, for example in the exercise I just want to see the Name and the Age

Collapse
bishwobhandari profile image
bishwobhandari

if i need to create a empty table of 10 rows where user can input data as form and submit the whole table to mobx store. how do i do it?

Collapse
wanaphar profile image
PharWana

brother, I need help regarding the quilljs? can you help me out?

Collapse
abdulbasit313 profile image
Abdul Basit Author

Sorry, I never worked with quill. so no idea... if you want to know something related react I am here.

Collapse
ayeshaazam profile image
Ayesha

Hi,

Thanks for the Totorial, well explained!
Where Can I find the other features "like sorting, adding and removing data" you mentioned above.
Can I get the link of that Tutorial.
Thanks

Collapse
abdulbasit313 profile image
Abdul Basit Author
Collapse
stephyswe profile image
Stephanie

So no follow up? : )

Collapse
muhammadaligabol profile image
Ali

Very helpful article.

But I want to fetch data from an API instead of this Array of object, can you tell me how?

Collapse
abdulbasit313 profile image
Abdul Basit Author

Read my other article