table

Vous cherchez la version 7 de react-table ? Cliquez ici!

Profitez de cette bibliothèque?

Essayez d'autres bibliothèques Tanstack:

• Requête en tan
• Table de tanasse
• Routeur de Tanstack
• Tanstack Virtual
• Formulaire de tanasse
• Tanstack Ranger

Visitez tanstack.com/Table pour les documents, les guides, l'API et plus encore!

Vous connaissez peut-être également Tanstack Table par nos noms d'adaptateur!

• Table angulaire
• Table allumée
• Table Qwik
• Table de réaction
• Table solide
• Table svelte
• Table Vue

Résumé

Tanstack Table est une bibliothèque de table sans tête , ce qui signifie qu'elle n'en est pas expédiée avec des composants, un balisage ou des styles. Cela signifie que vous avez un contrôle total sur le balisage et les styles (CSS, CSS-in-JS, bibliothèques de composants d'interface utilisateur, etc.) et c'est aussi ce qui lui donne sa nature portable. Vous pouvez même l'utiliser dans React Native!

Si vous voulez une table légère avec un contrôle total sur le balisage et la mise en œuvre , vous devriez envisager d'utiliser Tanstack Table, une bibliothèque de table sans tête .

Si vous souhaitez une table basée sur des composants prêts à l'emploi avec plus de puissance mais plus de contraintes autour du balisage / styles / implémentation , vous devriez envisager d'utiliser AG Grid, une bibliothèque de table basée sur des composants de notre Grid AG partenaire OSS.

La table Tanstack et la grille AG sont respectueusement les meilleures bibliothèques de table / datagrid autour . Au lieu de concurrencer, nous travaillons ensemble pour garantir que les options de table / datagrid de la plus haute qualité sont disponibles pour l'ensemble de l'écosystème JS / TS et chaque cas d'utilisation.

Caractéristiques rapides

• Noyau agnostique (JS / TS)
• Claidages à cadre de 1ère classe pour React, Vue, solide
• ~ 15 Ko ou moins (avec des arbres)
• 100% dactylographié (mais pas requis)
• Sans tête (100% personnalisable, apportez-vous-Oown-UI)
• Auto hors de la boîte, État contrôlable opt-in
• Filtres (colonne et globale)
• Tri (multi-colonnes, multidirectionnelle)
• Regroupement et agrégation
• Pivot (à venir bientôt!)
• Sélection de lignes
• Extension des lignes
• Visibilité de colonne / commande / épinglage / redimensionnement
• Division de table
• Animé
• Virtualisable
• Prise en charge du modèle de données côté serveur / externe

Migration de la table réactive V7

Changements notables

• Réécriture complète de TypeScript avec des types inclus dans le package de base
• Suppression du système de plugin pour favoriser plus d'inversion de contrôle
• API largement plus grande et améliorée (et de nouvelles fonctionnalités comme Pinning)
• Meilleure gestion de l'État contrôlé
• Meilleure prise en charge des opérations côté serveur
• Contrôle complet (mais facultatif) du pipeline de données
• Noyau agnostique avec adaptateurs-framework pour React, Solid, Svelte, Vue et potentiellement plus à l'avenir
• Nouveaux outils de développement

Migration

Il y a pas mal de changements de rupture (ils en valent la peine, faites-nous confiance!):

• Il s'avère que TypeScript rend votre code beaucoup meilleur / plus sûr, mais nécessite également généralement des modifications de la rupture de l'architecture.
• Le système de plugin a été supprimé, les plugins doivent donc être réécrits pour envelopper / composer la nouvelle API fonctionnelle. Contactez-nous si vous avez besoin d'aide!
• Les options de configuration de la colonne ont changé, mais seulement légèrement.
• Les options de table sont pour la plupart les mêmes, avec des changements plus importants autour de la gestion / contrôle d'état facultatif et du contrôle du pipeline de données
• L'instance table bien que similaire en esprit à V7 a été reconfigurée pour être beaucoup plus rapide.

Installation

Installez l'un des packages suivants en fonction de votre cadre de choix:

 # 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 

Comment aider?

• Essayez les exemples déjà migrarés
• Essayez-le dans vos propres projets.
• Introspectez les types! Même sans les documents terminés, la bibliothèque est expédiée avec 100% dactylographiée pour vous aider à explorer ses capacités.
• Lire les directives de contribution
• Écrivez des documents! Commencez par les documents API et essayez d'ajouter des informations sur une ou plusieurs fonctionnalités. Les types font un travail décent pour montrer ce qui est pris en charge et les capacités de la bibliothèque.
• Utilisation d'un plugin? Essayez de réécrire votre plugin (V8 n'a plus de système de plugin) comme wrapper fonctionnel qui utilise la table Tanstack en interne. La nouvelle API est beaucoup plus puissante et plus facile à composer. Si vous trouvez quelque chose que vous ne pouvez pas comprendre, faites-le nous savoir et nous l'ajouterons à l'API.

Devenir sponsor