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