How to show data into table form in ReactJS

Showing data in a tabular form helps the user to get a better idea of the data that the table contains. To show data in a tabular form, we do need to have ideas about JSX, components, and creating components.

In this article, we will show some data in a table using ReactJS.

Prerequisites:
  • React App
  • Tailwind CSS
  • A Tailwind CSS component library; DaisyUI (It will make the task easier)

We will be working on a React App with preinstalled tailwind CSS and DaisyUI. To know about setting up the project environment with tailwind CSS Read this article.

Show data into table form in ReactJS

  • Create a folder named components inside src folder. And then create a functional component there.

// src/components/TableContainer.js

import React from 'react';

const TableContainer = () => {
    return (
        <div>

        </div>
    );
};

export default TableContainer;
  • Create an Array of Objects in the component function
// src/components/TableContainer.js

import React from 'react';

const TableContainer = () => {
    // create an array of objects
    const tableData = [
        { id: 1, tech: "JavaScript", priority: "maximum" },
        { id: 2, tech: "ReactJS", priority: "maximum" },
        { id: 3, tech: "NextJS", priority: "maximum" },
        { id: 4, tech: "NodeJS", priority: "maximum" },
        { id: 5, tech: "ExpressJS", priority: "maximum" },
        { id: 6, tech: "Tailwind CSS", priority: "maximum" },
        { id: 7, tech: "Bootstrap", priority: "maximum" },
        { id: 8, tech: "HTML5", priority: "maximum" },
        { id: 9, tech: "CSS3", priority: "maximum" },
    ]
    return (
        <div>

        </div>
    );
};

export default TableContainer;
  • Write the below code inside <div> tag.
// src/components/TableContainer.js

import React from 'react';

const TableContainer = () => {
    // create an array of objects
    const tableData = [
        { id: 1, tech: "JavaScript", priority: "maximum" },
        { id: 2, tech: "ReactJS", priority: "maximum" },
        { id: 3, tech: "NextJS", priority: "maximum" },
        { id: 4, tech: "NodeJS", priority: "maximum" },
        { id: 5, tech: "ExpressJS", priority: "maximum" },
        { id: 6, tech: "Tailwind CSS", priority: "maximum" },
        { id: 7, tech: "Bootstrap", priority: "maximum" },
        { id: 8, tech: "HTML5", priority: "maximum" },
        { id: 9, tech: "CSS3", priority: "maximum" },
    ]
    return (
        <div className="flex justify-center my-10 bg-base-100">
            <div className="overflow-x-auto">
                <table className="table table-zebra w-full">
                    <thead>
                        <tr className='text-center'>
                            <th></th>
                            <th>Name</th>
                            <th>Job</th>
                            <th>Favorite Color</th>
                        </tr>
                    </thead>
                    <tbody className='text-center'>
                        <tr>
                            <th>1</th>
                            <td>Cy Ganderton</td>
                            <td>Quality Control Specialist</td>
                            <td>Blue</td>
                        </tr>

                    </tbody>
                </table>
            </div>
        </div>
    );
};

export default TableContainer;
  • Import this component inside App.js and use it.
// src/App.js

// import table component here
import TableContainer from "./components/TableContainer";


function App() {
  return (
    <div>
      <h2 className="text-5xl text-center">Showing Data In A Tablular Form</h2>
      <TableContainer />
    </div>
  );
}

export default App;

Now run the server.

  • Go to the Table Component, and use JSX expression to map through the tableData array inside the JSX.
<tbody className='text-center'>
      {/* map through the tableData array with JSX expression and return the table row*/}
          {
            tableData.map(tableRow =>
               <tr>
                  <th>{tableRow.id}</th>
                  <td>{tableRow.tech}</td>
                  <td>{tableRow.priority}</td>
               </tr>
                )
          }
</tbody>
// src/components/TableContainer.js

import React from 'react';

const TableContainer = () => {
    // create an array of objects
    const tableData = [
        { id: 1, tech: "JavaScript", priority: "maximum" },
        { id: 2, tech: "ReactJS", priority: "maximum" },
        { id: 3, tech: "NextJS", priority: "maximum" },
        { id: 4, tech: "NodeJS", priority: "maximum" },
        { id: 5, tech: "ExpressJS", priority: "maximum" },
        { id: 6, tech: "Tailwind CSS", priority: "maximum" },
        { id: 7, tech: "Bootstrap", priority: "maximum" },
        { id: 8, tech: "HTML5", priority: "maximum" },
        { id: 9, tech: "CSS3", priority: "maximum" },
    ]
    return (
        <div className="flex justify-center my-10 bg-base-100">
            <div className="overflow-x-auto">
                <table className="table table-zebra w-full">
                    <thead>
                        <tr className='text-center'>
                            <th>Sl No.</th>
                            <th>Name</th>
                            <th>Priority</th>
                        </tr>
                    </thead>
                    <tbody className='text-center'>
                        {/* map through the tableData array with JSX expression and return the table row*/}
                        {
                            tableData.map(tableRow =>
                                <tr>
                                    <th>{tableRow.id}</th>
                                    <td>{tableRow.tech}</td>
                                    <td>{tableRow.priority}</td>
                                </tr>
                            )
                        }
                    </tbody>
                </table>
            </div>
        </div>
    );
};

export default TableContainer;

To understand “why and how are using regular JavaScript inside the JSX”, Read this article to know in depth about using JavaScript inside JSX.