Data Grids y Tablas Avanzadas · Product Craft Bible

1062

Multi-Column Sort con Indicadores Accesibles

El ordenamiento multi-columna permite análisis dimensional que el sort simple imposibilita. Cada columna activa debe comunicar su prioridad y dirección sin depender solo del color: un número de prioridad junto al indicador de flecha (↑1, ↓2) elimina la ambigüedad. Un sort implícito no documentado destruye la confianza del usuario en los datos que ve.

AG Grid Multi-Column Sorting · Tanstack Table getSortedRowModel · NNGroup "Designing Tables" (2019)

Preferir

ID	Empresa ↑ 1	Ingresos ↓ 2	Región
#001	Acme Corp	$980,000	Norte
#007	Acme Corp	$420,000	Sur
#003	Beta Labs	$1,200,000	Centro
#009	Beta Labs	$310,000	Norte

Shift+clic en un header para agregar columna al orden · Doble clic para limpiar

Evitar

ID	Empresa ↑	Ingresos	Región
#001	Acme Corp	$980,000	Norte
#007	Acme Corp	$420,000	Sur
#003	Beta Labs	$1,200,000	Centro
#009	Beta Labs	$310,000	Norte

Sort single-column sin indicador de prioridad ni estado en toolbar

1063

Filtrado Inline: Header Filters vs Panel Lateral

Los filtros en header optimizan flujos de inspección rápida en tablas densas; los paneles laterales sirven para condiciones complejas o múltiples dimensiones. Mezclar ambos sin jerarquía clara produce disonancia cognitiva y filtros "perdidos" que el usuario olvida haber aplicado. Los filter chips persistentes bajo el toolbar son el puente entre ambas modalidades.

Airtable filter UX · Notion Database filters · AG Grid Column Filters · NNGroup "Filters in Tables"

Preferir

Estado: Activo × Región: Norte ×

Empresa	Estado	Ingresos
Acme Corp	Activo	$980,000
Beta Labs	Activo	$1,200,000
Gamma Inc	Activo	$540,000

Evitar

Sin chips · los filtros aplicados están ocultos en el panel

Empresa	Estado	Ingresos
Acme Corp	Activo	$980,000
Beta Labs	Activo	$1,200,000
Gamma Inc	Activo	$540,000

1064

Row Selection: Checkbox, Select-All e Indeterminate

La selección de filas es una acción con consecuencias; cada estado debe ser inequívoco. El estado indeterminate del checkbox "seleccionar todo" es la señal más crítica: indica al usuario que tiene poder parcial. Implementar indeterminate vía JS (checkbox.indeterminate = true) con aria-checked="mixed" es obligatorio; simularlo con CSS falla en lectores de pantalla.

AG Grid Row Selection docs · Tanstack Table useRowSelection · WCAG 2.1 SC 4.1.2

Preferir

Empresa	Estado	Ingresos
Acme Corp	Activo	$980,000
Beta Labs	Inactivo	$1,200,000
Gamma Inc	Activo	$540,000
Delta Co	Activo	$310,000

Evitar

Empresa	Estado	Ingresos
Acme Corp	Activo	$980,000
Beta Labs	Inactivo	$1,200,000
Gamma Inc	Activo	$540,000
Delta Co	Activo	$310,000

1065

Bulk Actions: Toolbar Contextual y Undo

Las bulk actions son operaciones de alto impacto; su toolbar debe aparecer contextualmente reemplazando al normal cuando se activa la primera selección, no apilarse sobre él. Las acciones destructivas necesitan un camino de reversión: un toast con timer de 5-8 segundos (soft delete optimista) es preferible al modal de confirmación para acciones técnicamente reversibles.

Airtable bulk delete · Google Sheets Undo · NNGroup "Preventing User Errors" · Material Design 3 Snackbar

Preferir

Empresa	Estado	Ingresos
Acme Corp	Activo	$980,000
Beta Labs	Inactivo	$1,200,000
Gamma Inc	Activo	$540,000
Delta Co	Activo	$310,000

5 registros eliminados 5s

Evitar

Empresa	Estado	Ingresos
Acme Corp	Activo	$980,000
Beta Labs	Inactivo	$1,200,000
Gamma Inc	Activo	$540,000
Delta Co	Activo	$310,000

"Eliminar" permanece visible aunque no hay selección.
Sin undo, sin confirmación, dos clics = pérdida masiva de datos.

1066

Inline Editing: Click-to-Edit y Validación Proximal

La edición inline colapsa el flujo editar→guardar en una sola superficie, pero exige que el estado de cada celda (vista, editando, guardando, error) sea perfectamente legible. La validación debe estar proximal a la celda, no en un toast global: cuando falla el guardado, el usuario ya puede haber scrolleado y no saber qué corregir.

AG Grid Cell Editing · Tanstack Table meta.updateData · Airtable single-click edit · NNGroup "Inline Editing in Tables" (2022)

Preferir

