An easy way to create a customize dynamic table in react js
Tags: beginners, react, javascript, reacttable
Published: 2019-03-23 02:35:05

---
title: An easy way to create a customize dynamic table in react js
published: true
description: 
tags: beginners, react, javascript, reactTable,
cover_image: https://thepracticaldev.s3.amazonaws.com/i/j0uchequygfwuplqdizh.jpg
---

In this article I will try to teach how to create a dynamic table in <code>react.</code>
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.

<em>I am assuming you know how to create a project and how javascript classes work. If you dont't, read <a href='https://dev.to/aspittel/a-complete-beginners-guide-to-react-2cl6'>this</a> article first.</em>

<b>Lets begin</b>
We have <em>data</em> in the form of <code>array of objects</code> just like <code>APIs.</code> You can use <em>API</em> too.

Lets create a simple <em>component</em> and store the <em>data</em> in the <em>state</em>.

```react
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 <em>Dom</em>. We often use <code>map function</code> in react to itearate over array.
Lets write a separate <em>function</em> for <em>table data</em> and calling it in our <em>render method</em>. This approach will make our code cleaner and easier to read.

```react
   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 <code>renderTableData</code> method only returns <code>tr</code> not the <code>tr inside table</code>. Since <code>tr</code> alone can not be a child of <code>div</code> so we have to wrap <code>tr</code> inside <code>table and tbody</code> in our render method.

![table header](https://thepracticaldev.s3.amazonaws.com/i/skl750p22a202vxr5qms.png)

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.

```react
   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>
      )
   }
```
<code>Object.Keys</code> gives us all the keys of students in the form of <code>array</code> and we stored it in a variable <code>header</code>. So we can iterate the <code>header (array)</code> using <code>map method.</code> 
You may think why we don't use <em>forEach</em>, it does the same. The reason is when we want to return something as result we use <em>map</em> method, while <em>forEach</em> 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

```css
#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](https://thepracticaldev.s3.amazonaws.com/i/12sp9jutg4k3ugqxvwlq.png)

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. <a href="https://codepen.io/Basit600/pen/JzeZxo?editors=0010" target="_blank">Here</a> is the codepen link of the project.

[Here](https://www.codevertiser.com/editable-text-field-in-table-using-reactjs/) you can read How To Create An Editable Text Field In Table Using ReactJS.