Hay muchos tipos de tablas, desde las tablas estáticas más básicas hasta las más complejas, y realmente podemos añadir tantas funcionalidades como se nos ocurran llegando a alcanzar niveles de complejidad bastante altos.
Sería genial tener una herramienta que nos ofrezca la posibilidad de crear una tabla dinámica compleja en poco tiempo, y la tenemos, hoy quiero enseñaros Tabulator, una herramienta gratuita para crear tablas dinámicas en cualquier framework JS, que ya nos provee de prácticamente cualquier funcionalidad que podamos necesitar.
¿No te lo crees?
¡Vamos a verlo!
Añadir Tabulator a nuestro proyecto es muy fácil y la documentación de Tabulator ya nos ofrece toda la información que podamos necesitar para distintos frameworks.
En nuestro caso vamos a crear la tabla en vanillaJS, para ello necesitaremos importarnos la librería.
Podemos hacerlo directamente sin descargar la librería a través de UNPKG CDN añadiendo lo siguiente a nuestra cabecera:
<link href="https://unpkg.com/tabulator-tables@5.4.2/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.4.2/dist/js/tabulator.min.js"></script>
Ya lo tenemos listo, ahora vamos a crear nuestra primera tabla, primero la parte del HTML:
<div id="tabulator_demo"></div>
Ahora preparamos el array de datos:
var tableData = [
{ id: 1, name: 'Iron Man', birthday: '29/05/1970', type: 'Hero',
rating: 5, alive: false },
{ id: 2, name: 'Black Widow', birthday: '03/12/1984', type: 'Hero',
rating: 4, alive: true },
{ id: 3, name: 'Captain America', birthday: '04/07/1920', type: 'Hero',
rating: 4, alive: true },
{ id: 4, name: 'Thor', type: 'Hero', rating: 4, alive: true },
{ id: 5, name: 'Hulk', birthday: '18/12/1969', type: 'Hero', rating: 4,
alive: true },
{ id: 6, name: 'Scarlet Witch', birthday: '10/02/1989', type: 'Hero',
rating: 5, alive: true },
{ id: 7, name: 'Dr. Strange', type: 'Hero', rating: 5, alive: true },
{ id: 8, name: 'Thanos', type: 'Villain', rating: 5, alive: false },
{ id: 9, name: 'Ultron', type: 'Villain', rating: 4, alive: false },
{ id: 10, name: 'Galactus', type: 'Villain', rating: 5, alive: true },
{ id: 11, name: 'Loki', type: 'Villain', rating: 4, alive: true },
];
Y declaramos la tabla pasándole el array de datos:
var table = new Tabulator("#tabulator_demo", {
data: tableData,
autoColumns: true
});
Y ya estaría, así de fácil y con las mínimas líneas de código posible, ya tendríamos creada nuestra primera tabla:
Como vemos, a parte del array de datos, también le hemos pasado la propiedad autoColumns con la que nos generará automáticamente las columnas a partir de los datos del array.
Pero no vamos a quedarnos solo con eso, vamos a ver algunas, no todas ya que hay bastantes, de las distintas opciones que tenemos para configurar cada una de las columnas, en concreto las que hemos usado para nuestro ejemplo:
A partir de estas propiedades, hemos preparado la siguiente configuración para las columnas de nuestra tabla:
var columnsData = [
{ rowHandle: true, formatter: 'handle', headerSort: false, width: 30,
minWidth: 30 },
{ formatter: 'rowSelection', titleFormatter: 'rowSelection',
hozAlign: 'left', headerSort: false, width: 30
},
{ title: 'Birthday', field: 'birthday', width: 100, hozAlign: 'center',
frozen: true },
{ title: 'Name', field: 'name', hozAlign: 'left' },
{ title: 'Type', field: 'type', hozAlign: 'left', editor: 'select',
editorParams: {values:['Hero', 'Villain']}},
{ title: 'Rating', field: 'rating', hozAlign: 'center', formatter: 'star',
formatterParams: {stars: 5}, editor: true, bottomCalc: 'avg' },
{ title: 'Alive', field: 'alive', width: 100, hozAlign: 'center',
formatter: 'tickCross', sorter: 'boolean', editor: true },
];
Con esta configuración ya tenemos configuradas las columnas de nuestra tabla.
La primera de ellas es una columna especial de tipo “handle”, la cual nos va a permitir mover las distintas filas de nuestra tabla para reordenarlas.
En segundo lugar, tenemos otra columna especial, esta vez es un selector de filas, nos mostrará en cada fila un check, con el que podremos seleccionar cada una de ellas.
A continuación, tenemos una columna muy sencilla, que nos mostrará la fecha de nacimiento.
En los datos hay entradas que no tienen el birthday, por lo que esas casillas aparecerán vacías.
Marcando el headerSort en false evitamos que se pueda ordenar la tabla con esta columna.
Con la propiedad de frozen en true, la bloqueamos, para que no se pueda cambiar su posición ni tamaño.
La opción para reordenar las columnas la veremos más adelante en la configuración de la tabla.
La siguiente es la columna “Name” la cual es una columna básica, después de esta tenemos la columna “Type”, la cual es de tipo select, y en el parámetro editorParams le estamos pasando los dos valores que queremos que permita para esa columna, para que, en caso de editarla, se despliegue un dropdown con las opciones, como vemos en la imagen.
Tras estas dos columnas tenemos la columna “Rating”, con un formatter especial de tipo “star”, nos mostrará las estrellas que le indiquemos a modo de valoración. En el parámetro formatterParams le estamos especificando que queremos que el máximo sean 5 estrellas, además le hemos añadido el parámetro bottomCalc como “avg” con lo que al final de la tabla nos mostrará la media de todos los valores de la tabla de esa columna, no solo de la página actual.
Y por último tenemos la columna “Alive”, la cual admite valores booleanos y tiene también un formatter especial “tickCross”, el cual nos mostrará un icono de un “tick” si el valor es true y un icono “cross” si es false.
La columna id de los datos, no la hemos incluido, por lo que no aparecerá en la tabla, pero sí que nos aparecería entre los datos a la hora de gestionar las filas con los eventos disponibles.
Tenemos los datos de la tabla, y el formato de cada una de las columnas, pero también podemos definir distintos parámetros a nivel global de la tabla.
Vamos a ver las configuraciones que hemos utilizado para la tabla:
Finalmente, la configuración de la tabla nos ha quedado así:
var table = new Tabulator('#tabulator_demo',{
data: tableData,
columns: columnsData,
layout: 'fitColumns',
responsiveLayout: 'hide',
movableColumns: true,
movableRows: true,
history: true,
pagination: true,
paginationSize: 5,
paginationCounter: function (pageSize, currentPage, totalRows, totalPages){
return('Showing ' + pageSize
+ ' rows of ' + totalRows
+ ' total<br>Showing ' + currentPage
+ ' pages of ' + totalPages + ' total');
},
initialSort:[{ column:'rating', dir:'desc' }],
});
En la siguiente imagen, podemos ver los distintos eventos que a día de hoy tiene disponible Tabulator:
Como podemos ver tenemos un montón de opciones a las que acceder, podemos manejar eventos a nivel de tabla, columnas, filas, celdas, ordenación y filtrado de datos, gestión de la paginación…
Saliendo de las opciones más comunes, en la gestión de las distintas partes de la tabla o de la misma paginación, para nuestro ejemplo hemos implementado los eventos de exportación y de histórico.
Tabulator nos permite la exportación de la tabla en formatos CSV, JSON, XLSX, PDF y HTML.
Los eventos para la gestión del histórico nos permiten hacer y deshacer los cambios en los datos que hemos hecho en vivo sobre la tabla.
Como vemos, las opciones son muchas y seguro que abordará cualquier necesidad que tengamos.
Finalmente, aquí tenemos el resultado final de nuestra tabla dinámica:
Una imagen está bien, pero al fin y al cabo es una tabla dinámica, así que para poder ver mejor toda la funcionalidad que le hemos aportado a la tabla, podéis probarla en el siguiente enlace a stackblitz.
En Tabulator, podemos encontrar la herramienta perfecta para crear nuestras tablas dinámicas.
Como resumen, repasemos todo lo que Tabulator nos aporta:
Así que ya sabes, la próxima vez que tengas que crear una tabla dinámica, dale una oportunidad a Tabulator, comprobarás que te dará exactamente lo que necesitas y mucho más, no te arrepentirás.