handsontable

Breve introducción a la librería handsontable para hacer tablas dinámicas en js.

Robert Delaunay

archivado en: JavaScript / 7 enero, 2015

Durante mucho tiempo he trabajado con datatable a la hora de elaborar tablas dinámicas, pero en mi nuevo trabajo he descubierto otra librería muy chula: handsontable, que permite cambiar los datos en tiempo real y, además, tiene la virtud de tener ya preparaíco un módulo para incorporarlo a angular. Su único problema es que, al parecer, no va bien sobre versiones antiguas de la tostadora del explorer, aunque están trabajando para arreglarlo. No entraré en detalle sobre cómo funciona, ya que está muy bien documentada, pero así a vuelapluma unos apuntes sobre el tema...

1. Doble bindeo

En su modo de integración más sencillo, como un plugin de jQuery, librería que hay que incluir, hay que descargarse y enlazar dos archivos.

<script data-jsfiddle="common" src="dist/handsontable.full.min.js"></script>

<link data-jsfiddle="common" rel="stylesheet" media="screen" href="dist/handsontable.full.min.css">

Luego ponemos un div donde irá la tabla, definimos o cargamos los datos, que pueden ser un array o un json, y ya creamos una instancia del objeto pasando como parámetros el div contenedor y los datos de configuración. Por ejemplo:

<div id="miHandsontable"></div>

<script>

var misDatos = [{'foo': 1, 'bar': 5}, {'foo': 4, 'bar': 2 }, {'foo': 3, 'bar': 5 }];

var miContenedor = document.getElementById("miHandsontable");

var miHandsontable = new Handsontable(miContenedor, {

data: misDatos,

colHeaders: true,

columns: [

{data: "foo"}, // en la primera columna mostramos lo que hay en foo

{data: "bar"} // en la segunda, lo de bar

],

minSpareRows: 1 // Una fila en blanco

});

</script>

Y aquí viene la primera idea clave del tema: como ya he explicado en este blog, en javaScript la copia de un objeto o de un array apunta al mismo sitio que el original, por lo que cualquier cambio que hagamos, incluidos los cambios al vuelo en la tabla, repercutirán también ahí. Por lo tanto, si queremos conservar los datos originales hay que realizar una copia profunda del objeto o el array:

datosCopiados = JSON.parse(JSON.stringify(datosOriginales));

...

var miHandsontable = new Handsontable(miContenedor, {

data: datosCopiados,

2. Personalizaciones en cascada : )

Se pueden definir una montonera de parámetros personalizados para las celdas, las columnas y la propia tabla. Y está realmente bien pensado, porque, como ocurre con las hojas de estilo, en caso de coincidencia, los últimos pisan a los primeros.

cascadahansone

Por ejemplo, así indicamos primero que las celdas son de solo lectura, es decir, que no se puede escribir en ellas; pero luego en la definición de las columnas decimos que en la primera sí se puede escribir y, después, en la definición de columnas indicamos que la primera sí que será de solo lectura. La definición coincidente, es decir, sobre el mismo td, de la celda pisa sobre la de la columna y la de esta sobre la de la tabla.

var miContenedor = document.getElementById("miHandsontable");

var miHandsontable = new Handsontable(miContenedor, {

data: misDatos,

colHeaders: true,

readOnly: true,

columns: [

{data: "foo",

readOnly: false}, // pisamos

{data: "bar"}

],

cell: [

{row: 0, col: 0,

readOnly: true} // volvemos a pisar

],

minSpareRows: 1

});

3. Renderer

Tenemos un montón de opciones a la hora de definir la tabla y todas vienen bien explicadas, por lo que solo trataré la que me parece más complicada: renderer. Esta opción sirve para trabajar cada celda en concreto en una función aparte.

var rendererBar = function (instance, td, row, col, prop, value, cellProperties) {

/* De todo lo que llega, por lo general solo nos interesará td, value y cellPropierties */

Handsontable.renderers.TextRenderer.apply(this, arguments);

value = value * 2;

/* Aplicando jQuery a la renderización del td */

$(td).html(value * 2);

/* O javaScript a pelo... */

if ( value > 4 ) td.style.backgroundColor = 'red';

};

var miContenedor = document.getElementById("miHandsontable");

var miHandsontable = new Handsontable(miContenedor, {

data: misDatos,

colHeaders: true,

readOnly: true,

columns: [

{data: "foo", readOnly: false},

{data: "bar", renderer:rendererBar}

]

});

En fin, la librería da muchísimo más de sí, pero de momento voy a dejarlo aquí. Si acaso, otro día amplío un poco más este post hablando de eventos y de cómo trabajarla en angular... ahora chapo que voy a cenar.

|| Tags: ,

valoración de los lectores sobre handsontable

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración negativa
  • 4 sobre 5 (1 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.