Skip to main content

Introducción

TanStack Table es una librería de Headless UI para construir potentes tablas y cuadrículas de datos para TS/JS, React, Vue, Solid, Qwik y Svelte.

¿Qué es la UI "headless"?​

Headless UI es un término para librerías y utilidades que proporcionan la lógica, el estado, el procesamiento y la API para elementos e interacciones de la UI, pero no proporcionan marcado, estilos o implementaciones preconstruidas. ¿Te estás rascando la cabeza todavía? 😉 Headless UI tiene algunos objetivos principales:

Las partes más difíciles de construir UIs complejas suelen girar en torno al estado, los eventos, los efectos secundarios, la computación/gestión de datos. Al eliminar estas preocupaciones del marcado, los estilos y los detalles de implementación, nuestra lógica y componentes pueden ser más modulares y reutilizables.

Construir una UI es una experiencia muy personalizada y de marca, incluso si eso significa elegir un sistema de diseño o adherirse a una especificación de diseño. Para soportar esta experiencia personalizada, las librerías de UI basadas en componentes necesitan soportar una superficie de API masiva (y aparentemente interminable) en torno a la personalización de marcado y estilo. Las librerías de Headless UI desacoplan tu lógica de tu UI.

Cuando usas una librería de Headless UI, la compleja tarea de procesamiento de datos, gestión de estado y lógica de negocio se maneja por ti, dejándote libre para preocuparte por decisiones de mayor cardinalidad que difieren entre implementaciones y casos de uso.

¿Quieres profundizar más? Lee más sobre Headless UI.

Librerías basadas en componentes vs Librerías headless​

En el ecosistema de librerías de tablas/cuadrículas de datos, hay dos categorías principales:

  • Librerías de tablas basadas en componentes
  • Librerías de tablas headless

¿Qué tipo de librería de tablas debería usar?​

Cada enfoque tiene sutiles compensaciones. Comprender estas sutilezas te ayudará a tomar la decisión correcta para tu aplicación y equipo.

Librerías de tablas basadas en componentes​

Las librerías de tablas basadas en componentes suelen proporcionarte una solución lista para usar y rica en funciones, y componentes/marcado listos para usar completos con estilos/temas. AG Grid es un gran ejemplo de este tipo de librería de tablas.

Ventajas:

  • Vienen con marcado/estilos listos para usar
  • Poca configuración requerida
  • Experiencia "llave en mano"

Desventajas:

  • Menos control sobre el marcado
  • Los estilos personalizados suelen basarse en temas
  • Tamaños de paquete más grandes
  • Altamente acopladas a adaptadores de frameworks y plataformas

Si quieres una tabla lista para usar y el diseño/tamaño del paquete no son requisitos estrictos, entonces deberías considerar usar una librería de tablas basada en componentes.

Hay muchas librerías de tablas basadas en componentes, pero creemos que AG Grid es el estándar de oro y, con diferencia, nuestra librería de cuadrículas favorita (no se lo digas a las demás 🤫).

Librerías de tablas Headless​

Las librerías de tablas headless suelen proporcionarte funciones, estado, utilidades y escuchadores de eventos para construir tu propio marcado de tabla o adjuntarlo a marcados de tabla existentes.

Ventajas:

  • Control total sobre el marcado y los estilos
  • Soporta todos los patrones de estilo (CSS, CSS-in-JS, UI libraries, etc.)
  • Tamaños de paquete más pequeños
  • Portable. ¡Funciona dondequiera que funcione JS!

Desventajas:

  • Más configuración requerida
  • No se proporciona marcado, estilos o temas

Si quieres una tabla más ligera o control total sobre el diseño, entonces deberías considerar usar una librería de tablas headless.

Hay muy pocas librerías de tablas headless y, obviamente, ¡TanStack Table es nuestra favorita!