DEV Community

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

Abdul Basit on March 23, 2019

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 be...

Read full post

Femi Akinyemi • Jan 4 '21

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}

Shahir Hussaini • Mar 22 '21

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

{obj}
{yourObject[obj]}

))

use this method it will solve your problem.

Abdul Basit • Jan 4 '21

You can do two things.

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

Femi Akinyemi • Jan 4 '21

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

Abdul Basit • Jan 4 '21

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

Femi Akinyemi • Jan 4 '21

Alright Thanks

Femi Akinyemi • Jan 4 '21

Can someone please help me with this

Harishchandra • Oct 11 '20 • 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

Abdul Basit • Oct 11 '20

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.

Harishchandra • Oct 11 '20 • 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...

Aashiq Ahmed M • Sep 29 '20

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.

Abdul Basit • Sep 29 '20

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

Aashiq Ahmed M • Sep 29 '20

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

Abdul Basit • Sep 29 '20

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

Aashiq Ahmed M • Sep 29 '20

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

Abdul Basit • Sep 29 '20

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

Aashiq Ahmed M • Sep 29 '20

In the td itself

Dirask-React • Feb 17 '21 • 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-...

shubham • Jul 20 '20

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

De_Codr • Feb 21 '21

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

Swaminathan.V.B • May 6 '20

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?

Abdul Basit • May 6 '20

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...

MeiSaM Valizadeh • Jun 27 '20

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: "دستمزد",
};

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)

Abdul Basit • Jun 27 '20

Please ask this question on stackoverflow

Mạnh Đạt • Dec 13 '19

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

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

Thanks again

Abdul Basit • Dec 14 '19 • 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>
         )
      })
   }

Mạnh Đạt • Dec 14 '19

Thank you!

Ronaldo Peres • Feb 5 '20

Thank you,

How can I hide the first column?

hirupiyumika • Dec 30 '19

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

Kartik Narang • May 21 '20

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

Abdul Basit • May 22 '20

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

Kartik Narang • May 23 '20

Still Waiting

Abdul Basit • May 25 '20

dev.to/abdulbasit313/learn-how-to-...

Salimeh1364 • Jun 26 '21

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

Ahmed Soliman • Jan 21 '20

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

guico33 • Mar 24 '19

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.

Abdul Basit • Mar 24 '19

hmmm... nice catch. fixed

navas • May 30 '19

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

Bharathkumar • Nov 15 '19

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

Aashiq Ahmed M • Sep 25 '20 • Edited

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

Abdul Basit • Sep 25 '20

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.

Aashiq Ahmed M • Sep 25 '20

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!

Abdul Basit • Sep 25 '20

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

Aashiq Ahmed M • Sep 26 '20

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]?

Abdul Basit • Sep 26 '20

Yes

akash thoriya • Aug 17 '19

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

Abdul Basit • Aug 17 '19

Inside renderTableData method.

Abdul Basit • May 25 '20

this may help...
dev.to/abdulbasit313/learn-how-to-...

fazzysyed • Oct 12 '19

how to add search and sorting in the table

De_Codr • Feb 21 '21

u can go with MUI Data Tables they are awesome

Abdul Basit • Oct 12 '19

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

saltan-1 • Jan 20 '21

How can I reach you regarding app development. Thanks

Micah Bala • Oct 21 '19

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.

FaizanMustafa • Nov 12 '20

Thanks ton. This post is really helpful for me.

ahmed houari • May 15 '20

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

Abdul Basit • May 16 '20

You need to write conditions inside your method...

ahmed houari • May 19 '20

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

Esin G • Jul 10 '19

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

kerenren • Nov 1 '21

with

element, it's not possible to add border radius and box shadow etc.

any solution to achive this?

Rahul More • Oct 4 '21

How can I add CRUD BTns in each row.
Also how can I status coloum with proper colours, like for active green and inactive red

HakimAsa • Aug 21 '21

nice article. However, your renderTableCell method should be dynamic as well, similar to what you've done with header.
the inner return statement should be like what you see in the screenshot

SHANTANU SINGH • Dec 12 '20

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??????

Ali • Nov 2 '20

Very helpful article.

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

Abdul Basit • Nov 2 '20

Read my other article

phykurox • Jul 28 '20 • Edited

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

Abdul Basit • Jul 30 '20

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

bishwobhandari • Apr 11 '20

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?

PharWana • Mar 24 '19

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

Abdul Basit • Mar 24 '19

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

Ayesha • Oct 13 '19

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