Ya hemos visto dos etapas claves para el diseño adaptable con Foundation Zurb: la primera haciendo referencia al grid de nuestro proyecto para que el mismo pueda ser visto sin problemas desde cualquier dispositivo de cualquier tamaño, y en el segundo capítulo hemos hablado sobre las imágenes responsive. Ahora vamos con la tercera entrega: veamos un elemento clave como lo son las tablas y cómo podemos crear tablas adaptables con Foundation Zurb.
Tablas Adaptables con Foundation Zurb
No dejes que las tablas rompan el diseño adaptable de tu aplicación. Con este simple combo de JS / CSS podrás adaptar los elementos de tablas en las más pequeñas pantallas de los dispositivos de tus clientes.
¿Por qué hacer nuestras tablas adaptables?
Cuando miramos las distintas implementaciones que encontramos en la web, vemos un montón de ideas interesantes, pero ninguna de ellas es una muy buena forma de aplicar las tablas adaptables. Así que con Foundation Zurb hemos ubicado la forma correcta manteniendo las siguientes premisas:
- No romper esquemas.
- No ocultar datos.
- Todavía nos permitirá comparar filas.
Cómo hacer la implementación de Tablas Adaptables
Si queremos que esta implementación sea increíblemente sencilla, solo debemos incluir un archivo CSS y un archivo JS extra a nuestro proyecto ya implementado con Foundation Zurb.
table th { font-weight: bold; }
table td, table th { padding: 9px 10px; text-align: left; }
/* Mobile */@media only screen and (max-width: 767px) {
table.responsive { margin-bottom: 0; }
.pinned { position: absolute; left: 0; top: 0; background: #fff; width: 35%; overflow: hidden; overflow-x: scroll; border-right: 1px solid #ccc; border-left: 1px solid #ccc; }
.pinned table { border-right: none; border-left: none; width: 100%; }
.pinned table th, .pinned table td { white-space: nowrap; }
.pinned td:last-child { border-bottom: 0; }
div.table-wrapper { position: relative; margin-bottom: 20px; overflow: hidden; border-right: 1px solid #ccc; }
div.table-wrapper div.scrollable table { margin-left: 35%; }
div.table-wrapper div.scrollable { overflow: scroll; overflow-y: hidden; }
table.responsive td, table.responsive th { position: relative; white-space: nowrap; overflow: hidden; }
table.responsive th:first-child, table.responsive td:first-child, table.responsive td:first-child, table.responsive.pinned td { display: none; }
}
$(document).ready(function(){var switched=false;var updateTables=function(){if(($(window).width()<767)&&!switched){switched=true;$("table.responsive").each(function(i,element){splitTable($(element));});return true;}
else if(switched&&($(window).width()>767)){switched=false;$("table.responsive").each(function(i,element){unsplitTable($(element));});}};$(window).load(updateTables);$(window).bind("resize",updateTables);function splitTable(original)
{original.wrap("<div class='table-wrapper' />");var copy=original.clone();copy.find("td:not(:first-child), th:not(:first-child)").css("display","none");copy.removeClass("responsive");original.closest(".table-wrapper").append(copy);copy.wrap("<div class='pinned' />");original.wrap("<div class='scrollable' />");}
function unsplitTable(original){original.closest(".table-wrapper").find(".pinned").remove();original.unwrap();original.unwrap();}}); Agregamos en nuestro HTML
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.css'> <link rel='stylesheet prefetch' href='http://zurb.com/playground/projects/responsive-tables/responsive-tables.css'> <script src='https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/vendor/jquery.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/foundation.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/vendor/modernizr.js'></script> <script src='http://zurb.com/playground/projects/responsive-tables/responsive-tables.js'></script>
Ejemplo completo de Implementación de Tablas Adaptables con Foundation
Al realizar esta implementación, de ahora en más las tablas de tus proyectos se modificarán en el dispositivo del cliente, adaptándose al tamaño de la pantalla para lograr una mejor experiencia de usuario. Esta técnica es compatible con iOS, Android y Windows Phone (así como Chrome, Safari y Firefox en escritorio). Aunque debemos mencionar que en el caso de Android 2.3, al no ser compatible con divs desplazables en la página, el desplazamiento no funcionará. Android 3.0 y posteriores no presentan este inconveniente.
Ahora que ya sabemos cómo adaptar tablas por medio de Foundation Zurb es hora de hacerle algunas mejoras a nuestros proyectos. Como hemos visto el proceso es sumamente sencillo y los resultados son muy buenos, así que no hay excusa para no utilizarla esta técnica. Déjanos un comentario y cuéntanos tu experiencia con Foundation Zurb.