table

¿Busca la versión 7 de react-table ? ¡Haga clic aquí!

¿Disfrutas de esta biblioteca?

Prueba otras bibliotecas de Tanstack:

• Consulta de Tanstack
• Mesa de Tanstack
• Enrutador de Tanstack
• Tanstack virtual
• Formulario Tanstack
• Tanstack Ranger

¡Visite Tanstack.com/table para DOCS, Guides, API y más!

¡También puede conocer la mesa de TanStack por nuestros nombres de adaptadores!

• Mesa angular
• Mesa encendida
• Mesa QWIK
• Reaccionar
• Mesa sólida
• Mesa esbelta
• Mesa

Resumen

TanStack Table es una biblioteca de mesa sin cabeza , lo que significa que no se envía con componentes, marcado o estilos. Esto significa que tiene control total sobre el marcado y los estilos (CSS, CSS-in-JS, Bibliotecas de componentes de UI, etc.) y esto también es lo que le da su naturaleza portátil. ¡Incluso puedes usarlo en React Native!

Si desea una mesa liviana con control total sobre el marcado y la implementación , entonces debe considerar usar TanStack Table, una biblioteca de mesa sin cabeza .

Si desea una tabla basada en componentes listos para usar con más potencia pero más restricciones en torno al marcado/estilos/implementación , debe considerar usar Ag Grid, una biblioteca de tabla basada en componentes de nuestra red OSS Partner Ag.

TanStack Table y Ag Grid son respetuosamente las mejores bibliotecas de tabla/datagrid . En lugar de competir, estamos trabajando juntos para garantizar que las opciones de tabla/datagrida de la más alta calidad estén disponibles para todo el ecosistema JS/TS y cada caso de uso.

Características rápidas

• Núcleo agnóstico (JS/TS)
• Entradas de marco de primera clase para React, Vue, Solid
• ~ 15kb o menos (con sacudidas de árboles)
• 100% mecanografiado (pero no requerido)
• Sin cabeza (100% personalizable, traer tu propio ui)
• Auto fuera de la caja, estado controlable optando
• Filtros (columna y global)
• Clasificación (multi-columna, multidireccional)
• Agrupación y agregación
• Pivotando (¡próximamente!)
• Selección de hileras
• Expansión de la fila
• Visibilidad de columna/pedido/fijación/cambio de tamaño
• División de mesa
• Animable
• Virtualizable
• Soporte del modelo de datos del lado del servidor/externo

Migrar de la tabla react v7

Cambios notables

• Reescritura completa a TypeScript con tipos incluidos en el paquete base
• Eliminación del sistema de complementos para favorecer más inversión de control
• API ampliamente más grande y mejorada (y nuevas características como la fijación)
• Gestión estatal mejor controlada
• Mejor soporte para operaciones del lado del servidor
• Control completo (pero opcional) de la tubería de datos
• Núcleo agnóstico con adaptadores de marco para React, Solid, Svelte, Vue y potencialmente más en el futuro
• Nuevas herramientas de desarrollo

Migración

Hay una buena cantidad de cambios de ruptura (¡valen la pena, confíe en nosotros!):

• Resulta que ese mecanografiado hace que su código sea mucho mejor/más seguro, pero también generalmente requiere cambios en la arquitectura.
• El sistema de complementos se ha eliminado, por lo que los complementos deben reescribirse para envolver/componer la nueva API funcional. ¡Contáctenos si necesita ayuda!
• Las opciones de configuración de columna han cambiado, pero solo ligeramente.
• Las opciones de tabla son en su mayoría las mismas, con algunos cambios más grandes en torno a la gestión/control del estado opcional y el control de la tubería de datos
• La instancia table aunque similar en Spirit to V7, se ha reconfigurado para que sea mucho más rápido.

Instalación

Instale uno de los siguientes paquetes en función de su marco de elección:

 # Npm
npm install @tanstack/angular-table
npm install @tanstack/lit-table
npm install @tanstack/qwik-table
npm install @tanstack/react-table
npm install @tanstack/solid-table
npm install @tanstack/svelte-table
npm install @tanstack/vue-table
npm install @tanstack/table-core # vanilla js that can work with any framework 

¿Cómo ayudar?

• Prueba los ejemplos ya migrados
• Pruébelo en sus propios proyectos.
• Introspecta los tipos! Incluso sin los documentos terminados, la biblioteca se envía con 100% mecanografiado para ayudarlo a explorar sus capacidades.
• Lea las pautas de contribución
• ¡Escribe algunos documentos! Comience con los documentos de API e intente agregar información sobre una o más de las características. Los tipos hacen un trabajo decente al mostrar lo que es compatible y las capacidades de la biblioteca.
• ¿Usando un complemento? Intente reescribir su complemento (V8 ya no tiene un sistema de complementos) como un envoltorio funcional que usa TanStack Table internamente. La nueva API es mucho más poderosa y más fácil de componer. Si encuentra algo que no puede entender, háganoslo saber y lo agregaremos a la API.

Convertirse en patrocinador