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