Tabla de datos

Definición

Las tablas de datos presentan información estructurada de forma ordenada a través de filas y columnas. Son útiles para comunicar datos de forma resumida y facilitar la comparación entre ellos.

Anatomía

Las partes de la tabla son las siguientes:

1. Encabezado: La primera fila de la tabla recoge los títulos de cada una de las columnas y las interacciones disponibles (p.ej. ordenar la tabla por el contenido de la columna).
2. Interacción de ordenación (opcional): Funcionalidad que permite al usuario ordenar las filas de la tabla según el contenido de una columna concreta
3. Filas de datos: Conjunto de filas que contienen la información principal de la tabla

Tipos

Por defecto

Tabla con una ordenación

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.

Asegúrate de que la tabla es usable en versión móvil

Para ello, se recomienda:

• Limitar el número de columnas: Si puedes, incluye cuatro columnas o menos.
• Limitar la cantidad de texto: Evita que las celdas contengan textos extensos.
• Fijar los encabezados: Plantéate fijar en pantalla los encabezados (filas o columnas) para que no se pierdan al hacer scroll.
• Incluir scroll horizontal cuando sea necesario.

Permite ordenar las tablas por los campos que tenga sentido

Permite que la tabla sea ordenable por aquellos campos que tenga sentido, especialmente los numéricos y de fecha.

No dupliques los mecanismos de ordenación

Si la tabla se encuentra en una plantilla de listado, buscador avanzado o buscador facetado, no incluyas el selector "Ordenar por".
 

Componentes relacionados

Similar a

• Tarjeta (card)

Forma parte de:

• Buscador avanzado
• Buscador facetado
• Listado de resultados

Recursos asociados al componente

Implementación:

Storybook (solo accesible desde la RCJA)

Control de versiones