React TreeGrid - Composant d’arborescence puissant
- Charger de grandes quantités de données en chargeant dynamiquement les éléments enfants à la demande.
- Inclure des interactions UI flexibles : étendre/réduire les enregistrements parents, éditer des dialogues, etc.
- Apparence attrayante avec des thèmes intégrés tels que Fabric, Bootstrap, Material, etc.
Quick Overview Video
Trusted by the world’s leading companies
Aperçu
Le React TreeGrid est un contrôle riche en fonctionnalités utilisé pour visualiser efficacement des données auto-référentielles et hiérarchiques sous forme tabulaire (structure arborescente). Son large éventail de fonctions inclut : liaison de données, virtualisation, édition, tri, recherche, filtrage, défilement infini, pagination, lignes et colonnes figées, export vers plusieurs formats, agrégation de lignes, et bien plus.
Interagir avec le React TreeGrid en direct
S’exécute dans le navigateur. Aucune installation requise.
Pourquoi choisir Syncfusion React Tree Grid ?
Haute performance
Affichez les données de manière hiérarchique : sa conception optimisée offre de hautes performances et permet de charger des millions d’enregistrements en quelques secondes.
Liaison de données fluide
Liez les données de manière fluide avec diverses sources locales et distantes (JSON, OData, WCF, services RESTful) grâce au DataManager.
Grille hiérarchique auto-référentielle
React TreeGrid est conçu pour visualiser des données auto-référentielles et hiérarchiques au format tabulaire, affichant ainsi les relations entre enregistrements parents et enfants.
Édition flexible
React TreeGrid permet les opérations CRUD (create, read, update, delete) sur des données observables. Il peut éditer des tableaux JSON ou des services de données distants via le DataManager.
S’adapte à toutes les résolutions
Le TreeGrid dispose d’une mise en page très réactive et d’un design optimisé pour desktop, écrans tactiles et smartphones. Il fonctionne correctement sur iOS, Android et Windows.
Créez vos propres modèles
Grâce aux templates, les utilisateurs peuvent concevoir une interface personnalisée dans React TreeGrid selon leurs besoins via une large gamme d’options de template.
Thèmes modifiables et attrayants
Design moderne avec plus de 5 thèmes intégrés tels que Fluent, Tailwind CSS, Bootstrap, Material, Fabric, et autres. Utilisez l’outil Theme Studio en ligne pour personnaliser facilement les thèmes du TreeGrid.
Globalisation et localisation
Permettre aux utilisateurs de différents paramètres régionaux d’utiliser le TreeGrid en formatant les dates, devises et nombres selon leurs préférences.
Exemple de code React TreeGrid
Démarrez facilement avec React TreeGrid en quelques lignes de code TSX comme illustré ci-dessous. Consultez également notre exemple React TreeGrid qui montre comment rendre et configurer un TreeGrid en React.
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sortData } from './data';
function App() {
return <TreeGridComponent dataSource={sortData} treeColumnIndex={1} childMapping='subtasks'>
<ColumnsDirective>
<ColumnDirective field='Category' headerText='Category' width='150'/>
<ColumnDirective field='orderName' headerText='Order Name' width='170'/>
<ColumnDirective field='orderDate' headerText='Order Date' width='130' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='price' headerText='Price' width='100' textAlign='Right' type='number' format='C0' />
</ColumnsDirective>
</TreeGridComponent>
};
export default App;
Skeleton loading indicator
L’indicateur de chargement (squelette) du TreeGrid affiche un effet « shimmer » pendant la récupération et la liaison des données lors du rendu initial, du rafraîchissement ou après des actions comme le tri et le filtrage. Le TreeGrid propose deux types d’effets : spinner et shimmer.
Colonnes
Les colonnes définissent le schéma de la source de données dans React TreeGrid. Les fonctionnalités incluent le formatage, la définition des colonnes, le retour à la ligne du texte, le sélecteur de colonnes, le menu de colonne, le réordonnancement des colonnes, et d’autres options importantes.
Pagination
Grâce à la pagination, il est possible d’afficher un segment de données à partir de la source assignée. React TreeGrid propose une interface de pagination intégrée avec des options de personnalisation complètes. Il propose aussi un mode de pagination à la demande pour récupérer efficacement des données depuis des services distants.
Tri
Le TreeGrid permet aux utilisateurs de trier une colonne en cliquant simplement sur l’en-tête. Un clic sur l’en-tête avec Ctrl permet le tri multiple. Triez les données en ordre ascendant ou descendant.
Filtrage
Le filtrage permet d’afficher des enregistrements spécifiques qui satisfont un critère donné. Il prend en charge divers types de filtres, y compris un filtre puissant de type Excel. Le filtre du TreeGrid permet de choisir des types de filtres adaptés, de définir une logique de filtrage personnalisée et de personnaliser l’interface de filtrage selon les besoins de l’application. Il est possible de filtrer en tenant compte des relations parents/enfants.
Sélection
React TreeGrid permet de sélectionner des lignes ou des cellules. Une ou plusieurs lignes/cellules peuvent être sélectionnées en maintenant Ctrl ou Command, ou de manière programmée.
Ligne
Les lignes dans le TreeGrid représentent chaque objet de données provenant de la source. Elles prennent en charge l’expansion/la réduction des lignes enfants, le réordonnancement des lignes, l’indentation/désindentation pour modifier le niveau hiérarchique, et bien d’autres fonctionnalités.
Édition
React TreeGrid offre un support complet pour les opérations CRUD (création, lecture, mise à jour, suppression). En complément des composants d’édition intégrés pour modifier une valeur de colonne, le support des templates permet de créer des éditeurs personnalisés adaptés aux besoins de l’application. Les opérations d’édition fonctionnent avec des collections JSON ou des services de données distants via le DataManager.
Glisser-déposer des lignes
Le TreeGrid permet de glisser-déposer des lignes au sein du même TreeGrid ou entre TreeGrids différents. Cette fonctionnalité est particulièrement utile pour réorganiser les données et offrir une expérience utilisateur plus intuitive.
Agrégation
Les agrégations des valeurs de colonnes peuvent être affichées facilement via la fonctionnalité d’agrégat. Les agrégats peuvent être personnalisés pour afficher leur valeur à chaque niveau hiérarchique à l’aide de types de résumé prédéfinis.
Colonnes figées
Les colonnes figées restent visibles à gauche, à droite ou des deux côtés du TreeGrid, rendant le contenu restant défilable. Elles sont principalement utilisées pour comparer des valeurs de cellules.
Recherche
Vous pouvez rechercher des enregistrements en utilisant la méthode de recherche. Intégrez une zone de texte de recherche dans la barre d’outils du React TreeGrid en ajoutant des éléments de recherche.
Mise en page adaptative
L’interface utilisateur du React Tree Grid est personalisée et repensée pour offrir une excellente présentation et une bonne utilisabilité sur les petits écrans. Les dialogues de filtrage, de recherche et d’édition s’adaptent à la taille de l’écran.
Infobulle personnalisée
Le composant React TreeGrid vous permet de définir des infobulles pour les cellules du treegrid. Survolez les nœuds de l’arbre pour afficher le texte de l’infobulle.
En-têtes persistants
Gardez les en-têtes de colonne toujours visibles lors du défilement des données. L’en-tête persistant améliore l’utilisabilité en提供ant un contexte constant, ce qui facilite l’interprétation et l’analyse des grands ensembles de données.
Exportation
Export vers Excel, PDF, CSV
Exportez facilement le contrôle React TreeGrid dans différents formats de fichier tels qu’Excel, PDF ou CSV. Les utilisateurs peuvent également personnaliser programmatique-ment le document exporté.
Impression
Les utilisateurs peuvent imprimer les données via l’option d’impression de la barre d’outils ou de manière programmée. Imprimez toutes les lignes d’un React TreeGrid indépendamment du nombre de pages, ou imprimez uniquement la page affichée.
Fonctionnalités supplémentaires
Hauteur des lignes
La hauteur des lignes est un facteur important pour l’affichage du nombre d’enregistrements dans la zone visible, et elle est facilement personnalisable selon les exigences UI de l’application. Il est également possible de définir la hauteur des lignes de façon conditionnelle.
Copier dans le presse-papiers
Le presse-papiers offre la possibilité de copier les données des lignes ou cellules sélectionnées. Utilisez Ctrl+C et Ctrl+Shift+H pour copier les données avec ou sans en-têtes, respectivement.
Menu contextuel
Le menu contextuel améliore les actions utilisateur dans React TreeGrid via un menu contextuel. Il apparaît lors d’un clic droit sur la cellule, l’en-tête ou le pager. Outre les éléments par défaut, il permet d’ajouter des éléments personnalisés.
Largeur et hauteur
Permet de modifier la taille du React TreeGrid en définissant les propriétés width et height. Des barres de défilement horizontales et verticales apparaîtront lorsque le contenu dépasse l’élément TreeGrid. Pour remplir le conteneur parent, définissez height et width à 100%.
En-têtes empilés
Les en-têtes empilés permettent de regrouper et de visualiser les en-têtes de colonnes de manière empilée. Il n’y a pas de limite au nombre de colonnes empilables. L’utilisateur peut effectuer toutes les actions du TreeGrid même lorsque les colonnes sont empilées.
Accessibilité
Navigation au clavier
Le TreeGrid garantit que chaque cellule est accessible au clavier. Les fonctions principales comme l’expansion/réduction des lignes enfants, le tri, la sélection et l’édition peuvent être effectuées uniquement au clavier, sans souris. Cela aide à créer des applications très accessibles.
Lecteur d’écran
Le React TreeGrid dispose d’un support WAI-ARIA complet. Son interface inclut des éléments visuels à fort contraste, améliorant l’expérience des personnes malvoyantes. Les descriptions UI valides sont également accessibles via des technologies d’assistance comme les lecteurs d’écran.
De droite à gauche (RTL)
Le rendu de droite à gauche permet d’afficher le texte et la mise en page du React TreeGrid de droite à gauche. Cela améliore l’expérience utilisateur et l’accessibilité pour les langues RTL.
Vous ne savez pas comment créer votre premier React TreeGrid ? Nos vidéos tutoriels et notre documentation peuvent vous aider.
Je veux regarder maintenant Je veux lire maintenantDécouvrez l'écosystème complet de composants React de Syncfusion
Découvrez plus de 140+ composants d'interface utilisateur React, comprenant des contrôles éprouvés et prêts pour la production, ainsi que les derniers composants React purs conçus nativement pour le développement d'applications web modernes.
-
Composants React
-
Composants React purs
-
Composants intelligentsGrillesVisualisation des donnéesCalendriersListes déroulantesVisionneuses et éditeurs de fichiersBoutonsChat interactifChamps de saisieNavigationFormulairesNotifications
-
GrillesVisualisation des donnéesNavigationEntrées
Foire aux questions
Pourquoi choisir Syncfusion React Tree Grid ?
Le React TreeGrid de Syncfusion offre les fonctionnalités suivantes :
Charger de grandes quantités de données en chargeant dynamiquement les enfants à la demande.
Inclure des interactions UI flexibles comme l’expansion et la réduction des enregistrements parents, édition via dialog, et plus.
Liaison de données flexible (locales et distantes) : JSON, services RESTful, OData, WCF.
- L’un des meilleurs TreeGrid React sur le marché offrant une UI riche en fonctionnalités.
- Apparence UI attrayante avec des thèmes intégrés tels que Fabric, Bootstrap, etc.
- Configuration et API simples.
- Compatibilité avec tous les navigateurs modernes.
Convivial pour le tactile mobile et responsive.
Ressources d’apprentissage étendues comme les démos et la documentation pour démarrer rapidement.
Où puis-je trouver la démo du Syncfusion React Tree Grid ?
Vous pouvez consulter notre démo React TreeGrid, qui montre comment rendre et configurer le TreeGrid.
Puis-je télécharger et utiliser gratuitement le Syncfusion React Tree Grid ?
Non, il s’agit d’un produit commercial nécessitant une licence payante. Une licence communautaire gratuite est toutefois disponible pour les organisations dont le chiffre d’affaires annuel est inférieur à 1 million USD et comptant cinq développeurs ou moins.
Comment commencer avec Syncfusion React Tree Grid ?
Un bon point de départ est notre documentation complète Getting Started.
Nos clients nous aiment
Grâce à un excellent ensemble d’outils et à une excellente équipe d’assistance, Syncfusion® réduit le temps de développement de ses clients.Voici quelques-uns de leurs témoignages.
Aweseome, enough said. really
Easy usability, solving real life problems. easy to implement. most of the cases has the operators and settings possibilities you right away need. never fails to impress
Oliver O
Geschäftsführung Kreation/Artdirektion
A giant framework with great pricing options
I have loved the components and options that Syncfusion has, besides, its documentation, demos, and Support are excellent.
Alejandro Javier V
CEO
Voir de vraies histoires de réussite
Des développeurs du monde entier font confiance à Essential Studio de Syncfusion pour simplifier les projets complexes et accélérer leur livraison. Grâce à sa vaste bibliothèque de contrôles d’interface utilisateur, à ses SDK puissants et à son support fiable, Essential Studio aide les équipes à créer des applications prêtes pour l’entreprise en toute confiance.
Explorer des études de casIndustrie
Développement de logiciels
75% Réduction des coûts
50% Développement plus rapide
Industrie
Services publics (pétrole et gaz)
450+ heures économisées
Processus rationalisés et heures d’effort de développement économisées.
Fonctionnalités avancées et flexibles
Utilisateurs autonomisés grâce à une fonctionnalité robuste et polyvalente.
Industrie
Logiciel et technologie
1000+ heures économisées
Développement accéléré grâce à des composants d’interface utilisateur prêts pour l’entreprise.
Gestion de fichiers efficace
Flux de travail rationalisés grâce à des bibliothèques de documents, sans les construire à partir de zéro.
Industrie
Logiciel et technologie
2 ans de retard évité
Deux ans de retards évités grâce à une planification proactive.
Livraison à temps
Projets livrés dans les délais à l’aide de contrôles fiables.
Industrie
Services informatiques et conseil en TI
Performances améliorées
Grands ensembles de données gérés avec une personnalisation aisée et un débogage rapide.
Hautement personnalisable
Contrôles plug-and-play avec intégration rapide de modèles.
Industrie
Services professionnels
Accès instantané
Disponibilité rapide des fonctionnalités et des ressources.
Dépendances réduites
Moins de dépendances pour un développement plus rapide.
Evalue par des utilisateurs du monde entier.
Syncfusion React Tree Grid Resources
UI Kits
Figma Download
Figma Download
Recompenses
L’excellence—c’est une chose de l’affirmer, mais cela signifie davantage lorsque les autres la reconnaissent. Syncfusion® est fier de détenir les récompenses de l'industrie suivantes.
