Tabla

Las tablas se utilizan para organizar y mostrar datos de manera eficiente, permitiendo a los usuarios escanear, ordenar, comparar y tomar medidas sobre ellos.

Vista Previa

Figma

Usos

Las funciones de la tabla de datos son ideales para organizar y mostrar datos en una interfaz de usuario. Los encabezados de las columnas pueden ordenar los datos en orden ascendente o descendente, las filas se pueden expandir para revelar información progresivamente y se pueden realizar acciones individuales o por lotes en las filas.

Cuándo usar

Para organizar y mostrar datos.

Si su usuario debe navegar a un dato específico entre muchos datos.

Cuándo no usar

Cuando se requiere una visualización más compleja de los datos o interacciones.

Comportamiento

Tipos

Default

Multiselect

Accordion

Radiobutton

With sections

Tamaño

Default

Compact

Estados

Visualización de la tabla tipo multiselect por defecto

Multiselect-Default

Multiselect-Selection

Visualización de la tabla tipo accordion por defecto

Accordion-Default

Accordion-Selection

Visualización de la tabla tipo radiobutton por defecto

Radiobutton-Default

Radiobutton- Selection

Responsive

En su versión móvil, el comportamiento es el siguiente: solo se muestra la primera celda con el label y el contenido, a esta celda le acompaña el chevron para poder desplegar el resto del contenido de la fila. Las filas podrán contener los datos de una columna o dos dependiendo de la configuración del componente.

Visualización del comportamiento de la tabla en pantallas tamaño móvil - ejemplo 1

Mobile collapse - 1 data

Visualización del comportamiento de la tabla en pantallas tamaño móvil - ejemplo 2

Mobile expand - 1 data

Visualización del comportamiento de la tabla en pantallas tamaño móvil - ejemplo 3

Mobile collapse - 2 data

"Visualización del comportamiento de la tabla en pantallas tamaño móvil - ejemplo 4

Mobile expand - 2 data

Accesibilidad

Este componente ha sido validado para cumplir con los requisitos de accesibilidad la UNE-EN 301549:2022 en la que se engloban los criterios de la WCAG 2.1 (AA), sin embargo, los cambios del contenido y estilos pueden afectar al cumplimiento de la accesibilidad. Debemos de asegurarnos de revisar y seguir las directrices de esta sección cuando actualice o añada nuevo contenido o estilo a este componente.

La tabla se construye con el etiquetado nativo: table, thead, tbody, tr, th y td.

Los encabezados de tabla no deben estar vacíos.