Tabla de datos

Definición

Las tablas de datos son útiles en aquellos casos en los que debamos ofrecer al usuario un conjunto de información estructurada en filas y columnas. Por tanto, es un componente que puede incorporarse entre otras, a páginas de detalle de contenido, buscadores (avanzados o facetados) y listados. 

Composición

Las tablas de datos se componen de:

• Identificación de la tabla (opcional): Permite al usuario comprender rápidamente el contenido de la tabla. 
• Tabla de datos: La tabla de datos incluirá en la primera fila los títulos de las columnas con las interacciones disponibles si existiesen, como por ejemplo las opciones de ordenación del contenido de la tabla. Bajo la fila de encabezado se presentarán las filas de datos. 
  • Estilo de fila: Se incluye un estilo de fila diferenciado en pares e impares que ayuda a los usuarios a escanear datos y mantener su lugar. 
  • Alineación del contenido: Es recomendable que las columnas de texto se encuentren alineadas a la izquierda, columnas de número alineadas en el centro. Los encabezados se alinearán de acuerdo con el contenido de las mismas.

Pautas de uso

Versión móvil

Las tablas de datos plantean un reto en dispositivos con pantallas reducidas, como los teléfonos móviles. Para que el contenido que incluya tablas se visualice correctamente, se deben de seguir como mínimo las siguientes buenas prácticas:

• Limitar el número de columnas: Para facilitar la presentación en dispositivos móviles, se recomienda incluir cuatro columnas o menos.
• Limitar la cantidad de texto: En la medida de lo posible, mantener las celdas breves y evitar que contengan textos extensos.
• Fijar los encabezados: En función de la tabla, se pueden fijar en la pantalla los encabezados (ya sean filas o columnas) para facilitar la interpretación de los datos.
• Incluir scroll horizontal cuando sea necesario: La posibilidad de hacer scroll debe hacerse evidente mediante bleeding (contenido parcial) en las direcciones en las que pueda hacerse scroll.

Por defecto - Ejemplo oficinas en materia de registro del portal principal

Ordenación de tablas

Se permite aplicar la funcionalidad de ordenación de las columnas en orden ascendente o descendente si los datos lo requieren. Los controles de ordenación se encuentran en los encabezados de columna. El encabezado de la columna hará visible que dispone de la funcionalidad de ordenación mostrando el icono doble atenuado de flecha. 

Una tabla de datos ordenados tiene tres estados: sin ordenar, ordenado ascendente y ordenado descendente. 

• Sin ordenar. El icono doble atenuado indica la posibilidad de ordenación de los datos de la columna. Se muestra en aquellos encabezados de columna en los que es posible realizar la ordenación.
• Ordenado ascendente. Al pinchar sobre el encabezado de la columna, se realizará la ordenación de menor a mayor o de A – Z, según el tipo de dato. El icono se corresponde en este estado con una flecha hacia abajo y tanto el icono como el título de la columna se muestran con el color principal.
• Ordenado descendente. Al pinchar nuevamente sobre el encabezado de la columna, se realizará la ordenación inversa, de mayor a menor o de Z - A, según el tipo de dato. El icono se corresponde en este estado con una flecha hacia arriba, e igualmente, tanto el icono como el título de la columna se muestran con el color principal.

Aplicar la ordenación en los encabezados de columna de las tablas es incompatible con la función de ordenación (Selector "Ordenar por") en listados, buscadores avanzados y facetados. Por tanto, si por las necesidades de la tabla, se incluyen las opciones de ordenación en los encabezados, no se incluirá el selector de "Ordenar por" y viceversa, si se incluye el elemento "Ordenar por" sobre el listado de resultados, no se podrán incluir las opciones de ordenación en los encabezados de columna de las tablas.

Cabecera en estado Hover

Cabecera con ordenación descendente

Especificaciones de diseño