coastdigitalgroup/coastai-skills

Sistema de UI para Tablas de Datos

Propósito

El skill del Sistema de UI para Tablas de Datos proporciona una metodología para organizar y presentar datos estructurados con múltiples atributos. Garantiza que los conjuntos de datos grandes sean fáciles de escanear, comparar y sobre los cuales se pueda actuar, estableciendo reglas claras para alineación, espaciado, jerarquía y elementos interactivos dentro de un formato tabular.

Casos de Uso

• Diseñar paneles de control SaaS para inventario, gestión de usuarios o facturación.
• Crear matrices de comparación de productos para sitios de comercio electrónico o marketing.
• Implementar visores de registros o pistas de auditoría para aplicaciones técnicas.
• Organizar datos financieros o métricas de rendimiento en una vista estructurada.
• Establecer un estándar de biblioteca de componentes para "Tablas de Datos" o "Cuadrículas de Datos".

Cuándo NO Usarlo

• Pares Clave/Valor Simples: Si solo tienes dos columnas (p. ej., Etiqueta: Valor), usa una Lista de Descripción (<dl>) o una lista simple.
• Contenido Narrativo: El texto extenso o las historias deben usar tipografía estándar y estructuras de sección, no tablas.
• Cuadrículas de Diseño: Usa sistema-de-cuadrícula-responsive para el diseño de página; las tablas son estrictamente para datos.
• Tarjetas de Pocos Datos: Si los datos son altamente visuales y tienen pocos atributos, usa sistema-de-ui-de-tarjetas para una mejor interacción.

Entradas

1. Esquema de Datos: Los tipos de datos a mostrar (cadenas, números, fechas, booleanos, acciones).
2. Prioridad de Columnas: Qué atributos son esenciales para la identificación vs. detalles secundarios.
3. Tareas del Usuario: ¿El usuario necesita encontrar una fila específica, comparar valores entre filas o realizar acciones masivas?
4. Expectativas de Volumen: ¿Cuántas filas y columnas se esperan en una vista típica?

Salidas

1. Especificación de Anatomía de la Tabla: Regiones definidas (Encabezado, Fila, Celda, Pie de Página) y su espaciado interno.
2. Matriz de Alineación: Reglas para la alineación horizontal según el tipo de dato.
3. Variantes de Densidad: Definiciones para alturas de fila Compacta, Estándar y Relajada.
4. Mapa de Interacción: Comportamiento para ordenación, filtrado, selección de filas y acciones en línea.

Flujo de Trabajo

1. Definir Tipos de Columnas y Alineación

Aplica la "Regla Práctica de Alineación" para garantizar la escaneabilidad:

• Texto/Valor por Defecto: Alineado a la izquierda (ayuda al ojo a seguir el inicio de la palabra).
• Números/Métricas: Alineados a la derecha (alinea los puntos decimales y permite una comparación rápida de magnitudes).
• Fechas/Etiquetas de Estado: Centrados o alineados a la izquierda (dependiendo del ancho de la columna).
• Acciones: Alineadas a la derecha (generalmente la columna final).

2. Establecer Jerarquía Visual (El Encabezado)

El encabezado de la tabla debe distinguirse claramente de los datos:

• Estilo: Usa un color de fondo diferente, peso de fuente negrita o un tratamiento en mayúsculas para los elementos <th>.
• Persistencia: Para tablas largas, usa un encabezado fijo para que los usuarios no pierdan el contexto al desplazarse.

3. Configurar Densidad y Ritmo de Fila

Elige un nivel de densidad según el caso de uso:

• Compacta: Alta densidad de datos (p. ej., altura de 32px). Ideal para usuarios avanzados y paneles de control.
• Estándar: Equilibrada (p. ej., altura de 48px). Ideal para uso general.
• Relajada: Baja densidad (p. ej., altura de 64px). Ideal para marketing o listas simples. Usa rayado de cebra o bordes sutiles para separar filas y reducir el "salto de línea".

