Tablesaw: herramienta flexible para tablas receptivas

Use Tablesaw para obtener tablas de datos en su sitio web para una capacidad de respuesta efectiva en dispositivos móviles de varias pantallas y resoluciones.

Conseguir que las tablas de datos de un sitio web respondan de forma eficaz en todos los dispositivos móviles y en varias pantallas y resoluciones sigue siendo un gran desafío para los desarrolladores. Tablesaw, un conjunto de complementos jQuery del grupo Filament, podría ser justo lo que está buscando para resolver sus desafíos de visualización de tablas.

El archivo zip de 565 KB está disponible para su descarga como un repositorio de GitHub, que contiene una carpeta «tablesaw-master» con subcarpetas de demostración, una carpeta dist para crear una instalación local, documentos, src y prueba, y varios otros archivos raíz relacionados con el complemento. Este artículo revisará la instalación del complemento y demostrará el uso de la opción de modo de pila para que su tabla responda a Tablesaw.

modelo

El conjunto de complementos Tablesaw jQuery incluye varios modos que le permiten elegir cómo debe responder su tabla, se enumeran a continuación junto con una breve descripción de cada modo:

• montón – Permite que los encabezados de las tablas se apilen en un diseño de dos columnas con los encabezados a la izquierda y los datos a la derecha cuando la ventana gráfica tiene menos de 40 em o 640 px de ancho.
• palanca – Permita que el usuario seleccione las columnas que desea mostrar, en este caso, la tabla debe tener la propiedad de esquema de datos declarada como se muestra en el fragmento de código:
  Y el encabezado debe tener un atributo de prioridad de datos con un valor establecido de 1 a 6, que corrige los puntos de interrupción donde aparecerán las columnas, como se muestra en el fragmento de código de muestra:
• deslizar – Permita que el usuario navegue por las columnas usando el modo de datos «deslizar» y el gesto de deslizar en el fragmento de código de muestra:
• Ordenable – Para permitir que los usuarios ordenen los datos de la tabla haciendo clic en el encabezado de la tabla, el código requerido incluye el siguiente fragmento de código de ejemplo:

También puede aplicar todas las opciones enumeradas anteriormente a una mesa, que Filament Group ha denominado Kitchen Table Sink.

Instalar el complemento

Puede guardar los archivos del complemento de Tablesaw en una ubicación central bajo la raíz web común y luego llamarlos desde cualquier documento web que requiera una tabla de respuesta. Para mi organización de archivos y directorios, dividí los archivos en subcarpetas relevantes, a saber, archivos de secuencias de comandos en «tablesaw/js» y hojas de estilo en «tablesaw/css». Esta estructura de archivos se muestra en las referencias del enlace y el fragmento de código que se muestra a continuación en el código fuente del script es solo para demostración de pila:

Como puede ver, el complemento usa jQuery UI con componentes Bower, que es un administrador de paquetes de proyectos que le permite usar bibliotecas sin descargar manualmente cada proyecto del sitio respectivo.

Una vista completa de la página de demostración «Solo pilas» se ve así:

Una vista receptiva que muestra un ancho inferior a 640 px se ve así:

A continuación se muestra el fragmento de código HTML de «solo pila» para la tabla anterior.

mesa de pila

Stack Table apila los encabezados de las tablas en un diseño de dos columnas con los encabezados a la izquierda. Cambie el tamaño de la ventana gráfica al punto de interrupción de 40em (640px) para ver los cambios.

Para probar un sitio habilitado para Tablesaw localmente en un sistema basado en Linux, debe ejecutar los siguientes módulos de línea de comandos:

• instalar npm
• instalación de cenador
• y gruñido

Estos módulos se utilizan para crear archivos de proyecto en la carpeta dist.

Si está buscando una manera fácil de hacer que sus tablas respondan, Tablesaw es probablemente el conjunto de herramientas que está buscando para manejar la mayoría de las implementaciones de tablas de datos.

Otras lecturas

Para obtener más información sobre Tablesaw y su implementación, asegúrese de consultar el artículo de recursos de Filament Group.