Material UI for React tiene este componente disponible para nosotros y es muy fácil de integrar. Podemos usar el componente de tabla en ReactJS usando el siguiente enfoque.
Creación de la aplicación React e instalación del módulo:
Paso 1: Cree una aplicación React usando el siguiente comando.
npx create-react-app foldername
Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta , acceda a ella con el siguiente comando.
cd foldername
Paso 3: Después de crear la aplicación ReactJS, instale los módulos material-ui usando el siguiente comando.
npm install @material-ui/core
Estructura del proyecto: Tendrá el siguiente aspecto.
Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.
App.js
import React from "react"; import TableContainer from "@material-ui/core/TableContainer"; import Table from "@material-ui/core/Table"; import TableBody from "@material-ui/core/TableBody"; import TableRow from "@material-ui/core/TableRow"; import Paper from "@material-ui/core/Paper"; import TableHead from "@material-ui/core/TableHead"; import TableCell from "@material-ui/core/TableCell"; function formatOurData(columnName, semOneMarks, semTwoMarks) { return { columnName, semOneMarks, semTwoMarks }; } const SampleData = [ formatOurData("Maths", 55, 66), formatOurData("English", 44, 94), formatOurData("Hindi", 67, 85), formatOurData("Computer", 68, 95), formatOurData("Science", 56, 85), ]; export default function App() { return ( <div style={{ display: "block", padding: 30 }}> <h4>How to use Table Component in ReactJS?</h4> <TableContainer component={Paper}> <Table style={{ width: 600, }} size="small" > <TableHead> <TableRow> <TableCell>Subject Name</TableCell> <TableCell align="right"> Sem-I Marks </TableCell> <TableCell align="right"> Sem-II Marks </TableCell> </TableRow> </TableHead> <TableBody> {SampleData.map((row) => ( <TableRow key={row.columnName}> <TableCell component="th" scope="row"> {row.columnName} </TableCell> <TableCell align="right"> {row.semOneMarks} </TableCell> <TableCell align="right"> {row.semTwoMarks} </TableCell> </TableRow> ))} </TableBody> </Table> </TableContainer> </div> ); }
Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando desde el directorio raíz del proyecto.
npm start
Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida.
Referencia: https://material-ui.com/components/tables/
Publicación traducida automáticamente
Artículo escrito por gouravhammad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA