React.js Blueprint es un conjunto de herramientas de interfaz de usuario de front-end. Es muy optimizado y popular para crear interfaces que son complejas y densas en datos para aplicaciones de escritorio.
React.js Blueprint HTMLTable Component permite agregar accesorios modificadores para aplicar estilos a un elemento HTML <table>.
Accesorios de tabla de componentes HTML:
- bordered: Es un valor booleano. Habilita los bordes entre filas y celdas. Es cierto por defecto.
- condensado: Es un valor booleano. Permite una apariencia pequeña y condensada.
- elementRef: es un controlador de referencia o un objeto de referencia que recibe el elemento HTML nativo representado por este componente.
- interactivo: Es un valor booleano. Habilita estilos de desplazamiento en filas. Es cierto por defecto.
- striped: Es un valor booleano. Permite un color de fondo alternativo en filas impares. Es cierto por defecto.
Sintaxis:
<HTMLTable></HTMLTable>
Requisito previo: Introducción e instalación ReactJS
Creación de la aplicación React y la instalación del módulo:
Paso 1: cree la carpeta del proyecto de reacción, para eso abra la terminal y escriba el comando npm create-react-app folder name, si ya instaló create-react-app globalmente. Si no lo ha hecho, instale create-react-app globalmente usando el comando npm -g create-react-app o instálelo localmente con npm i create-react-app .
npm create-react-app project
Paso 2: después de crear la carpeta de su proyecto (es decir, proyecto), muévase a ella usando el siguiente comando.
cd project
Paso 3: ahora instala la dependencia usando el siguiente comando:
npm install @blueprintjs/core
Estructura del proyecto: Se verá así:
Ejemplo 1: estamos importando HTMLTable desde «@blueprintjs/core». Para aplicar los estilos predeterminados de los componentes estamos importando «@blueprintjs/core/lib/css/blueprint.css».
Al componente HTMLTable estamos agregando la fila de la tabla <tr> y los datos de la tabla <td>, y le estamos pasando los accesorios con bordes y rayas .
App.js
import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { HTMLTable } from "@blueprintjs/core";
function App() {
return (
<div
style={{
margin: "20px 60px",
}}
>
<h4>
ReactJS Blueprint HTMLTable Component Props
</h4>
<HTMLTable bordered striped>
<thead>Students List</thead>
<tbody>
<tr>
<th>Name</th>
<th>Roll No.</th>
<th>Marks</th>
</tr>
<tr>
<td>S1</td>
<td>3</td>
<td>80</td>
</tr>
<tr>
<td>S2</td>
<td>2</td>
<td>100</td>
</tr>
<tr>
<td>S3</td>
<td>9</td>
<td>40</td>
</tr>
<tr>
<td>S4</td>
<td>12</td>
<td>60</td>
</tr>
</tbody>
</HTMLTable>
</div>
);
}
export default App;
Paso para ejecutar la aplicación: ejecute la aplicación con el siguiente comando desde el directorio raíz del proyecto.
npm start
Producción:
Ejemplo 2: A la tabla anterior que hemos creado le estamos pasando los accesorios condensados e interactivos .
App.js
import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { HTMLTable } from "@blueprintjs/core";
function App() {
return (
<div
style={{
margin: "20px 60px",
}}
>
<h4>
ReactJS Blueprint HTMLTable Component Props
</h4>
<HTMLTable interactive condensed>
<thead>Students List</thead>
<tbody>
<tr>
<th>Name</th>
<th>Roll No.</th>
<th>Marks</th>
</tr>
<tr>
<td>S1</td>
<td>3</td>
<td>80</td>
</tr>
<tr>
<td>S2</td>
<td>2</td>
<td>100</td>
</tr>
<tr>
<td>S3</td>
<td>9</td>
<td>40</td>
</tr>
<tr>
<td>S4</td>
<td>12</td>
<td>60</td>
</tr>
</tbody>
</HTMLTable>
</div>
);
}
export default App;
Paso para ejecutar la aplicación: ejecute la aplicación con el siguiente comando desde el directorio raíz del proyecto.
npm start
Producción:
Referencia: https://blueprintjs.com/docs/#core/components/html-table.props