Reaccionar MUI TableCell API

MUI o 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 TableCell. TableCell se utiliza para colocar el contenido de las tablas que son los datos. Una tabla es un componente que se utiliza para mostrar una colección de datos. La API proporciona muchas funcionalidades y aprenderemos a implementarlas.

Importar API TableCell

import TableCell from '@mui/material/TableCell';
// or
import { TableCell } 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 (Node): Es un componente similar a la fila de la tabla.
• clases (Objeto): reemplaza los estilos existentes o agrega nuevos estilos al componente.
• componente (elementType): Es el componente utilizado para el Node raíz. Puede ser una string HTML o un componente.
• sx (Array<func/objeto/bool>/func/objeto): La propiedad del sistema permite definir anulaciones del sistema, así como estilos CSS adicionales
• alinear (centro, heredar, justificar, izquierda, derecha): el valor predeterminado se hereda y establece la dirección del contenido de la celda.
• padding (checkbox, none, normal): Establece el padding de la celda.
• scope (string): Establece los atributos del alcance.
• tamaño (pequeño, mediano): Especifica el tamaño de la celda. 
• sortDirection (asc, desc, false): establece la dirección de clasificación
• variante (cuerpo, pie de página, encabezado): Especifica el tipo de celda.

Sintaxis: Cree un componente TableCell dentro de la tabla de la siguiente manera:

<Table aria-label="simple table">
    <TableBody>
        <TableRow>
            <TableCell>Sl. No.</TableCell>
            <TableCell align="right">Name</TableCell>
            <TableCell align="center">Age</TableCell>
        </TableRow>
    </TableBody>
</Table>

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 celdas. El contenido de las celdas tiene diferentes alineaciones.

Aplicación.js