Scribd
Upload
8 views

How To Create A Table in ReactJS

How to create a table in ReactJS

Uploaded by

Almaas Chaudry
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

How To Create A Table in ReactJS

How to create a table in ReactJS

Uploaded by

Almaas Chaudry
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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