4. Diseñar para Datos Interactivos

Define cómo los usuarios manipulan los datos:

• Ordenación: Agrega indicadores (galones) a los encabezados que admitan ordenación.
• Estados de Fila: Define estados de Hover, Seleccionado y Enfocado para las filas.
• Acciones Masivas: Si es necesario, agrega una columna de casilla de verificación en el extremo izquierdo.

5. Planificar para Variación de Contenido

Maneja casos extremos en la longitud de los datos:

• Truncamiento: Usa puntos suspensivos para texto largo que no sea crítico para la identificación.
• Ajuste: Permite el ajuste de línea para texto descriptivo importante.
• Anchos Fijos: Asigna anchos fijos a columnas estables (p. ej., Estado, Fecha) y anchos fluidos a identificadores primarios (p. ej., Nombre).

Reglas de Decisión

• La Regla de Escaneabilidad: La primera columna debe ser siempre el identificador más importante (p. ej., Nombre, ID) para servir como ancla de la fila.
• Alineación de Números: Si la tarea principal es comparar valores, usa fuentes monoespaciadas para los números a fin de mantener los dígitos perfectamente alineados.
• Rayado de Cebra vs. Bordes: Usa rayado de cebra para tablas muy anchas para ayudar al ojo a seguir horizontalmente; usa bordes para tablas más cortas y simples.
• Ubicación de Acciones: Agrupa las acciones en la columna final o usa un menú "Más" visible para mantener la interfaz limpia.
• Celdas Vacías: Nunca dejes una celda en blanco. Usa un guión (—) o "N/A" para confirmar que los datos faltan, no que es solo un error de carga.

Restricciones

• Accesibilidad: Debe usar etiquetas <table> semánticas. Los encabezados deben tener scope="col". Se deben usar subtítulos para contexto. Los encabezados fijos no deben ocultar el indicador de enfoque de las celdas o las acciones de fila desplazadas debajo de ellos (WCAG 2.2 SC 2.4.11). Los botones/enlaces de acción en línea deben cumplir con el tamaño mínimo objetivo de 24x24px (SC 2.5.8).
• Responsividad: Las tablas deben seguir los patrones de tablas-de-datos-responsivas (Desplazamiento, Apilamiento o Alternancia) cuando los viewports se reduzcan.
• Contraste: El texto del encabezado y los indicadores de estado deben cumplir con WCAG AA (4.5:1).

Patrones Comunes de Falla

• Números Desalineados: Alinear los números a la izquierda hace imposible comparar magnitudes de un vistazo.
• "La Pared de Texto": Usar filas de alta densidad sin rayado de cebra o una distinción clara del encabezado, causando "fatiga visual".
• Encabezados Invisibles: Encabezados que se parecen demasiado a los datos, dificultando saber qué representan las columnas.
• Falta de Acción Visible: Botones o enlaces dentro de las celdas que son demasiado pequeños para tocar o no parecen interactivos.
• Sin Estado Vacío: Mostrar una tabla en blanco sin un mensaje "No se encontraron resultados".

Criterios de Validación

• La alineación de columnas sigue las reglas de tipo de dato (Texto=Izquierda, Números=Derecha).
• Los encabezados de tabla son visualmente distintos de los datos de las filas.
• El identificador primario está anclado en la primera columna.
• Se usa HTML semántico (<table>, <th>, scope) para la estructura.
• Las celdas vacías usan un marcador de posición (p. ej., —) en lugar de estar en blanco.
• Los estados interactivos (Hover/Seleccionar) están claramente definidos.
• El diseño maneja contenido largo de manera elegante (truncamiento o ajuste).
• Los encabezados fijos nunca ocultan indicadores de enfoque en filas o acciones de celda (WCAG 2.2 SC 2.4.11).
• Las acciones de fila cumplen con el tamaño mínimo objetivo de 24x24px (WCAG 2.2 SC 2.5.8).