One of the most straightforward 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 serve JSON data via tables using a component. That component will be able to generate a table that scales with the JSON data. The resulting table can have as many rows as it needs since the data is not hard-coded.

What You Will Need

You will need Node.js installed on your machine to follow this tutorial and a basic understanding of how React works.

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

Creating the JSON Data

The table will use data stored in a JSON file. You might fetch this data from an API endpoint in a real-life application.

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

        [{
    "id": 1,
    "first_name": "Ethelred",
    "last_name": "Slowly",
    "email": "eslowly0@google.es"
},{
    "id": 2,
    "first_name": "Reta",
    "last_name": "Woolmer",
    "email": "rwoolmer1@miibeian.gov.cn"
},{
    "id": 3,
    "first_name": "Arabel",
    "last_name": "Pestor",
    "email": "apestor2@bloglovin.com"
}]

    

This is a simple JSON file containing three objects.

The object keys—the id, first name, last name, and email—are the headings, while their corresponding properties make up the table’s body.

Creating the Table Component

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

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

    

This component takes theadData and tBodyData as props. theadData contains the data that you’ll display in the header row. The app will source this data from the JSON file and hand it over to the Table component.

Create a function in App.js called getHeadings() and add the following.

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

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

Remember to import data.json in App.js.

        import data from "./data.json"

    

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

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

Creating the Header Row

In this step, you will create a component to render an item in the header row. This component will iterate over the headings using the map() method.

In Table.js, add the code to iterate over the headings inside the thead tag.

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

Next, you will populate the body of the table.

Creating the Body Rows

The table body renders the row data. Since Table.js receives the data as an array of objects, you will need to iterate over it first to get each object representing a row.

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

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

    

Each row object will be similar to the object example below.

        const row = {
    "id": 1,
    "first_name": "Ethelred",
    "last_name": "Slowly",
    "email": "eslowly0@google.es"
}

    

To display each of these items, you will need to iterate over the keys of the object. In each iteration, you’ll retrieve the property that matches 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 contains the keys
   {theadData.map((key, index) => {
     return <td key={row[key]}>{row[key]}</td>
   })}
</tr>;

    

Bringing 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 <tbody> element, the component iterates over the data array and returns the table row for each object.

Using the Table Component

Import Table in 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 item in the JSON data, and tbodyData contains the whole JSON file.

Styling With CSS Modules

You generated a React table component from a JSON file in this tutorial. You also learned how you can manipulate JSON data to fit your needs. You can improve the looks of your table by adding some CSS to it. To create locally scoped CSS styles, consider using CSS modules. It is simple to use and easy to get started with if you are using a create-react-app application.