Table with Hardcoded values
Using HTML tables along with the hardcoded data we will simply used the HTML table elements which are <table>, <tr>, <th>, and <td> elements.
Example: We will see how to create a table using the hardcoded values using HTML tables.
Javascript
// Filename - App.jsimport './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; |
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:
How to create a table in ReactJS ?
When displaying data in an organized style, Table in React JS is a popular component. Using HTML tables and JavaScript, you can quickly construct dynamic and interactive tables in ReactJS.