Empresa	Contacto	Ingresos
Acme Corp		$980,000
Beta Labs	Email inválido	$1,200,000
Gamma Inc		$540,000

Evitar

Empresa	Contacto	Ingresos
Acme Corp		$980,000
Beta Labs	info@beta.mx	$1,200,000

Error al guardar. Revisa los campos del formulario.

1067

Column Management: Resize, Reorder y Persistencia

Los usuarios expertos personalizan sus tablas para adaptarlas a su flujo mental; esta personalización tiene que sobrevivir recargas. Serializar {columnOrder, columnVisibility, columnSizing} en localStorage['grid-config-{tableId}'] es el mínimo viable. Perder la configuración de columnas al refrescar es perder el trabajo cognitivo del usuario.

AG Grid Column State API · Tanstack Table Column Ordering + Visibility + Sizing · Airtable field management · Notion database properties

Preferir

Gestionar columnas

Empresa Estado Región Ingresos

Empresa	Estado	Ingresos
Acme Corp	Activo	$980,000
Beta Labs	Inactivo	$1,200,000

Evitar

La config de columnas se pierde al recargar. Sin handle de resize ni drag. Columna oculta en sesión anterior vuelve a aparecer. Sin versión de schema: al agregar "Margen" nueva, la config guardada rompe silenciosamente.

Empresa	Estado	Región	Ingresos
Acme Corp	Activo	Norte	$980,000
Beta Labs	Inactivo	Sur	$1,200,000

1068

Virtual Scrolling: Cuándo y Cómo Virtualizar

Renderizar miles de filas en el DOM destruye el rendimiento del navegador; la virtualización mantiene solo las filas visibles más un buffer. Pero virtualizar tablas pequeñas agrega complejidad sin beneficio y puede romper funcionalidades nativas como Ctrl+F, impresión y navegación accesible con Tab. El umbral recomendado es 500 filas simultáneas.

Tanstack Virtual benchmarks (10k filas: 2.8s TTI virtualizado vs 180ms) · AG Grid Row Virtualisation · WCAG aria-rowcount/aria-rowindex (H63)

Preferir

10,000 filas virtualizado Usar

TTI180ms

Nodos DOM~30

Mem. JS12MB

Filas en DOM (de 10,000)

aria-rowcount="10000"
aria-rowindex="1..30"

80 filas sin virtualizar Usar

TTI45ms

Ctrl+FFunciona

PrintFunciona

Todas las filas en DOM. Ctrl+F nativo, print y a11y Tab funcionan sin intervención.

Rows	Virtualizar	Motivo
< 200	No	Render completo, sin overhead
200–500	Opcional	Medir TTI antes de decidir
> 500	Sí	Virtualizar + aria-rowcount/index

Evitar

80 filas virtualizado "por si acaso" Evitar

TTI180ms

Ctrl+FNo funciona

PrintFilas faltantes

a11y TabFilas no accesibles

Complejidad de virtualización sin ningún beneficio de rendimiento. El usuario no nota mejora y pierde Ctrl+F nativo.

10,000 filas sin virtualizar Evitar

TTI2,800ms

Nodos DOM10,000+

Mem. JS340MB

1069

Frozen Columns y Sticky Headers con Scroll Horizontal

En tablas con muchas columnas, perder el contexto de identidad de fila al hacer scroll horizontal es desorientador; la columna ID congelada actúa como ancla cognitiva. La sombra de separación es la señal visual crítica: sin ella el usuario cree que la tabla terminó. El header sticky y la celda de intersección (top-left) requieren z-index preciso para no producir artefactos visuales.

AG Grid Column Pinning · Tanstack Table columnPinning · Airtable frozen fields design system · MDN CSS position:sticky · Google Sheets frozen columns UX

Preferir

Empresa	Región	Estado	Ingresos Q1	Ingresos Q2	Ingresos Q3	Meta anual
Acme Corp	Norte	Activo	$245,000	$310,000	$425,000	$1,500,000
Beta Labs	Sur	Activo	$380,000	$420,000	$400,000	$1,800,000
Gamma Inc	Centro	Inactivo	$120,000	$95,000	$140,000	$800,000
Delta Co	Norte	Activo	$510,000	$480,000	$560,000	$2,000,000

Scroll horizontal · columna "Empresa" permanece visible · sombra indica contenido detrás

Evitar

Empresa	Región	Estado	Ingresos Q1	Ingresos Q2	Ingresos Q3	Meta anual
Acme Corp	Norte	Activo	$245,000	$310,000	$425,000	$1,500,000
Beta Labs	Sur	Activo	$380,000	$420,000	$400,000	$1,800,000
Gamma Inc	Centro	Inactivo	$120,000	$95,000	$140,000	$800,000
Delta Co	Norte	Activo	$510,000	$480,000	$560,000	$2,000,000

Sin columna congelada: al hacer scroll, el usuario pierde el nombre de la fila y no sabe a que empresa corresponden los datos. Sin sombra: parece que la tabla "termino".