AG Grid est une grille de données JavaScript complète et hautement personnalisable . Il offre des performances exceptionnelles , n'a aucune dépendance tierce et prend en charge 
Réagissez , 
Angulaire et 
Vue .
Grille de données JavaScript | Tableau JavaScript
Assistance entreprise
Rapports de bogues
Questions
Contribuer
Outils et extensions
Vitrine
Les astronomes
Composants personnalisés
Thèmes
Thèmes personnalisés
Installation
Installation
Projets de semences
Caractéristiques
Exemples
? Aperçu
⚡️ Démarrage rapide
?️ Personnalisations
? Communauté
? Soutien
Licence
AG Grid est disponible en deux versions : Community & Enterprise.
ag-grid-community est gratuit, disponible sous licence MIT et est livré avec toutes les fonctionnalités de base attendues d'une grille de données JavaScript, notamment le tri, le filtrage, la pagination, l'édition, les composants personnalisés, la thématisation et bien plus encore.
ag-grid-enterprise est disponible sous licence commerciale et est livré avec des fonctionnalités avancées, telles que la création de graphiques intégrés, le regroupement de lignes, l'agrégation, le pivotement, le maître/détail, le modèle de lignes côté serveur et l'exportation, en plus du support dédié de notre équipe d'ingénierie.
| Fonctionnalité | Communauté AG Grid | AG Grid Entreprise |
|---|---|---|
| Filtration | ✅ | ✅ (Avancé) |
| Tri | ✅ | ✅ |
| Édition de cellules | ✅ | ✅ |
| Exportation CSV | ✅ | ✅ |
| Glisser-déposer | ✅ | ✅ |
| Thèmes et style | ✅ | ✅ |
| Sélection | ✅ | ✅ |
| Accessibilité | ✅ | ✅ |
| Défilement infini | ✅ | ✅ |
| Pagination | ✅ | ✅ |
| Données côté serveur | ✅ | ✅ (Avancé) |
| Composants personnalisés | ✅ | ✅ |
| Cartographie intégrée | ❌ | ✅ |
| Sélection de plage | ❌ | ✅ |
| Regroupement et agrégation de lignes | ❌ | ✅ |
| Pivotant | ❌ | ✅ |
| Exportation Excel | ❌ | ✅ |
| Opérations du Presse-papiers | ❌ | ✅ |
| Maître/Détail | ❌ | ✅ |
| Données d'arborescence | ❌ | ✅ |
| Menu Colonne | ❌ | ✅ |
| Menu contextuel | ❌ | ✅ |
| Panneaux d'outils | ❌ | ✅ |
| Soutien | ❌ | ✅ |
ℹ️ Remarque :
Visitez la page Tarifs pour une comparaison complète.
Nous avons créé plusieurs démos pour présenter la richesse des fonctionnalités d'AG Grid dans différents cas d'utilisation. Voyez-les en action ci-dessous ou interagissez avec eux sur notre page de démonstration.
Exemple de données financières avec mises à jour en direct et sparklines :
Démo en direct • Code source
Exemple de données d'inventaire pour afficher et gérer les produits :
Démo en direct • Code source
Exemple de données RH montrant les données hiérarchiques des employés :
Démo en direct • Code source
AG Grid est facile à configurer : il vous suffit de fournir vos données et de définir la structure de vos colonnes. Poursuivez votre lecture pour connaître les instructions d'installation de Vanilla JavaScript ou reportez-vous à nos guides spécifiques au framework pour Réagissez , Angulaire et Vue.
$ npm install --save ag-grid-community
1. Fournir un conteneur
Chargez la bibliothèque AG Grid et créez un conteneur div. Le div doit avoir une hauteur car la Data Grid remplira la taille du conteneur parent :
<html lang="en"> <head> <!-- Inclut tous les JS et CSS pour la grille de données JavaScript --> <script src="https://cdn.jsdelivr.net/npm/ag-grid-community /dist/ag-grid-community.min.js"></script> </head> <body> <!-- Votre conteneur Data Grid --> <div id="myGrid" style="height: 500px" ></div> </body></html>
2. Instanciation de la grille de données JavaScript
Créez la grille de données à l'intérieur de votre conteneur div à l'aide de createGrid .
// Options de grille : contient toutes les configurations de grille de données const gridOptions = {};// Votre code Javascript pour créer la grille de données const myGridElement = document.querySelector('#myGrid');agGrid.createGrid(myGridElement, gridOptions);3. Définir les lignes et les colonnes
// Options de grille : contient toutes les configurations de grille de données const gridOptions = { // Données de ligne : les données à afficher. rowData : [ { marque : 'Tesla', modèle : "Modèle Y", prix : 64950, électrique : true }, { marque : "Ford", modèle : "Série F", prix : 33850, électrique : false }, { marque : 'Toyota', modèle : 'Corolla', prix : 29600, électrique : false }, ], // Définitions de colonnes : définit le colonnes à afficher. columnDefs : [{ champ : 'marque' }, { champ : 'modèle' }, { champ : 'prix' }, { champ : 'électrique' }],} ;ℹ️ Remarque :
Pour plus d'informations sur la création de grilles de données avec AG Grid, reportez-vous à notre documentation.
Nous proposons également des projets Seed pour vous aider à démarrer avec des configurations courantes :
| Environnement | Cadre | Forfaits | Modules |
|---|---|---|---|
| Créer une application React (CRA) | | Forfaits | Modules |
| Vite | | Forfaits | Modules |
| Vite - TypeScript |  | Forfaits | Modules |
| Webpack 5 - TypeScript | | Forfaits | Modules |
| Webpack 5 - JavaScript |  | Forfaits | Modules |
| CLI angulaire | | Forfaits | Modules |
| Nuxt | | Forfaits | Modules |
| Vite | | Forfaits | Modules |
AG Grid est entièrement personnalisable, tant en termes d’apparence que de fonctionnalité. Il existe de nombreuses façons de personnaliser la grille et nous proposons une sélection d'outils pour vous aider à créer ces personnalisations.
Vous pouvez créer vos propres composants personnalisés pour personnaliser le comportement de la grille. Par exemple, vous pouvez personnaliser le rendu des cellules, la manière dont les valeurs sont modifiées et également créer vos propres filtres.
Il existe un certain nombre de types de composants différents que vous pouvez fournir à la grille, notamment :
Composant Cellule : pour personnaliser le contenu d'une cellule.
Composant d'en-tête : pour personnaliser l'en-tête d'une colonne et des groupes de colonnes.
Modifier le composant : pour personnaliser l'édition d'une cellule.
Composant de filtre : pour le filtre de colonne personnalisé qui apparaît dans le menu des colonnes.
Filtre flottant : pour le filtre flottant de colonne personnalisé qui apparaît dans le menu des colonnes.
Composant de date : pour personnaliser le composant de sélection de date dans le filtre de date.
Composant de chargement : pour personnaliser la ligne de cellule de chargement lors de l'utilisation du modèle de ligne côté serveur.
Composant de superposition : pour personnaliser le chargement et les composants de superposition sans lignes.
Composant de barre d'état : pour les composants de barre d'état personnalisés.
Composant du panneau d'outils : pour les composants du panneau d'outils personnalisés.
Composant d'info-bulle : pour les composants d'info-bulle de cellule personnalisés.
Composant d'élément de menu : pour personnaliser les éléments de menu affichés dans les menus de colonne et contextuels.
Pour fournir un rendu de cellule personnalisé et des composants de filtre à la grille, créez une référence directe à votre composant dans la propriété gridOptions.columnDefs :
gridOptions = { columnDefs : [ { field : 'country', // La colonne dans laquelle ajouter le composant à cellRenderer : CountryCellRenderer, // Votre filtre de composant de cellule personnalisé : CountryFilter, // Votre composant de filtre personnalisé }, ],} ; AG Grid propose 4 thèmes, chacun disponible en modes light et dark :
| Quartz | Matériel |
|---|---|
 |  |
| Alpin | Balham |
 |  |
Tous les thèmes AG Grid peuvent être personnalisés à l'aide de l'API Theming, ou vous pouvez créer un nouveau thème à partir de zéro à l'aide de notre Theme Builder ou Figma Design System.
AG Grid dispose d'une communauté vaste et active qui a créé un écosystème d'outils, d'extensions et d'utilitaires tiers pour vous aider à construire votre prochain projet avec AG Grid, quel que soit le langage ou le framework que vous utilisez :
Réagir • 
Angulaire • Tapuscrit • 
Vue • 
Python • 
Svelte • 
SolidJS • 
.FILET • 
Rouiller • 
Laravel
AG Grid est utilisé par des centaines de milliers de développeurs à travers le monde, issus de presque tous les secteurs. Bien que la plupart de ces projets soient privés, nous avons sélectionné une sélection de projets open source provenant de différents secteurs dans lesquels des noms connus utilisent AG Grid, notamment JPMorgan , MongoDB et NASA . Visitez notre page Vitrine communautaire pour en savoir plus.
Fondée en 2016, AG Grid a connu une popularité croissante et est désormais le leader du marché des Data Grids :
Les clients d'AG Grid Enterprise ont accès à un support dédié via ZenDesk, qui est surveillé par nos équipes d'ingénierie.
Si vous avez trouvé un bug, veuillez le signaler dans la section des problèmes de ce référentiel.
Recherchez des problèmes similaires sur StackOverflow à l'aide de la balise ag-grid . Si rien ne semble lié, postez-y un nouveau message. Veuillez ne pas utiliser les problèmes GitHub pour poser des questions.
AG Grid est développé par une équipe de développeurs colocalisés à Londres. Si vous souhaitez rejoindre l'équipe, envoyez votre candidature à [email protected].
ag-grid-community est sous licence MIT .
ag-grid-enterprise possède une licence commerciale .
Voir le fichier LICENSE pour plus d'informations.
Graphiques AGSi vous êtes arrivé jusqu'ici, vous pourriez être intéressé par notre dernier projet : AG Charts - La meilleure bibliothèque de graphiques JavaScript au monde.
Initialement conçu pour alimenter les graphiques intégrés dans AG Grid, nous avons rendu ce projet open source en 2018. Ayant constaté une popularité croissante depuis lors, nous avons décidé d'investir dans AG Charts avec une version Entreprise dédiée ( ag-charts-enterprise ) dans en plus de notre soutien continu à ag-charts-community .
Suivez-nous pour rester informé de toutes les dernières actualités d'AG Grid :
