La interfaz de usuario semántica es un marco moderno que se utiliza para desarrollar diseños perfectos para el sitio web. Brinda al usuario una experiencia liviana con sus componentes. Utiliza el lenguaje CSS, JQuery predefinido para incorporar en diferentes marcos.
En este artículo, sabremos cómo usar las colecciones de tablas en la interfaz de usuario semántica de ReactJS.
Tabla se utiliza para hacer una tabla que contiene alguna información.
Tipos:
- definición: la tabla se puede formatear para enfatizar una primera columna que define el contenido de una fila.
- estructurado: la tabla se puede formatear para mostrar datos complejos en un formato de estructura.
- positivo / negativo: el uso de este estado le permitirá al usuario saber que el
- error: C
- advertencia: este estado le permitirá al usuario saber si alguna celda o fila muestra alguna advertencia
- active: este estado activará la fila seleccionada actualmente por el usuario.
- deshabilitado: este estado se usa para hacer cualquier c
Sintaxis:
<Table>
<Table.Header>
<Table.Row>
content
</Table.Row>
</Table.Header>
<Table.Body>
<Table.Row>
content
</Table.Row>
</Table.Body>
</Table>
Creación de la aplicación React e instalación del módulo:
- Paso 1: Cree una aplicación React usando el siguiente comando.
npx create-react-app foldername
- Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando.
cd foldername
- Paso 3: instale la interfaz de usuario semántica en su directorio dado.
npm install semantic-ui-react semantic-ui-css
Estructura del proyecto : Se verá como lo siguiente.
Paso para ejecutar la aplicación: ejecute la aplicación desde el directorio raíz del proyecto, utilizando el siguiente comando.
npm start
Ejemplo 1: en este ejemplo, usaremos elementos de tabla, encabezado y calificación para mostrar la tabla básica mediante el uso de colecciones de tablas de IU semánticas de ReactJS.
App.js
import React from 'react'
import { Header, Table, Rating } from 'semantic-ui-react'
const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href =
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);
const btt = () => (
<Table celled padded>
<Table.Header>
<Table.Row>
<Table.HeaderCell textAlign='center'>
S no.
</Table.HeaderCell>
<Table.HeaderCell textAlign='center'>
GeeksforGeeks
</Table.HeaderCell>
<Table.HeaderCell textAlign='center'>
Rating
</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.Cell>
<Header as='h2' textAlign='center'>
1
</Header>
</Table.Cell>
<Table.Cell singleLine textAlign='center'>
gfg1
</Table.Cell>
<Table.Cell>
<Rating icon='star' defaultRating={5} maxRating={5}/>
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Header as='h2' textAlign='center'>
2
</Header>
</Table.Cell>
<Table.Cell singleLine textAlign='center'>gfg2
</Table.Cell>
<Table.Cell>
<Rating icon='star' defaultRating={5} maxRating={5} />
</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
)
export default btt
Producción:
Ejemplo 2: en este ejemplo, usaremos elementos de tabla, encabezado y calificación para mostrar la tabla con estado de error mediante el uso de colecciones de tablas de IU semánticas de ReactJS.
App.js
import React from 'react'
import { Header, Table, Rating } from 'semantic-ui-react'
const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href =
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);
const btt = () => (
<Table celled padded>
<Table.Header>
<Table.Row>
<Table.HeaderCell textAlign='center'>S no.
</Table.HeaderCell>
<Table.HeaderCell textAlign='center'>
GeeksforGeeks
</Table.HeaderCell>
<Table.HeaderCell textAlign='center'>Rating
</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.Cell>
<Header as='h2' textAlign='center'>
1
</Header>
</Table.Cell>
<Table.Cell singleLine textAlign='center'>gfg1
</Table.Cell>
<Table.Cell>
<Rating icon='star' defaultRating={5} maxRating={5}/>
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Header as='h2' textAlign='center'>
2
</Header>
</Table.Cell>
<Table.Cell singleLine textAlign='center'>gfg2
</Table.Cell>
<Table.Cell>
<Rating icon='star' defaultRating={5} maxRating={5} />
</Table.Cell>
</Table.Row>
</Table.Body>
<Table.Body>
<Table.Row error>
<Table.Cell>
<Header as='h2' textAlign='center'>
3
</Header>
</Table.Cell>
<Table.Cell singleLine textAlign='center'>gfg3
</Table.Cell>
<Table.Cell>
<Rating icon='star' defaultRating={5} maxRating={5}/>
</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
)
export default btt
Producción:
Referencia: https://react.semantic-ui.com/collections/table