How to create a table in ReactJS?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

Today, I am going to show you. How to create a table in ReactJS with code example.

To create a table in reactjs, put a table using the hardcoded values.

In this article, we will create a simple table in React.js just like you would create in a normal HTML project. Also, we will style it using normal CSS.

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.

Let’s look at the following example to understand how it basically works:

import './App.css';

function App() {
return (
	<div className="App">
	<table>
		<tr>
		<th>Name</th>
		<th>Age</th>
		<th>Gender</th>
		</tr>
		<tr>
		<td>Aman</td>
		<td>22</td>
		<td>Male</td>
		</tr>
		<tr>
		<td>Rosani</td>
		<td>20</td>
		<td>Female</td>
		</tr>
		<tr>
		<td>Sujit</td>
		<td>24</td>
		<td>Male</td>
		</tr>
	</table>
	</div>
);
}

export default App;

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

.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:

Check the output of the above code example.

React App, Table, In, React

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

Related Posts