React Data Grid – Table Flexible & Riche
- Charge des millions en une seconde.
- Design mobile adaptatif toutes résolutions.
- Édition flexible & filtrage façon Excel.
- Export fluide en PDF, CSV et Excel.
Quick Overview Video
Trusted by the world’s leading companies
La grille de données React est un composant de grille riche en fonctionnalités pour afficher des données sous forme de tableau. Sa large gamme de fonctionnalités comprend la liaison de données, l’édition, le filtrage de type Excel, le tri personnalisé, l’agrégation de lignes, la sélection et la prise en charge des formats Excel, CSV et PDF.
Pourquoi choisir le Data Grid React de Syncfusion ?
Haute performance
Des efforts bien pensés, et se concentre principalement sur des performances rapides pour charger des millions d’enregistrements en une seconde.
Liaison de données transparente
Lie les données de manière transparente avec diverses sources de données locales et distantes telles que JSON, OData, WCF et les services Web RESTful à l’aide du gestionnaire de données.
S’adapte à toute résolution
DataGrid a une mise en page très réactive et une conception optimisée pour les ordinateurs de bureau, les écrans tactiles et les smartphones. Il fonctionne bien sur tous les téléphones mobiles utilisant iOS, Android ou Windows OS.
Édition flexible
La grille de données React effectue des opérations de création, lecture, mise à jour et suppression (CRUD) plus facilement avec une liste d’objets métier ou un service de données distant à l’aide d’un gestionnaire de données.
Créez vos propres conceptions de modèles
Permet aux utilisateurs de créer des expériences utilisateur personnalisées dans la grille React en fonction des besoins de leur application à l’aide d’une large gamme d’options de modèles.
Thèmes attrayants et personnalisables
Design de pointe avec plus de 5 thèmes intégrés tels que Fluent, Tailwind CSS, Bootstrap, Material, Fabric, et bien plus encore. Utilisez l’outil en ligne Theme Studio pour personnaliser facilement les thèmes.
Exportation et impression faciles
Exportez la grille de données dans différents formats de fichiers, y compris Excel, PDF, et CSV. Imprimez toutes les lignes, quel que soit le nombre de pages, ainsi que la page actuellement affichée.
Mondialisation et localisation
Permet aux utilisateurs de différentes régions de les utiliser en formatant les dates, la devise et la numérotation en fonction des préférences.
DataGrid compatible IA pour des informations plus rapides
Notre DataGrid est prêt pour l’IA dès sa conception. Étendez-le facilement avec la recherche sémantique, la détection d’anomalies ou toute autre opération d’IA dont vous avez besoin. Obtenez des réponses rapides et une exploration de données plus intelligente, le tout dans une seule grille.
-
Recherche sémantique : Connectez votre modèle NLP préféré pour permettre aux utilisateurs de faire des requêtes avec des phrases naturelles, sans avoir besoin de mots-clés exacts.
- Voir comment ajouter la recherche sémantique
-
Détection d'anomalies : Connectez un service ML pour trouver rapidement des tendances ou des erreurs inhabituelles et maintenir l'entreprise sur la bonne voie.
- Voir comment ajouter la détection d’anomalies
Exemple de code pour la grille de données React
Commencez facilement avec la grille de données React en utilisant quelques lignes de code TSX simples, comme démontré ci-dessous. Explorez également notre exemple de grille de données React qui vous montre comment rendre et configurer une grille de données dans React.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { GridComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-grids';
import { orderDetails } from './data';
import { SampleBase } from '../common/sample-base';
export class Default extends SampleBase<{}, {}> {
render() {
return (
<div className='control-pane'>
<div className='control-section'>
<GridComponent dataSource={orderDetails} height='350'>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='CustomerName' headerText='Customer Name' width='150'></ColumnDirective>
<ColumnDirective field='OrderDate' headerText='Order Date' width='130' format='yMd' textAlign='Right' />
<ColumnDirective field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right' />
<ColumnDirective field='ShippedDate' headerText='Shipped Date' width='130' format='yMd' textAlign='Right'></ColumnDirective>
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='150'></ColumnDirective>
</ColumnsDirective>
</GridComponent>
</div>
</div>
)
}
}
Édition
Le composant React DataGrid prend en charge les opérations de création, lecture, mise à jour et suppression (CRUD). En plus des composants d’éditeur intégrés pour éditer une valeur de colonne particulière, des composants d’éditeur personnalisés peuvent être créés à l’aide de modèles selon les besoins de l’application. À l’aide d’un gestionnaire de données, vous pouvez effectuer des opérations d’édition avec une collection de tableaux ou un service de données distant.
Tri
Triez les lignes par ordre croissant ou décroissant par rapport à une colonne en cliquant simplement sur l’en-tête dans React DataGrid. Triez les données de plusieurs colonnes en maintenant la touche Ctrl + clic sur l’en-tête. De plus, définissez votre propre logique de tri personnalisée en fonction des besoins de l’application.
Filtrage
Le filtrage permet d’afficher des enregistrements particuliers ou liés qui répondent à un critère donné dans la grille de données. La grille de données prend en charge différents types de filtres, y compris de puissants filtres de type Excel. Choisissez le type de filtre approprié, définissez votre propre logique de filtrage personnalisée et personnalisez l’interface utilisateur de filtrage en fonction des besoins de l’application. Les caractères diacritiques peuvent également être filtrés.
Pagination
La pagination est utilisée pour afficher un segment de données à partir de la source de données assignée. La grille de données React offre une interface utilisateur de pagination intégrée avec des options pour personnaliser l’ensemble de son interface. Elle dispose également d’un mode de pagination à la demande pour une récupération efficace des données des services Web distants.
Sélection
Sélectionnez des lignes ou des cellules à l’aide de la case à cocher ou en cliquant simplement dessus. Sélectionnez plus d’une ligne ou d’une cellule en maintenant Ctrl, Shift ou Command, ou par programmation.
Regroupement
Regroupez les lignes pour afficher les données dans une structure hiérarchique organisée par ordre croissant ou décroissant afin de faciliter l’expansion et la réduction des enregistrements. Il existe une option pour regrouper les enregistrements de la colonne souhaitée par simple glisser-déposer de cette colonne dans une zone de dépôt interactive.
Agrégation
Les agrégats pour les valeurs de colonne peuvent être facilement affichés à l’aide de la fonction d’agrégation. Les agrégats peuvent être personnalisés pour afficher leur valeur dans des lignes de résumé individuelles, des lignes de résumé de groupe individuelles ou des lignes de légende de groupe.
Colonne
Les colonnes définissent le schéma de la source de données dans la grille de données React. Il prend en charge le formatage, la génération automatique de colonnes, les définitions de colonnes, le gel des lignes et des colonnes, l’étendue des colonnes, le renvoi à la ligne du texte, le sélecteur de colonnes, le menu de colonnes et d’autres fonctionnalités.
Lignes et colonnes figées
Les lignes et colonnes figées sont visibles en haut et à gauche, à droite, des deux côtés, ou à une position fixe, respectivement, rendant le reste du contenu de la grille défilable. Cette fonctionnalité est principalement utilisée pour comparer les valeurs des cellules.
En-tête fixe
L’en-tête de la grille de données React doit être dans une position fixe lors du défilement vertical du document pour visualiser le contenu de la grille de données ainsi que l’en-tête de colonne.
Glisser-déposer des lignes
La grille React permet aux utilisateurs de glisser-déposer des lignes vers une autre grille de données ou un composant personnalisé. Les utilisateurs peuvent également glisser-déposer des lignes dans la même grille de données à l’aide de l’icône de glissement et transférer des lignes entre différents groupes.
Grille maître-détail
La grille maître-détail React est un scénario d’utilisation dans lequel les détails d’un enregistrement sont affichés dans une grille de données séparée en cliquant sur une ligne particulière.
Disposition adaptative de l’interface utilisateur
L’interface utilisateur de la grille de données React est personnalisée et repensée pour offrir des vues et une utilisabilité excellentes sur les petits écrans. Les dialogues de filtrage, de tri, de recherche et d’édition s’adaptent à la taille de l’écran et affichent également les éléments de ligne verticalement.
Indicateur de chargement squelette
Le contrôle de grille de données React affiche l’effet Shimmer comme indicateur de chargement lors de la récupération des données et de leur liaison à la grille lors du rendu initial, du rafraîchissement ou après l’exécution d’actions de grille comme le tri, le filtrage, le regroupement, etc. La grille de données offre deux types d’effets d’indicateur de chargement : spinner et shimmer.
Gestion d’état
La gestion d’état dans le composant React Data Grid vous permet de maintenir l’état de la grille même après un rafraîchissement du navigateur ou lors de la navigation vers une autre page au sein de la même session de navigateur. Cette fonctionnalité est particulièrement avantageuse pour conserver la configuration et les données de la grille suite à un rechargement de page.
Mise à jour en direct
Le DataGrid met à jour les données en direct dans ses cellules à des intervalles de temps spécifiques. Ces mises à jour se produisent sans causer de décalage ou de ralentissement, garantissant que le système reste très réactif et efficace.
Graphiques intégrés avec Data Grid
Le Data Grid s’intègre désormais au composant Charts, transformant les données de grille sélectionnées en visualisations dynamiques et interactives. Cette puissante combinaison de tableaux et de graphiques permet aux utilisateurs d’obtenir des informations plus claires en un coup d’œil. Personnalisez les types de graphiques, les axes et les visuels.
Autres fonctionnalités
Hauteur de ligne
La hauteur de ligne est un facteur majeur lors de l’affichage du nombre d’enregistrements dans la fenêtre d’affichage, et elle est facilement personnalisable en fonction des exigences de l’interface utilisateur de l’application. Il est également possible de définir la hauteur de ligne de manière conditionnelle.
Copier dans le presse-papiers
Le presse-papiers permet aux utilisateurs de copier les données des lignes ou cellules sélectionnées. Les combinaisons de touches Ctrl+C et Ctrl+Shift+H copient les données avec et sans en-tête, respectivement.
Menu contextuel
Effectue diverses actions dans une grille de données à l’aide du menu contextuel qui apparaît lorsque la cellule, l’en-tête ou le paginateur est cliqué avec le bouton droit de la souris. En plus des éléments de menu par défaut intégrés, des éléments de menu contextuels personnalisés peuvent être ajoutés.
Largeur et hauteur
Définissez les propriétés de largeur et de hauteur pour modifier la taille de la grille de données. Lorsque le contenu dépasse l’élément de la grille, des barres de défilement horizontales et verticales apparaissent. Pour remplir le conteneur parent de la grille de données, définissez simplement la hauteur et la largeur à 100 %.
En-têtes empilés
Les en-têtes empilés permettent de regrouper et de visualiser les en-têtes de colonne de manière empilée. Le nombre de colonnes pouvant être empilées est illimité. Effectuez toutes les actions de la grille de données même lorsque les colonnes sont empilées.
Accessibilité
Navigation au clavier
La grille de données React garantit que chaque cellule est accessible à l’aide du clavier. Les principales fonctionnalités comme le tri, la sélection et l’édition peuvent être effectuées à l’aide de commandes clavier uniquement ; aucune interaction souris n’est requise. Cela aide à créer des applications hautement accessibles à l’aide de ce composant.
Lecteur d’écran
La vue de la grille de données React offre un support complet d’accessibilité WAI-ARIA. Son interface utilisateur comprend des éléments visuels à contraste élevé qui aident les personnes malvoyantes à avoir la meilleure expérience de visualisation. De plus, des descriptions d’interface utilisateur valides sont facilement accessibles via des technologies d’assistance telles que les lecteurs d’écran.
De droite à gauche (RTL)
Le rendu de droite à gauche permet d’afficher le texte et la mise en page de la grille de données de droite à gauche. Cela améliore l’expérience utilisateur et l’accessibilité pour les langues RTL.
Optimisé pour le mobile et compatible avec le toucher
DataGrid dans React a une mise en page très réactive et un design optimisé pour les ordinateurs de bureau, les écrans tactiles et les smartphones. Il fonctionne bien sur tous les téléphones mobiles qui utilisent iOS, Android ou Windows 8 OS.
Support tactile
Des gestes tactiles conviviaux et une conception d’interface utilisateur interactive offrent la meilleure expérience utilisateur. Toutes les fonctionnalités de la grille React fonctionnent sur les appareils tactiles sans aucune configuration.
Paginateur réactif
Le paginataire de la grille de données React agit intelligemment et modifie complètement son interface utilisateur de manière réactive en fonction des dimensions. Sa conception optimisée offre la meilleure interaction d’interface utilisateur sur différents appareils.
Vous ne savez pas comment créer votre première grille de données React ? Nos vidéos tutoriels et notre documentation peuvent vous aider.
J’aimerais la regarder maintenant J’aimerais la lire maintenantDécouvrez l'écosystème complet de composants React de Syncfusion
Découvrez plus de 145+ 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éesListes déroulantesVisionneuses et éditeurs de fichiersBoutonsChat interactifChamps de saisieNavigationFormulairesNotifications
-
GrillesVisualisation des donnéesNavigationEntrées
Foire aux questions
Pourquoi devriez-vous choisir Syncfusion React DataGrid ?
Le Syncfusion React DataGrid offre les fonctionnalités suivantes :
Charge des millions d’enregistrements en une seconde.
- Conception axée sur le mobile qui s’adapte à toute résolution.
Liaison de données flexible avec prise en charge des sources de données locales et distantes telles que JSON, les services RESTful, les services OData et les services WCF.
Édition flexible et modes de sélection d’enregistrements intuitifs.
Options de filtrage de type Excel et de regroupement prêtes à l’emploi.
D’innombrables personnalisations de colonnes et résumés de données.
Options transparentes d’exportation de données comme le PDF, le CSV et Excel.
- L’un des meilleurs React DataGrid du marché qui offre une interface utilisateur riche en fonctionnalités pour interagir avec le logiciel.
Configuration et API simples.
- Prend en charge tous les navigateurs modernes.
Des ressources d’apprentissage étendues telles que des démos, de la documentation et des vidéos pour apprendre rapidement et commencer avec React DataGrid.
Quel est le prix du Syncfusion React DataGrid ?
Nous ne vendons pas la grille de données React séparément. Elle n’est disponible à l’achat que dans le cadre de la licence d’équipe Syncfusion. Celle-ci contient plus de 1,600 composants et frameworks, y compris la grille de données React. Le prix de la licence d’équipe commence à 395 $ par mois pour 5 développeurs et inclut l’assistance et les mises à jour jusqu’à l’expiration de l’abonnement. De plus, nous pouvons offrir des réductions en fonction des promotions actuellement actives. Veuillez contacter nos spécialistes produits dès aujourd’hui pour voir si vous êtes éligible à des réductions supplémentaires.
Où puis-je trouver la démo de la grille de données Syncfusion React ?
Vous pouvez trouver notre démo de la grille de données React, qui montre comment rendre et configurer la grille de données.
Qu’est-ce qu’une grille de données React ?
Une grille de données React est un composant d’interface utilisateur qui permet aux utilisateurs d’afficher et de manipuler des données tabulaires avec des fonctionnalités telles que le tri, le filtrage, la pagination et l’édition. Elle gère efficacement les grands ensembles de données et offre des options d’exportation et d’impression.
Comment activer le filtrage dans React Data Grid ?
Pour utiliser la fonctionnalité de filtrage, injectez le module Filter dans la grille. Pour activer le filtrage dans la grille React de Syncfusion, définissez la propriété allowFiltering sur true. Cela affiche une barre de filtre sous les en-têtes de colonne, permettant aux utilisateurs de saisir des critères de filtrage.La grille offre plusieurs modes de filtrage, qui sont configurables via la propriété filterSettings.type.
Comment gérer les grands ensembles de données dans une grille de données React ?
La grille peut gérer de grands ensembles de données en utilisant les fonctionnalités de pagination, de défilement virtuel et de défilement infini.
Comment implémenter l’édition en ligne dans React Data Grid ?
Pour activer la fonctionnalité d’édition directement dans la grille, vous devez définir les propriétés allowEditing, allowAdding et allowDeleting dans les editSettings sur true. L’édition nécessite une colonne de clé primaire pour les opérations CRUD. Pour définir la clé primaire, définissez isPrimaryKey sur true dans une colonne particulière.
Puis-je acheter le composant Syncfusion React DataGrid séparément ?
Non, nos plus de 1,600 composants et frameworks pour le Web, le mobile et le bureau, y compris notre React DataGrid, ne sont pas vendus individuellement. Ils sont uniquement disponibles dans le cadre d’une licence d’équipe. Cependant, nous avons fixé un prix compétitif pour le produit, il ne coûte donc un peu plus cher que ce que d’autres fournisseurs facturent pour leur seul composant DataGrid. Nous avons également constaté, d’après notre expérience, que nos clients commencent généralement par utiliser l’un de nos produits, puis étendent rapidement leur utilisation à plusieurs produits. Nous avons donc pensé qu’il était préférable d’offrir tous les plus de 1,600 composants et frameworks pour un abonnement qui commence à 395 $ par mois pour une équipe de 5 développeurs. De plus, nous pourrions être en mesure d’offrir des réductions basées sur les promotions actuellement actives. Veuillez contacter nos spécialistes produits dès aujourd’hui pour voir si vous êtes éligible à des réductions supplémentaires.
Puis-je télécharger et utiliser gratuitement le Syncfusion React DataGrid ?
Non, il s’agit d’un produit commercial qui nécessite une licence payante. Cependant, une licence communautaire gratuite est également disponible pour les entreprises et les particuliers dont les organisations ont un revenu brut annuel inférieur à 1 million USD, 5 développeurs ou moins et 10 employés au total ou moins.
Comment puis-je démarrer avec Syncfusion React DataGrid ?
Un bon point de départ serait notre documentation complète pour débuter.
Quelles sont les fonctionnalités d’une grille de données React ?
React Grid offre des fonctionnalités telles que le tri, le filtrage, la pagination, l’édition, les agrégats, le regroupement, l’exportation vers Excel/PDF, le redimensionnement des colonnes et la virtualisation.
Comment ajouter le tri à une grille de données React ?
Pour activer le tri dans la grille React de Syncfusion, suivez ces étapes :1. Assurez-vous que le module de tri est importé et injecté dans votre composant Grid.2. Définissez la propriété allowSorting sur true pour activer le tri.3. Utilisez la propriété sortSettings pour définir les configurations de tri initiales ou personnaliser le comportement de tri.
La grille de données React peut-elle gérer des données en temps réel ?
La grille React de Syncfusion gère les données en temps réel grâce à l’intégration avec les WebSockets et SignalR, permettant des mises à jour dynamiques et des expériences utilisateur fluides.
Comment configurer la pagination côté serveur dans React Data Grid ?
La grille gère la pagination côté serveur en activant l’adaptateur de données intégré de Syncfusion ou en utilisant des concepts de liaison de données personnalisée.
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.
The best tool to operate grid-like data out there
Good documentation helps you with everything you need to know. What I like the most is that it takes you from configuration to usage. I have mainly used grid and toolbar options along with dashboard.
Ivan G,
Business Application Developer
A Must-Have Tool for Fast Development with Top-Notch Support
We’ve been using Syncfusion Essential Studio for over 4 years, and it’s been a game-changer for our team. The components are incredibly versatile and cover almost every use case we’ve needed, from basic UI elements to complex data grids and charts. The ease of integration with our existing projects saved us countless hours during implementation. The documentation is straightforward, and even if we get stuck, their customer support team is super responsive—whether through live chat or tickets. We’ve raised nearly 50 tickets so far, and every single one was resolved quickly with clear solutions. The frequent updates with new features and improvements keep the library fresh and aligned with modern needs. It’s rare to find a tool that’s both powerful and easy to use, but Syncfusion nails it.
Labeeb M.
Lead UI Developer
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.
Ressources de la grille de données Syncfusion React
Kits d’interface utilisateur
Téléchargement Figma
Téléchargement Figma
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.
Activités récentes dans les blogs et tutoriels React DataGrid
Les articles de blog et les vidéos tutoriels sur React DataGrid vous guideront dans la création de votre première application avec des composants React. Ils fournissent des stratégies de résolution de problèmes, décrivent les fonctionnalités, annoncent les nouvelles versions, expliquent les meilleures pratiques et présentent des scénarios d’exemple. Explorez nos derniers articles sur notre blog et nos chaînes de tutoriels vidéo pour les mises à jour de React DataGrid.
