How to Generate a Table From JSON Data in React

One of the easiest ways to separate data from your HTML documents is to store it in JSON. JSON is popular and easy to work with, especially in JavaScript.

In React, it makes sense to provide JSON data through tables using a component. This component can generate a table that is scaled with the JSON data. The resulting table can have any number of rows since the data is not hard-coded.

what will you need

You must have Node.js installed on your computer to follow this tutorial and have a basic understanding of how React works.

Before creating the spreadsheet, you need to create a new React project if you don’t already have one.

Creating the JSON data

The table uses data stored in a JSON file. You can retrieve this data from an API endpoint in a real application.

In the src folder, create a new file named data.json and add the following:

[{
"id": 1,
"first_name": "Ethelred",
"last_name": "Slowly",
"email": "[email protected]"
},{
"id": 2,
"first_name": "Reta",
"last_name": "Woolmer",
"email": "[email protected]"
},{
"id": 3,
"first_name": "Arabel",
"last_name": "Pestor",
"email": "[email protected]"
}]

This is a simple JSON file containing three objects.

The object keys — ID, First Name, Last Name, and Email — are the headings, while their corresponding properties make up the body of the table.

Creating the table component

Create a new file named Table.js in the src folder and add the following code.

export default function Table({theadData, tbodyData}) {
return (
<table>
<thead>
<tr>
</tr>
</thead>
<tbody>
</tbody>
</table>
);
}

This component takes theadData and tBodyData as props. theadData contains the data you display in the header. The app gets this data from the JSON file and passes it to the table component.

Create a function in app.js called getHeadings() and added the following.

const getHeadings = () => {
return Object.keys(data[0]);
}

Because the keys are similar for each object in the JSON file, you can just use the keys from the first object.

Remember to import data.json into App.js.

import data from "./data.json"

When rendering the Table component, pass the heading and the JSON data as props.

<Table theadData={getHeadings()} tbodyData={data}/> 

In this step you will create a component to render an element in the header. This component iterates through the headings using the map() method.

In Table.js, add the code to iterate over the headings within the tad tag.

<tr>
{theadData.map(heading => {
return <th key={heading}>{heading}</th>
})}
</tr>

Next, fill in the body of the table.

Creating the body rows

The table body renders the row data. Because Table.js receives the data as an array of objects, you must first iterate through it to get each object that represents a row.

So in Table.js, iterate over the tBodyData prop like this:

<tbody>
{tbodyData.map((row, index) => {
return <tr key={index}>
</tr>;
})}
</tbody>

Each row object is similar to the object example below.

const row = {
"id": 1,
"first_name": "Ethelred",
"last_name": "Slowly",
"email": "[email protected]"
}

To display each of these items, you must iterate over the object’s keys. On each iteration, retrieve the property that corresponds to that key in the row object. Since these keys are the same as the headings, use the values ​​from the theadData prop.

Modify the tr tag to display the row data as shown below.

<tr key={index}>
{theadData.map((key, index) => {
return <td key={row[key]}>{row[key]}</td>
})}
</tr>;

When you bring everything together, the table component should look like this:

export default function Table({theadData, tbodyData}) {
return (
<table>
<thead>
<tr>
{theadData.map(heading => {
return <th key={heading}>{heading}</th>
})}
</tr>
</thead>
<tbody>
{tbodyData.map((row, index) => {
return <tr key={index}>
{theadData.map((key, index) => {
return <td key={row[key]}>{row[key]}</td>
})}
</tr>;
})}
</tbody>
</table>
);
}

In the element

the component iterates over the data array, returning the table row for each object.

Using the table component

Import the table into App.js and render it as shown below:

import Table from './Table';
import data from "./data.json"
function App() {
const getHeadings = () => {
return Object.keys(data[0]);
}
return (
<div className="container">
<Table theadData={getHeadings()} tbodyData={data}/>
</div>
);
}
export default App;

The table component takes theadData and tbodyData as props. theadData contains the headings generated from the keys of the first element in the JSON data, and tbodyData contains the entire JSON file.

Styling with CSS modules

In this tutorial, you generated a React table component from a JSON file. You also learned how to customize JSON data to suit your needs. You can improve the look of your table by adding some CSS to it. To create locally sourced CSS styles, consider using CSS modules. It’s easy to use and easy to launch if you’re using a Create React App application.