Reaccionar API de pie de tabla de MUI

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 TableFooter . El pie de tabla se utiliza para mostrar información diferente, como el número de columnas seleccionadas o los nombres de las columnas. Las tablas se utilizan para mostrar una colección de datos de forma organizada. La API proporciona muchas funcionalidades y aprenderemos a implementarlas.

Importar API de pie de tabla:

import TableFooter from '@mui/material/TableFooter';
// or
import { TableFooter } 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

Sintaxis: cree un componente TableFooter dentro de la tabla de la siguiente manera:

<Table sx={{ minWidth: 650 }}>
  <TableFooter>
    <TableCell>Total Number of Rows is 3</TableCell>
  </TableFooter>
</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 un pie de página que muestra el número de columnas.

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";
  
function createData(index = 0, tutorial = "", link = "") {
  return { index, tutorial, link };
}
  
const rows = [
  createData(
    1,
    "Data Structures",
    "https://www.geeksforgeeks.org/data-structures/?ref=shm"
  ),
  createData(
    2,
    "Algorithms",
    "https://www.geeksforgeeks.org/fundamentals-of-algorithms/?ref=shm"
  ),
  createData(
    3,
    "Competitive Programming",
    "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 TableFooter 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) => (
              <TableRow 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>
          <TableFooter>
            <TableCell>Total Number of Rows is 3</TableCell>
          </TableFooter>
        </Table>
      </TableContainer>
    </div>
  );
}
  
export default App;

Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando.

npm start

Producción:

 

Ejemplo 2 : en este ejemplo, tenemos las filas seleccionables y el índice seleccionado se muestra en el pie de página.

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 Structures",
    "https://www.geeksforgeeks.org/data-structures/?ref=shm"
  ),
  createData(
    2,
    "Algorithms",
    "https://www.geeksforgeeks.org/fundamentals-of-algorithms/?ref=shm"
  ),
  createData(
    3,
    "Competitive Programming",
    "https://www.geeksforgeeks.org/competitive-programming-a-complete-guide/?ref=shm"
  ),
];
function App() {
  const [selectedRow, setSelectedRow] = useState();
  
  return (
    <div className="App">
      <div
        className="head"
        style={{
          width: "fit-content",
          margin: "auto",
        }}
      >
        <h1
          style={{
            color: "green",
          }}
        >
          GeeksforGeeks
        </h1>
        <strong>React MUI TableFooter 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={
                  index == selectedRow ? { backgroundColor: "lightcoral" } : {}
                }
                onClick={() => {
                  setSelectedRow(index);
                }}
                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>
          <TableFooter>
            <TableCell>Total Number of Rows is 3</TableCell>
            <TableCell>Number of Selected Rows is {selectedRow}</TableCell>
          </TableFooter>
        </Table>
      </TableContainer>
    </div>
  );
}
  
export default App;

Producción:

 

Referencia: https://mui.com/material-ui/api/table-footer/

Publicación traducida automáticamente

Artículo escrito por RajeevSarkar 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 *