¿Qué es handontable.js?
Handsontable.js es un componente de cuadrícula de datos de JavaScript que se puede usar para crear aplicaciones web similares a Excel. Es básicamente una biblioteca de JavaScript. Una cosa buena de handontable.js es que puede usarlo con JavaScript estándar, React, Vue o Angular.
Instalación:
Tiene dos opciones para trabajar con handontable.js. Puede instalar por npm o puede usar CDN. Para instalar handontable, debe ejecutar el siguiente comando en su terminal de Node:
npm install handsontable
Si tiene hilo en lugar de Node, debe ejecutar el siguiente comando:
yarn add handsontable
Después de instalarlo, debe incluir el siguiente código en su archivo html:
<script src=”node_modules/handsontable/dist/handsontable.full.min.js”></script>
<link href=”node_modules/handsontable/dist/handsontable.full.min.css” rel=”stylesheet” media= ”pantalla”>
Como alternativa, puede utilizar CDN. En ese caso, incruste el siguiente código en el archivo html. No hay necesidad de instalación:
<script src=”https://cdn.jsdelivr.net/npm/handsontable@8.2.0/dist/handsontable.full.min.js”></script>
<enlace href=”https://cdn.jsdelivr .net/npm/handsontable@8.2.0/dist/handsontable.full.min.css”
rel=”hoja de estilo” media=”pantalla”>
¿Cómo usar handontable.js?
Crear una hoja de cálculo básica es bastante fácil. Siga estos pasos para crear una cuadrícula de datos básica:
- Primero haga un elemento div vacío en el archivo html. Este será el contenedor de la hoja de cálculo.
HTML
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Introduction to Handsontable.js</title><scriptsrc=</script><linkhref=rel="stylesheet"media="screen"></head><body><h1><center>Create your first data-grid</center></h1><!-- container to wrap the data-grid --><divclass="handsontable-container"></div><scriptsrc="index.js"></script></body></html>
- Ahora, en el archivo index.js (o puede usar etiquetas de script en el archivo html), cree una array 2D que funcionará como datos iniciales en la cuadrícula de datos. Cada fila de la array 2D representa cada fila de la mesa de trabajo. Por ejemplo, si la siguiente array se utiliza como fuente de datos para un objeto práctico, la hoja de cálculo generada contendrá 13 filas y 5 columnas. Tenga en cuenta que también puede usar objetos como fuente de datos en lugar de una array 2D.
const data = [ ['roll','name','stream','semester','email id'], [1,'Raj','IT',8,'Xyz@email.com'], [2,'Timir','CSE',4,'Xyz@email.com'], [4,'Arjesh','IT',2,'Xyz@email.com'], [5,'Haris ali','IT',6,'Xyz@email.com'], [6,'Deepak','CSE',4,'Xyz@email.com'], [7,'Dibyendu','ECE',4,'Xyz@email.com'], [8,'Aman','IT',4,'Xyz@email.com'], [9,'Binayak','CSE',6,'Xyz@email.com'], [10,'Harshad','ECE',6,'Xyz@email.com'], [11,'Abhra','IT',4,'Xyz@email.com'], [12,'Sayan','IT',4,'Xyz@email.com'], ]
- Toma el elemento div
let container = document.querySelector(‘.handsontable-container’);
- Cree un objeto práctico. Aquí Handontable constructor crea una hoja de cálculo. Toma un elemento DOM como primer argumento que contendrá la cuadrícula de datos práctica. El segundo argumento es un objeto que contiene las propiedades de la cuadrícula de datos. Por ejemplo, en el siguiente código, se ha definido un objeto práctico con dos argumentos: un elemento contenedor y un objeto que contiene la fuente de datos para la cuadrícula de datos.
JavaScript
const data = [['roll','name','stream','semester','email id'],[1,'Raj','IT',8,'Xyz@email.com'],[2,'Timir','CSE',4,'Xyz@email.com'],[4,'Arjesh','IT',2,'Xyz@email.com'],[5,'Haris ali','IT',6,'Xyz@email.com'],[6,'Deepak','CSE',4,'Xyz@email.com'],[7,'Dibyendu','ECE',4,'Xyz@email.com'],[8,'Aman','IT',4,'Xyz@email.com'],[9,'Binayak','CSE',6,'Xyz@email.com'],[10,'Harshad','ECE',6,'Xyz@email.com'],[11,'Abhra','IT',4,'Xyz@email.com'],[12,'Sayan','IT',4,'Xyz@email.com'],]let container = document.querySelector('.handsontable-container');let hot =newHandsontable(container,{data: data// Initiating handsontable object})
Producción:
Como se muestra en la imagen de arriba, hemos creado una hoja de cálculo similar a Excel. Similar a Excel, puede cambiar los datos de cada columna. Esta es una cuadrícula de datos básica. Sin embargo, puede personalizarlo agregando muchas funciones.
Por ejemplo, si queremos agregar encabezados con varias opciones, podemos hacerlo fácilmente agregando pares clave-valor adicionales al objeto:
Javascript
let hot = new Handsontable(container, {
data: data,
// Added additional features
// For adding headers on each row
rowHeaders: true,
// For adding headers on each column
colHeaders: true,
// For adding dropdown menu to each headers
dropdownMenu: true,
}
)
Producción:
Si desea dar nombres personalizados a los encabezados en lugar de A, B, C, D… puede hacerlo dando al atributo colHeaders una array en lugar de verdadero :
let hot = new Handsontable(container,{
data: data,
rowHeaders: true,
// For giving custom names to headers
colHeaders: ['roll', 'name', 'stream', 'semester', 'email'],
dropdownMenu: true,
// To add filter feature in table
filters: true,
}
)
Y luego omita el primer elemento de la array de datos:
const data = [
[1,'Raj','IT',8,'Xyz@email.com'],
// The first array element deleted
[2,'Timir','CSE',4,'Xyz@email.com'],
[4,'Arjesh','IT',2,'Xyz@email.com'],
[5,'Haris ali','IT',6,'Xyz@email.com'],
[6,'Deepak','CSE',4,'Xyz@email.com'],
[7,'Dibyendu','ECE',4,'Xyz@email.com'],
[8,'Aman','IT',4,'Xyz@email.com'],
[9,'Binayak','CSE',6,'Xyz@email.com'],
[10,'Harshad','ECE',6,'Xyz@email.com'],
[11,'Abhra','IT',4,'Xyz@email.com'],
[12,'Sayan','IT',4,'Xyz@email.com'],
]
Producción:
Este artículo muestra lo básico de Handsontable. Sin embargo, handsontable.js tiene muchas otras características además de esta. Puede definir funciones para columnas o celdas específicas, exportarlas a Excel, combinar varias filas o columnas, etc. ¡Las posibilidades son infinitas! Vea los documentos aquí para explorarlo.