How to Create Dynamic Table from JSON in React js

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

Recommended React JS Posts