Definición

Las tablas de datos se utilizan para organizar y mostrar datos de manera eficiente. El componente de tabla de datos permite la personalización con funcionalidad adicional, según lo necesiten los usuarios de su producto.

Las funciones de la tabla de datos son ideales para organizar y mostrar datos en una interfaz de usuario. Los encabezados de columna pueden clasificar 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.

La barra de herramientas de la tabla de datos proporciona una ubicación para los botones principales, la búsqueda, el filtrado, la configuración de visualización de la tabla y otras utilidades.

Cuándo usar

  • Para organizar y mostrar datos.

  • Si su usuario debe navegar a un dato específico para completar una tarea.

  • Visualización de todos los recursos de un usuario.

Cuando no usar

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

  • Como reemplazo de una aplicación de hoja de cálculo.

Espaciados

  • Las tablas se rigen por los espaciados referenciados en la Grilla

Colores

⬛ Link a los componentes de Figma

TABLA DE CONTENIDOS

Anatomía

Las tablas están compuestas por diferentes elementos como texto, etiquetas, filtros e íconos de acción. Éstos elementos se integran en distintos tipos de filas, por ejemplo los filtros se ubican en la fila de los filtros, las acciones se ubican en una fila diferente, y una vez seleccionados las filas que se quieren modificar las acciones se reemplazan por las posibles acciones masivas que podamos tener para esas filas. (Ver ejemplo a continuación)

Elementos

Tipos de tablas

Con acciones masivas y selección multiple de filas.

Al seleccionar uno o más filas, se muestran las acciones masivas disponibles para las filas seleccionadas en la cabecera de la tabla.

Con expandir filas

En el caso de ser necesario el checkbox para multi selección de filas, el dropdown debe ir a la derecha de la fila.

Posicionamiento

Cuando la tabla es el actor principal

Dentro de modales

Dentro de tabs: ver https://tutencl.atlassian.net/wiki/spaces/SDD/pages/183042126/Navegaci+n#Tabs-o-pesta%C3%B1as para más detalle del uso de Tabs.

Móvil

Tamaños

Además las tablas están construidas para adaptarse a dos tamaños, tamaño grande o large y tamaño pequeño o small. La variación se da en el tamaño de alto de la fila, cabecera, filtros que componen la tabla, ver ejemplos a continuación.

Large

Small

Interacciones

Buscar

Acciones

Dropdown más acciones

Filtrar

  • Cuando los filtros excedan el ancho de la tabla deberán quedar con un chip numérico. (**Screenshot ejemplo)

Ordenamiento: A/Z, Mayor a menor

Reordenar columnas

Multi selección filas

Componentes asociados

  • Cortina de filtros

  • Dropdown

  • Buscar

  • Tabs

Consideraciones

  • Cuando existen más de 3 acciones para una fila dejar dos iconos y el de tres puntitos.

  • Scroll horizontal ejemplos acciones fijas

INCEPTION: https://tutencl.atlassian.net/browse/COREFSM-1038

Consideraciones de accesibilidad

  1. Los encabezados de la tabla de datos deben describir con precisión los datos contenidos en las filas y columnas.

  2. Si la tabla de datos tiene etiquetas, debe ser clara y concisa.

  3. Si la tabla de datos tiene un título o una descripción, debe establecerse en el elemento de la tabla con un valor que haga referencia al elemento que contiene la descripción.

Todos los componentes han sido diseñados para trabajar armoniosamente juntos, como partes de un todo mayor. Es por esto que cada componente deber ser integrado y construido siguiendo nuestros lineamientos de usabilidad y guías de construcción. Toda esta información se encuentra en la página Lineamientos de construcción de nuestro sistema de diseño. Además se debe tener en consideración la accesibilidad en el uso de la tipografía y la accesibilidad del color.