Resumen de la tabla de datos adaptables | Programar Plus

Ha habido un montón de tomas de tablas de datos sensibles desde que publiqué por primera vez al respecto.

Ver demostración

La idea del original era abandonar el diseño de cuadrícula de la tabla y hacer de cada celda su propia línea. Cada una de esas líneas está etiquetada con un pseudo elemento. Esto crea una tabla mucho más alta, que requiere más desplazamiento vertical, pero no requiere desplazamiento horizontal. Es más fácil navegar por los datos sin perder el contexto de qué es qué. La desventaja es que podría perder el contexto de la comparación de datos, ya que ya no verá celdas de datos junto a otras celdas de ese tipo.

Mobifreaks publicó una idea muy similar, que utiliza el mismo cambio de diseño y etiquetado de pseudoelementos. Usaron atributos data-* de HTML5 para el etiquetado, lo que elimina la necesidad de tener CSS personalizado para diferentes tablas. No creo en la parte de SEO, pero el código es bueno.

Derek Pennycuff tomó el original y aplicó el concepto de “móvil primero”. En lugar de comenzar con el marcado de la tabla, comienza con el marcado de la lista de definiciones, luego lo fuerza a un diseño de tabla cuando la pantalla es lo suficientemente grande como para acomodarlo. Si bien me encanta el pensamiento aquí, no estoy seguro de que me guste lo que se necesita para hacerlo. El marcado es mucho más pesado e (irónicamente) no creo que sea semántico. Los datos tabulares deben marcarse como una tabla. Creo que la filosofía detrás de “primero el móvil” es mantener las cosas simples y livianas de manera predeterminada y más pesadas y complejas para pantallas más grandes. Esta demostración comienza y se mantiene pesada.

Drew Dyksterhouse hizo una demostración que calcula dónde debe romperse la mesa midiendo si la mesa se ha vuelto más ancha que la pantalla, y luego guarda ese punto de ruptura para mayor eficiencia.

Scott Jehl inventó dos ideas ingeniosas. Una era construir un gráfico a partir de los datos de la tabla. En esta demostración, el gráfico circular es mucho más estrecho que la tabla de datos completa y, por lo tanto, más adecuado para pantallas pequeñas.

Ver demostración

Muy bueno, pero claramente no todas las tablas se pueden convertir en gráficos. También diría que una tabla de datos y un gráfico son cosas bastante diferentes. Si va a tomarse la molestia de hacer un gráfico, probablemente sería bueno mostrarlo en la pantalla más grande, ya que proporciona contexto de una manera alternativa útil. O al menos tener una opción para verlo.

La otra idea de Scott se centra en el problema de que las tablas de datos grandes pueden extender el ancho de un contenedor principal más allá de lo que una pantalla pequeña es capaz de mostrar. Entonces, para evitar esto, se usa una consulta de medios para ocultar la tabla en pantallas pequeñas, reemplazada por una pequeña tabla simulada y un enlace para ver la tabla completa.

Stewart Curry tuvo la idea de ocultar columnas menos importantes para pantallas más pequeñas. Una de las primeras quejas de la gente sobre los sitios específicos para móviles fue que el hecho de que estén en un dispositivo móvil no significa que merezcan una experiencia menos que completa que la de un usuario con una pantalla más grande (especialmente porque estos dispositivos son totalmente capaces de maniobrar alrededor de sitios “llenos”).

Ver demostración

Sin embargo, creo que Stewart estaba en algo. El uso de pantallas pequeñas para enfocar la información en las cosas más importantes es excelente, simplemente no debería bloquear la información sin ningún recurso. Maggie Costello Wachs de Filament Group también tuvo la idea de ocultar columnas no esenciales en pantallas más pequeñas, pero también de proporcionar un menú desplegable donde puede volver a habilitarlas si lo desea (que puede ver con el desplazamiento horizontal).

Ver demostración

David Bushell también abordó la idea de no alterar el formato básico de la tabla, pero aun así resolver el problema de “demasiado ancho”. Su concepto voltea la mesa de lado y aplica overflow-x: auto al tbody lo que significa que las celdas de datos pueden desplazarse hacia la izquierda y hacia la derecha si se sale de una pantalla pequeña, pero siempre verá los encabezados (como si estuvieran en una posición fija).

Ver demostración

Brad Czerniak tiene una idea a la que llama Rainbow Tables en la que, en pantallas más pequeñas, se abandona la estructura de cuadrícula de la tabla y las celdas de datos se aplastan entre sí lo más apretadas posible, sin dejar de ser una “fila”. Luego, en lugar de que los datos se identifiquen por la columna en la que se encuentran, los datos se codifican con colores para que coincidan con una clave.

(La demostración está fuera de línea ahora).

Actualización 26 de mayo de 2012: Zurb tiene una nueva técnica que han publicado. Se centra en que la columna más a la izquierda sea una especie de columna “clave”. En pantallas anchas, es solo una columna normal. En pantallas pequeñas, se vuelve fijo/pegajoso a la izquierda y el resto de las columnas pueden desplazarse. Esto permite la comparación fila a fila.

Es similar a la técnica de David Bushell con la columna izquierda fija, pero quizás un poco más sólida, ya que utiliza JavaScript para manipular un poco el DOM y medir el tamaño de la pantalla. Dependencias adicionales, soporte más profundo, su llamada.

Ver demostración

Actualizaciones

Aquí hay algunos más que han surgido:

  • Filament Group combinó varios de los mejores patrones en un “grupo de complementos para tablas receptivas” llamado Tablesaw.
  • Apilable.js
  • pie de página
  • jQuery-rt-Responsive-Tables
  • RWD-Table-Patrones

Además, Jason Grigsby tiene un artículo sobre cómo elegir una solución basada en lo que el usuario querría hacer con la mesa.

Para hacer que este sea un problema aún más difícil, considere con qué marcado tendría que comenzar para que los datos funcionen sin CSS en absoluto, así como sin JavaScript. La idea es entonces que podría salir a correo electrónico y RSS y todo eso y estar bien. Traté de abordar eso aquí. Es bastante complicado, pero funciona.

(Visited 5 times, 1 visits today)