Showing data in a tabular form helps the user to get a better idea of the data that the table contains. To show data in a tabular form, we do need to have ideas about JSX, components, and creating components.
In this article, we will show some data in a table using ReactJS.
Prerequisites:
- React App
- Tailwind CSS
- A Tailwind CSS component library; DaisyUI (It will make the task easier)
We will be working on a React App with preinstalled tailwind CSS and DaisyUI. To know about setting up the project environment with tailwind CSS Read this article.
Show data into table form in ReactJS
- Create a folder named components inside src folder. And then create a functional component there.
// src/components/TableContainer.js import React from 'react'; const TableContainer = () => { return ( <div> </div> ); }; export default TableContainer;
- Create an Array of Objects in the component function
// src/components/TableContainer.js import React from 'react'; const TableContainer = () => { // create an array of objects const tableData = [ { id: 1, tech: "JavaScript", priority: "maximum" }, { id: 2, tech: "ReactJS", priority: "maximum" }, { id: 3, tech: "NextJS", priority: "maximum" }, { id: 4, tech: "NodeJS", priority: "maximum" }, { id: 5, tech: "ExpressJS", priority: "maximum" }, { id: 6, tech: "Tailwind CSS", priority: "maximum" }, { id: 7, tech: "Bootstrap", priority: "maximum" }, { id: 8, tech: "HTML5", priority: "maximum" }, { id: 9, tech: "CSS3", priority: "maximum" }, ] return ( <div> </div> ); }; export default TableContainer;
- Write the below code inside
<div>
tag.
// src/components/TableContainer.js import React from 'react'; const TableContainer = () => { // create an array of objects const tableData = [ { id: 1, tech: "JavaScript", priority: "maximum" }, { id: 2, tech: "ReactJS", priority: "maximum" }, { id: 3, tech: "NextJS", priority: "maximum" }, { id: 4, tech: "NodeJS", priority: "maximum" }, { id: 5, tech: "ExpressJS", priority: "maximum" }, { id: 6, tech: "Tailwind CSS", priority: "maximum" }, { id: 7, tech: "Bootstrap", priority: "maximum" }, { id: 8, tech: "HTML5", priority: "maximum" }, { id: 9, tech: "CSS3", priority: "maximum" }, ] return ( <div className="flex justify-center my-10 bg-base-100"> <div className="overflow-x-auto"> <table className="table table-zebra w-full"> <thead> <tr className='text-center'> <th></th> <th>Name</th> <th>Job</th> <th>Favorite Color</th> </tr> </thead> <tbody className='text-center'> <tr> <th>1</th> <td>Cy Ganderton</td> <td>Quality Control Specialist</td> <td>Blue</td> </tr> </tbody> </table> </div> </div> ); }; export default TableContainer;
- Import this component inside App.js and use it.
// src/App.js // import table component here import TableContainer from "./components/TableContainer"; function App() { return ( <div> <h2 className="text-5xl text-center">Showing Data In A Tablular Form</h2> <TableContainer /> </div> ); } export default App;
Now run the server.
- Go to the Table Component, and use JSX expression to map through the tableData array inside the JSX.
<tbody className='text-center'> {/* map through the tableData array with JSX expression and return the table row*/} { tableData.map(tableRow => <tr> <th>{tableRow.id}</th> <td>{tableRow.tech}</td> <td>{tableRow.priority}</td> </tr> ) } </tbody>
// src/components/TableContainer.js import React from 'react'; const TableContainer = () => { // create an array of objects const tableData = [ { id: 1, tech: "JavaScript", priority: "maximum" }, { id: 2, tech: "ReactJS", priority: "maximum" }, { id: 3, tech: "NextJS", priority: "maximum" }, { id: 4, tech: "NodeJS", priority: "maximum" }, { id: 5, tech: "ExpressJS", priority: "maximum" }, { id: 6, tech: "Tailwind CSS", priority: "maximum" }, { id: 7, tech: "Bootstrap", priority: "maximum" }, { id: 8, tech: "HTML5", priority: "maximum" }, { id: 9, tech: "CSS3", priority: "maximum" }, ] return ( <div className="flex justify-center my-10 bg-base-100"> <div className="overflow-x-auto"> <table className="table table-zebra w-full"> <thead> <tr className='text-center'> <th>Sl No.</th> <th>Name</th> <th>Priority</th> </tr> </thead> <tbody className='text-center'> {/* map through the tableData array with JSX expression and return the table row*/} { tableData.map(tableRow => <tr> <th>{tableRow.id}</th> <td>{tableRow.tech}</td> <td>{tableRow.priority}</td> </tr> ) } </tbody> </table> </div> </div> ); }; export default TableContainer;
To understand “why and how are using regular JavaScript inside the JSX”, Read this article to know in depth about using JavaScript inside JSX.