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

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

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

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: