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

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.

Cuando la tabla es el actor principal

Dentro de modales

Dentro de tabs

Móvil

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

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

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.