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.
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;
}
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 How To Create An Editable Text Field In Table Using ReactJS.