Componente React-Bootstrap Tables

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *