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