La visualización de datos tabulares plantea preguntas difíciles en un entorno responsivo. Si la tabla es más grande que la pantalla, podemos permitir un desplazamiento horizontal, ocultar columnas, mostrar un resumen de la tabla con un enlace a la versión completa, o bien tomar otras decisiones.
Este primero enfoque de Chris Coyier funciona con sólo CSS. Debajo una longitud fija determinada de la tabla, cada línea está transformada en columna, los encabezados de la tabla original repitiéndose en el lado. Todo sucede como si la tabla estuviera sometida a una rotación de 90 grados monstrando una línea a la vez. Todos los datos aún se muestran, aunque este enfoque funciona mejor con un pequeño número de líneas y columnas.
Un plugin jQuery, Stackable.js, fue desarrollado por John Polacek siguiendo los mismos principios.
David Bushell va un paso más allá, aciendo girar las tablas con espíritu desde que intercambia líneas y columnas, colocando la línea de encabezamiento los encabezados en primera columna de la tabla resultante, y siempre manteniendola visible, mientras que añade una barra de desplazamiento horizontal para el resto de la tabla.
En un enfoque muy similar, Zurb hace la primera columna fija, permitiendo el desplazamiento horizontal del resto de las columnas. No hay intercambio entre filas y columnas en su implementación CSS/javascript, así los datos se presentan de la misma manera en todos los tamaños de pantalla.
Esta demo muestra una vista previa de la tabla y una llamada a la acción pulse para ver cuando no hay suficiente espacio para ver la tabla completa. El usuario así sabe que unos datos tabulares están presentes, es libre de ir a ver a otra página o no.
Dando un estatuto persist, essential o optional a las columnas a través de una clase CSS, y con la adición de un botón de menú javascript para seleccionar manualmente cual columna mostrar o ocultar, este ejemplo de Filament Group es un buen compromiso entre la facilidad de uso y la cantidad de datos para mostrar.
Con su plugin jQuery FooTable, Chris Coyier concluye esta serie con una tabla que puede ocultar columnas en puntos de ruptura específicos (media queries CSS), permitir la clasificación de columnas y extender la línea para mostrar su contenido escondido.
Vuelta a las tablas
Este primero enfoque de Chris Coyier funciona con sólo CSS. Debajo una longitud fija determinada de la tabla, cada línea está transformada en columna, los encabezados de la tabla original repitiéndose en el lado. Todo sucede como si la tabla estuviera sometida a una rotación de 90 grados monstrando una línea a la vez. Todos los datos aún se muestran, aunque este enfoque funciona mejor con un pequeño número de líneas y columnas.
Un plugin jQuery, Stackable.js, fue desarrollado por John Polacek siguiendo los mismos principios.
Tablas giratorias
David Bushell va un paso más allá, aciendo girar las tablas con espíritu desde que intercambia líneas y columnas, colocando la línea de encabezamiento los encabezados en primera columna de la tabla resultante, y siempre manteniendola visible, mientras que añade una barra de desplazamiento horizontal para el resto de la tabla.
Columna pegada
En un enfoque muy similar, Zurb hace la primera columna fija, permitiendo el desplazamiento horizontal del resto de las columnas. No hay intercambio entre filas y columnas en su implementación CSS/javascript, así los datos se presentan de la misma manera en todos los tamaños de pantalla.
Pulse para ver
Esta demo muestra una vista previa de la tabla y una llamada a la acción pulse para ver cuando no hay suficiente espacio para ver la tabla completa. El usuario así sabe que unos datos tabulares están presentes, es libre de ir a ver a otra página o no.
Columnas que jugan a las escondidas
Dando un estatuto persist, essential o optional a las columnas a través de una clase CSS, y con la adición de un botón de menú javascript para seleccionar manualmente cual columna mostrar o ocultar, este ejemplo de Filament Group es un buen compromiso entre la facilidad de uso y la cantidad de datos para mostrar.
¡Cucú la tabla!
Con su plugin jQuery FooTable, Chris Coyier concluye esta serie con una tabla que puede ocultar columnas en puntos de ruptura específicos (media queries CSS), permitir la clasificación de columnas y extender la línea para mostrar su contenido escondido.
Ilustración: La table tournante : expérience de magnétisme, por Eugène de Mirecourt y Champfleury, 1853
Des tables responsives (en francés)
Responsive tables (en inglés)
Tabelas responsivas (en portugués)
No hay comentarios:
Publicar un comentario