Material-UI es una biblioteca de interfaz de usuario que proporciona componentes robustos y personalizables predefinidos para React para facilitar el desarrollo web. El diseño de MUI se basa en la parte superior de Material Design de Google.
En este artículo, vamos a discutir la API React MUI TableRow . Las tablas se utilizan para mostrar una colección de datos. TableRow en una fila en la tabla que aparece como una franja horizontal. La API proporciona muchas funcionalidades y vamos a aprender a implementarlas.
Importar API TableRow:
import TableRow from '@mui/material/TableRow'; // or import { TableRow } from '@mui/material';
Lista de accesorios: aquí está la lista de diferentes accesorios utilizados con este componente. Podemos acceder a ellos y modificarlos según nuestras necesidades.
- children: Es un componente similar a la fila de la tabla.
- clases: Esto anula los estilos existentes o agrega nuevos estilos al componente.
- sx: la propiedad del sistema permite definir anulaciones del sistema, así como estilos CSS adicionales.
- componente: el componente se utiliza como Node raíz.
- hover: si es verdadero, la fila mostrará una sombra al pasar el mouse.
- seleccionado: si es verdadero, la fila mostrará una sombra en seleccionado.
Sintaxis: Cree el componente TableRow de la siguiente manera:
<TableRow hover key={row.name}> <TableCell component="th" scope="row"> {row.index} </TableCell> <TableCell>{row.tutorial}</TableCell> <TableCell> <a href={row.link} target="_blank"> {row.link} </a> </TableCell> </TableRow>
Instalar y crear la aplicación React y agregar las dependencias de MUI.
Paso 1: Cree un proyecto de reacción usando el siguiente comando.
npx create-react-app gfg_tutorial
Paso 2: Entrar en el directorio del proyecto
cd gfg_tutorial
Paso 3: instale las dependencias de MUI de la siguiente manera:
npm install @mui/material @emotion/react @emotion/styled @mui/lab
Paso 4: Ejecute el proyecto de la siguiente manera:
npm start
Ejemplo 1: en el siguiente ejemplo, tenemos una tabla con TableRow que muestra una sombra al pasar el mouse.
App.js
import './App.css' import * as React from 'react' import Table from '@mui/material/Table' import TableBody from '@mui/material/TableBody' import TableCell from '@mui/material/TableCell' import TableContainer from '@mui/material/TableContainer' import TableHead from '@mui/material/TableHead' import TableRow from '@mui/material/TableRow' import Paper from '@mui/material/Paper' import { TableFooter } from '@mui/material' import { useState } from 'react' function createData(index = 0, tutorial = '', link = '') { return { index, tutorial, link } } const rows = [ createData( 1, 'Data Strucutures', 'https://www.geeksforgeeks.org/data-structures/?ref=shm', ), createData( 2, 'Algorithms', 'https://www.geeksforgeeks.org/fundamentals-of-algorithms/?ref=shm', ), createData( 3, 'Competitive Programmming', 'https://www.geeksforgeeks.org/competitive-programming-a-complete-guide/?ref=shm', ), ] function App() { return ( <div className="App"> <div className="head" style={{ width: 'fit-content', margin: 'auto', }} > <h1 style={{ color: 'green', }} > GeeksforGeeks </h1> <strong>React MUI TableRow API</strong> </div> <TableContainer component={Paper}> <Table sx={{ minWidth: 650 }}> <TableHead> <TableRow> <TableCell>Sl. No.</TableCell> <TableCell>Tutorial</TableCell> <TableCell>Link</TableCell> </TableRow> </TableHead> <TableBody> {rows.map((row, index) => ( <TableRow hover key={row.name}> <TableCell component="th" scope="row"> {row.index} </TableCell> <TableCell>{row.tutorial}</TableCell> <TableCell> <a href={row.link} target="_blank"> {row.link} </a> </TableCell> </TableRow> ))} </TableBody> </Table> </TableContainer> </div> ) } export default App
Producción:
Ejemplo 2: En el siguiente ejemplo, tenemos una Tabla donde TableRow tiene un color de fondo diferente.
App.js
import './App.css' import * as React from 'react' import Table from '@mui/material/Table' import TableBody from '@mui/material/TableBody' import TableCell from '@mui/material/TableCell' import TableContainer from '@mui/material/TableContainer' import TableHead from '@mui/material/TableHead' import TableRow from '@mui/material/TableRow' import Paper from '@mui/material/Paper' import { TableFooter } from '@mui/material' import { useState } from 'react' function createData(index = 0, tutorial = '', link = '') { return { index, tutorial, link } } const rows = [ createData( 1, 'Data Strucutures', 'https://www.geeksforgeeks.org/data-structures/?ref=shm', ), createData( 2, 'Algorithms', 'https://www.geeksforgeeks.org/fundamentals-of-algorithms/?ref=shm', ), createData( 3, 'Competitive Programmming', 'https://www.geeksforgeeks.org/competitive-programming-a-complete-guide/?ref=shm', ), ] function App() { return ( <div className="App"> <div className="head" style={{ width: 'fit-content', margin: 'auto', }} > <h1 style={{ color: 'green', }} > GeeksforGeeks </h1> <strong>React MUI TableRow API</strong> </div> <TableContainer component={Paper}> <Table sx={{ minWidth: 650 }}> <TableHead> <TableRow> <TableCell>Sl. No.</TableCell> <TableCell>Tutorial</TableCell> <TableCell>Link</TableCell> </TableRow> </TableHead> <TableBody> {rows.map((row, index) => ( <TableRow sx={{ backgroundColor: 'lightgreen', }} key={row.name} > <TableCell component="th" scope="row"> {row.index} </TableCell> <TableCell>{row.tutorial}</TableCell> <TableCell> <a href={row.link} target="_blank"> {row.link} </a> </TableCell> </TableRow> ))} </TableBody> </Table> </TableContainer> </div> ) } export default App
Producción:
Referencia: https://mui.com/material-ui/api/table-row/
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA