React-Bootstrap es un marco frontal que se diseñó teniendo en cuenta la reacción. Bootstrap fue reconstruido y renovado para React, por lo que se conoce como React-Bootstrap.
Las tablas en react-bootstrap vienen con clases de estilo predefinidas que son receptivas y confiables.
Accesorios de mesa:
- bordered: agrega bordes en todos los lados de las tablas y celdas.
- sin bordes: elimina los bordes en todos los lados, incluido el encabezado de la tabla.
- variante: Se utiliza para invertir los colores de la mesa de oscuro a claro y viceversa.
- tamaño: Se utiliza para establecer el tamaño de la tabla. Cuando lo configuramos como ‘sm’, el relleno de la celda se reduce a la mitad.
- bsPrefix: es una vía de escape para trabajar con CSS de arranque altamente personalizado.
Creación de la aplicación React e instalación del módulo:
Paso 1:
npx create-react-app foldername
Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:
cd foldername
Paso 3: después de crear la aplicación ReactJS, instale los módulos necesarios con el siguiente comando:
npm install react-bootstrap bootstrap
Paso 4: agregue la siguiente línea en el archivo index.js :
import 'bootstrap/dist/css/bootstrap.css';
Estructura del proyecto: Tendrá el siguiente aspecto.
Ejemplo: App.js
Javascript
import React from 'react';
import Table from 'react-bootstrap/Table'
export default function TableExample() {
return (
<>
<h3>Default Variant Small Size Theme Table</h3>
<Table stripped bordered hover size="sm">
<thead>
<tr>
<th width="170">Student Name</th>
<th width="170">Reg.no</th>
<th width="170">Course</th>
<th width="870">City Name</th>
<th width="1950">Percentage</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rakesh</td>
<td>1123</td>
<td>CSE</td>
<td>Mumbai</td>
<td>86.9%</td>
</tr>
<tr>
<td>Jackson</td>
<td>1124</td>
<td>ECE</td>
<td>Hyderabad</td>
<td>72.4%</td>
</tr>
<tr>
<td>Keshav</td>
<td>1124</td>
<td>CSE</td>
<td>Chennai</td>
<td>88%</td>
</tr>
<tr>
<td>Neilesh Jain</td>
<td>1125</td>
<td>EEE</td>
<td>Gwalior</td>
<td>66.9%</td>
</tr>
<tr>
<td>Akbar sheikh</td>
<td>1126</td>
<td>Mechanical</td>
<td>Indore</td>
<td>96.5%</td>
</tr>
<tr>
<td>Sarita</td>
<td>1127</td>
<td>CSE</td>
<td>Delhi</td>
<td>96.9%</td>
</tr>
</tbody>
</Table>
<h3>Dark Variant Small Size Table</h3>
<Table stripped bordered hover variant="dark" size="sm">
<thead>
<tr>
<th width="170">Student Name</th>
<th width="170">Reg.no</th>
<th width="170">Course</th>
<th width="870">City Name</th>
<th width="1950">Percentage</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rakesh</td>
<td>1123</td>
<td>CSE</td>
<td>Mumbai</td>
<td>86.9%</td>
</tr>
<tr>
<td>Jackson</td>
<td>1124</td>
<td>ECE</td>
<td>Hyderabad</td>
<td>72.4%</td>
</tr>
<tr>
<td>Keshav</td>
<td>1124</td>
<td>CSE</td>
<td>Chennai</td>
<td>88%</td>
</tr>
<tr>
<td>Neilesh Jain</td>
<td>1125</td>
<td>EEE</td>
<td>Gwalior</td>
<td>66.9%</td>
</tr>
<tr>
<td>Akbar sheikh</td>
<td>1126</td>
<td>Mechanical</td>
<td>Indore</td>
<td>96.5%</td>
</tr>
<tr>
<td>Sarita</td>
<td>1127</td>
<td>CSE</td>
<td>Delhi</td>
<td>96.9%</td>
</tr>
</tbody>
</Table>
</>
);
}
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:
npm start
Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida.
Referencia: https://react-bootstrap.netlify.app/components/table/#tables
Publicación traducida automáticamente
Artículo escrito por bunnyram19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA