How to create a table in ReactJS?
May 26, 2022Hi 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.
All the best 👍