Tablas de datos responsive

Uno de los problemas que tenemos actualmente en desarrollo web es cómo mostrar una gran cantidad de datos en pantalla cuando utilizamos un móvil o table. Si bien, en pantallas grandes no habría demasiado problema en mostrar muchas columnas de datos, cuando las pantallas son más pequeñas, aparece nuestro problema.

Hay varias aproximaciones para resolver este problema como, por ejemplo, el utilizado en Bootstrap. El problema de ésto es que añade un scroll horizontal al que ya tenemos vertical, y puede ser un poco confuso.

En este artículo vamos a ver otra forma de enfrentarnos al problema de las tablas de datos responsive basado en el ejemplo que aparece en CSS-Tricks y vamos a pasar de esto

a esto

Veamos el código utilizado.

HTML

En primer lugar, el marcado HTML no tiene mucho misterio ya que se trata de una table normal y corriente.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<table>
    <thead>
        <tr>
            <th>ID Cliente</th>
            <th>Nombre</th>
            <th>Apellidos</th>
            <th>Ciudad</th>
            <th>Teléfono</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>John</td>
            <td>Smith</td>
            <td>Springfield</td>
            <td>555 345 6523</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Susan</td>
            <td>Brown</td>
            <td>New York</td>
            <td>555 879 2394</td>
        </tr>
    </tbody>
</table>

CSS

El código CSS nos va a permitir transformar nuestras tablas de datos en tablas de datos responsive. Las tablas están apenas sin estilos decorativos para no entorpecer la explicación de lo que nos interesa, pero puedes añadir bordes, fondos y colores para hacerlas más atractivas.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

table {
    background-color: #fff;
}
th {
    background-color: #19548e;
    color: #fff;
}
@media (max-width: 768px) {
    /* Force table to not be like tables anymore */
    table, thead, tbody, tfoot, th, td, tr, caption { 
        display: block; 
    }
 
    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr { 
        position: absolute;
	top: -9999px;
	left: -9999px;
    }
 
    tr { border: 1px solid #ccc; }
 
    tbody td { 
	/* Behave  like a "row" */
	border: none;
	position: relative;
	padding-left: 50% !important; 
    }
 
    tbody td:before { 
	/* Now like a table header */
	position: absolute;
	/* Top/left values mimic padding */
	top: 6px;
	left: 6px;
	width: 45%; 
	padding-right: 10px; 
	white-space: nowrap;
    }
 
    /*
    Label the data
    */
    tbody td:before { content: attr(data-heading); }
}

En la línea 8 tenemos un mediaquery que nos indica hasta cuando consideramos una pantalla pequeña y queremos hacer la transformación. He elegido 768px porque es la dimensión que viene por defecto en Bootstrap y que puede aplicarse en la mayoría de dispositivos móviles, pero puedes ajustarlo a tus requerimientos.

Bien, pues lo primero es forzar a que todos los componentes de la tabla ya no se comporten como una tabla en las líneas 10-12.

La cabecera de la tabla podemos ocultarla tal como se indica en las líneas 15-19.

En las líneas 23-28 ajustamos las etiquetas TDs para que se comporten como una fila. El padding de la línea 27 es para mostrar los datos como si fuera una tabla de dos columnas: la primera con el nombre del dato y la segunda con su valor.

Las líneas 30-39 se corresponde con esta primera «columna», la del nombre del dato que vamos a colocar en cada línea. Y por último, la línea 44 recupera el nombre del dato que tenemos guardado en el atributo data-heading de cada etiqueta TD de la tabla y lo muestra por pantalla.

JavaScript

Con lo anterior ya tendríamos resuelto el problema que estamos viendo. Pero al final nos hemos encontrado que tenemos que añadir a cada etiqueta TD un atributo data-heading con el nombre de la columna que estamos mostrando. Algo que va a añadir bastante código a nuestro HTML y que vamos a tener que repetir muchas veces dependiendo del tamaño de nuestra tabla.

Podemos resolver ésto añadiendo una pequeña función javascript que recoja los valores que tenemos en nuestra cabecera en las etiquetas TH y que añada automáticamente los atributos data-heading a todas las etiquetas TD con su valor correspondiente.

$('table').each(function() {
    var thetable = $(this);
    $(this).find('tbody td').each(function() {
        $(this).attr('data-heading', thetable.find('thead th:nth-child('+($(this).index()+1)+')').text());
    });
});

Con este último paso tenemos creada nuestra tabla de datos responsive. ¿Qué te parece? ¿Te gusta la idea?