Create dynamic table from JSON array of objects in React js; In this tutorial, you will learn how to create a dynamic table that can display any JSON data using React.
How to Create & Show Dynamic Data Table from JSON in React js
Just follow the following steps to create/make dynamic table from JSON array of objects in react js apps:
- Step 1 – Create React App
- Step 2 – Install Bootstrap
- Step 3 – Create TableData.js File
- Step 4 – Create Dynamic Table Component
- Step 5 – Start React js App
Step 1 – Create React App
In this step, open terminal and execute the following command on terminal to create a new react app:
npx create-react-app my-react-app
To run the React app, execute the following command on your terminal:
npm start
Check out your React app on this URL: localhost:3000
Step 2 – Install Bootstrap
In this step, execute the following command to install react boostrap library into react app:
npm install bootstrap --save
Add bootstrap.min.css file in src/App.js file:
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import DynamicTable from "./dynamic-table/DynamicTable";
function App() {
render(){
return (
<DynamicTable />
);
}
}
export default App;
Step 3 – Create TableData.js File
In this step, create TableData.js file. And add the following code into it:
const TableData=[
{id:1, fullName:"My Name", age:25, city:"Patna"},
{id:2, fullName:"Jani", age:26, city:"Noida"},
{id:3, fullName:"Ravi Singh", age:18, city:"New Delhi"},
{id:4, fullName:"Kumar JI", age:22, city: "Jaipur"},
{id:5, fullName:"Test Kumari", age: 21, city: "Chennai"}
]
export default TableData;
The above code uses the fetch API of the browser. It internally uses javascript promises to resolve the asynchronous response.
Step 4 – Create a Dynamic Table Component
In this step, create dynamic table component, which name DynamicTable.js and add the following code into it:
import { useEffect } from "react";
import TableData from "./TableData";
function DynamicTable(){
// get table column
const column = Object.keys(TableData[0]);
// get table heading data
const ThData =()=>{
return column.map((data)=>{
return <th key={data}>{data}</th>
})
}
// get table row data
const tdData =() =>{
return TableData.map((data)=>{
return(
<tr>
{
column.map((v)=>{
return <td>{data[v]}</td>
})
}
</tr>
)
})
}
return (
<table className="table">
<thead>
<tr>{ThData()}</tr>
</thead>
<tbody>
{tdData()}
</tbody>
</table>
)
}
export default DynamicTable;
Here is a breakdown of above given code:
The DynamicTable function component has two helper functions: ThData and tdData.
The ThData function uses the Object.keys method to get the table column names from the TableData JSON data. It then maps through the column names and returns a table header (th) element for each column.
The tdData function maps through the TableData JSON data and returns a table row (tr) element for each data object. It uses the column array to get the corresponding value for each column name in the data object and returns a table data (td) element for each value.
In the return statement, the DynamicTable component renders a table element with a table header (thead) containing the column names and a table body (tbody) containing the data rows generated by the tdData function.
The DynamicTable component exports as a default component, which can be imported into other React components for rendering.
Overall, this code demonstrates how to create a dynamic table in React JS by generating table headers and rows based on JSON data, which can be useful for displaying tabular data in a flexible and customizable format.
Step 5 – Start React js App
Execute the following command on terminal to start the React App:
npm start
Then hit the following url on web browser:
http://localhost:3000
Conclusion
In this tutorial, you have learned how to create a dynamic table component in React.js. You started by creating a JSON data object and passed it down as props to the dynamic table component. Then, you parsed the JSON data to get an array of column headers and an array of data objects. Next, created the state variables and initialized them with the column and data arrays. After that, rendered a dynamic table by mapping through the columns and data arrays and rendering table headers and rows with respective data. Finally, you rendered the dynamic table component in the App.js file.
This tutorial provides a solid foundation for creating dynamic table components in React.js that can handle large amounts of data and render tables efficiently.
