Scribd
Upload
4 views

How To Create A Table in ReactJS

How to create a table in ReactJS

Uploaded by

Almaas Chaudry
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

How To Create A Table in ReactJS

How to create a table in ReactJS

Uploaded by

Almaas Chaudry
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

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:

You might also like