How to create a table in ReactJS ?

When displaying data in an organized style in web applications, tables are a popular component. Using the strength of JSX and JavaScript, you can quickly construct dynamic and interactive tables in ReactJS. The process of making a table in ReactJS will be covered in this post, along with some best practices. In this article, we will create a simple table in React.js just like you would create in a normal HTML project. 

Prerequisites: The pre-requisites for this project are:

• React
• Functional Components
• JavaScript ES6
• HTML Tables & CSS

Creating a React application:

Step 1: Create a react application by typing the following command in the terminal.

npx create-react-app react-table

Step 2: Now, go to the project folder i.e react-table by running the following command.

cd react-table

Project Structure: It will look like the following:

Example 1: Here App.js is the default component. At first, we will see how to create a table using the hardcoded values. Later we will see how to dynamically render the data from an array inside the table. 

Filename: App.js

Javascript

import './App.css';

function App() {
return (
<div className="App">
    <table>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Gender</th>
        </tr>
        <tr>
            <td>Anom</td>
            <td>19</td>
            <td>Male</td>
        </tr>
        <tr>
            <td>Megha</td>
            <td>19</td>
            <td>Female</td>
        </tr>
        <tr>
            <td>Subham</td>
            <td>25</td>
            <td>Male</td>
        </tr>
    </table>
</div>
);
}

export default App;

In the above example, we just simply used the HTML table elements which are <table>, <tr>, <th>, and <td> elements. 

Example 2: Now let us see how we can dynamically render data from an array. Instead of manually iterating over the array using a loop, we can simply use the inbuilt Array.map() method. The Array.map() method allows you to iterate over an array and modify its elements using a callback function. The callback function will then be executed on each of the array’s elements. In this case, we will just return a table row on each iteration.

Filename: App.js

Javascript

import './App.css';

// Example of a data array that
// you might receive from an API
const data = [
    { name: "Anom", age: 19, gender: "Male" },
    { name: "Megha", age: 19, gender: "Female" },
    { name: "Subham", age: 25, gender: "Male" },
]

function App() {
    return (
        <div className="App">
            <table>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Gender</th>
                </tr>
                {data.map((val, key) => {
                    return (
                        <tr key={key}>
                            <td>{val.name}</td>
                            <td>{val.age}</td>
                            <td>{val.gender}</td>
                        </tr>
                    )
                })}
            </table>
        </div>
    );
}

export default App;

Filename: App.css Now, let’s edit the file named App.css to style the table.

CSS

.App {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

table {
    border: 2px solid forestgreen;
    width: 800px;
    height: 200px;
}

th {
    border-bottom: 1px solid black;
}

td {
    text-align: center;
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output: