Reaccionar MUI TableRow API

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *