Crear tablas dinámicas con Tabulator

¿Qué es Tabulator?

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!

Instalación

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>

Tabla básica

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.

Configuración de las columnas

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:

  • Title: Este será el título que veremos en el header de la tabla.
  • Field: En esta opción es donde tendremos que referenciar el nombre del parámetro de los datos de la tabla que se van a pintar en esta columna.
  • Editor: Admite varias opciones, podemos fijarlo en true y permitirá la edición automáticamente adaptándose al formato indicado (formatter), también podemos indicar aquí el formato directamente, si no se ha definido el formatter (input, select, star…).
  • Frozen: “Congela” la columna, para que no podamos reposicionarla, cambiar el ancho…
  • HozAlign: Indicaremos la alineación horizontal que tendrán las celdas de la columna.
  • Width: Indicamos el tamaño inicial que tendrá la columna.
  • MinWidth: Indicaremos el tamaño mínimo que tendrá la columna en pixeles.
  • EditorParams: Parámetros adicionales para la opción de edición, por ejemplo, para añadir las opciones disponibles en la edición de tipo select.
  • Formatter: Podemos especificar el formato de la columna, algunos de los formatos que le podemos pasar son “star”, “tickCross”, “rowSelection”, “handle” o “progress”.
  • TitleFormatter: Nos permite usar un formato de header especial en algunos casos, como por ejemplo “rowSelection”.
  • Sorter: Indicamos el tipo de ordenación de la columna, si va a ser de tipo boolean, date, number…
  • HeaderSort: Es un parámetro booleano, por defecto está en true, activa o desactiva la ordenación de la columna.
  • TopCalc / BottomCalc: Añade una fila, al inicio o al final de la tabla, en la que se podrá ver un cálculo realizado sobre los valores de la columna, un sumatorio, una media, …

Digital Lover

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.

Configuración de la tabla

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:

  • Layout: Nos permite indicarle el diseño que tendrá, en nuestro caso le hemos pasado el valor “fitColumns” para que las columnas se ajusten al ancho de la tabla.
  • ResponsiveLayout: Esta opción nos permite ocultar “hide” o colapsar “collapse” las columnas que no caben en el ancho de la tabla según le pasemos un valor u otro.
  • MovableColumns: Nos permite reordenar las columnas, se pueden “congelar” columnas concretas con la propiedad frozen que ya hemos visto.
  • MovableRows: Es necesario setear esta propiedad en true para poder mover y reordenar las filas, cosa que podremos hacer con la columna “handle” que vimos antes.
  • History: Con esta propiedad tendremos la opción de gestionar el historial de los cambios realizados en la tabla para deshacerlos y rehacerlos.
  • Pagination: Sirve para activar la paginación.
  • PaginationSize: Indica el número de filas que tendremos para cada página.
  • PaginationCounter: Añade un contador a la tabla indicando el número total de filas o páginas pasándole “rows” o “pages”, también se le puede pasar un formato personalizado como hemos hecho en nuestro ejemplo.
  • InitialSort: Indica la columna y la dirección para la ordenación inicial de 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' }],
});

Eventos

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.

Resultado final

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.

Conclusión

En Tabulator, podemos encontrar la herramienta perfecta para crear nuestras tablas dinámicas.

Como resumen, repasemos todo lo que Tabulator nos aporta:

  • Gran número de distintas funcionalidades que cubrirán todas nuestras necesidades.
  • Fácil y rápido de implementar, con muy pocas líneas de código ya lo tendremos funcionando.
  • Herramienta gratuita.
  • Muy buena documentación en su página, puedes acceder pinchando aquí.
  • Las tablas son fácilmente escalables si se quieren evolucionar y añadir nuevas funcionalidades.

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.

 

 

He leído y acepto la política de privacidad
Acepto recibir emails sobre actividades de recruiting NTT DATA