Contacto

Tablas responsive en Drupal 8

Las tablas, el elemento HTML que antiguamente servía para estructurar contenido, hoy específicamente se encarga de cumplir con su objetivo semántico, es el encargado de organizar información en celdas. Es muy útil para cierto tipo de datos, esencialmente si se desean mostrar de la forma que caracteriza a las tablas.

El uso de las tablas hoy en día se ve limitado debido a su poca flexibilidad en el mundo de los diversos dispositivos móviles, como gran alternativa los frameworks css nos apoyan con añadir soluciones como poner un div contenedor que nos genere un scroll horizontal en la resolución más pequeña que tenemos, luego de haber logrado la fluidez de la tabla hasta su más mínima capacidad.

Si integramos un sitio Drupal con algún framework css solo bastaría con alterar el template que maneje su marcado y nos resolverá el problema, sin embargo hay un caso especial en el que me quiero enfocar en este artículo, se trata de las tablas generadas con un editor Drupal.
 

El módulo Responsive tables filter, nos brinda el comportamiento responsive del plugin tablesaw y como observamos anteriormente ellos también recomiendan usar este módulo solo para los casos en el que se usa un editor Wysiwyg.

Pasos de instalación y configuración

El módulo se instala como cualquier otro: https://www.drupal.org/project/responsive_tables_filter

Hay que considerar las siguientes configuraciones post instalación:

Debemos llegar a la siguiente ruta: admin/config/content/formats

Ubicar el editor en el que queremos habilitar la funcionalidad

Escoger editor

Dentro de la página debemos ubicar la configuración para habilitar el comportamiento responsive en las tablas

Habilitar filtros

Luego debemos verificar que los elementos de tabla que necesitemos estén en :

filtros habilitados

 

 

Finalmente agregamos la siguiente tabla a través del editor wysiwyg configurado, (Podemos notar que las tablas presentan unas celdas como cabecera).

Tabla con cabecera, resolución desktop

 

Se mostrará de la siguiente manera en las resoluciones menores, el uso de las cabeceras hacen que el resultado se vea mucho más amigable para un celular.

Tabla con cabecera responsive

 

Si la tabla no usa cabeceras es muy importante saber que la información se ordenará por filas coo podemos ver en el siguiente ejemplo:

En resolución Desktop:

Tabla sin cabecera en desktop

 

En resolución mobile:

Tabla sin cabecera responsive

 

Añadir nuevo comentario

HTML Restringido

  • Etiquetas HTML permitidas: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Saltos automáticos de líneas y de párrafos.
  • Las direcciones de correos electrónicos y páginas web se convierten en enlaces automáticamente.
CAPTCHA
Esta pregunta para comprobar que eres una persona real e impedir el envío de SPAM.