Angular Data Grid – Un Grid Puissant pour les Applications Modernes
- Charge des millions d’enregistrements.
- Design mobile-first pour toutes résolutions.
- Édition flexible & filtrage façon Excel.
- Exportation simple en PDF, CSV et Excel.
Quick Overview Video
Trusted by the world’s leading companies
Aperçu du Angular Data Grid
L’Angular Grid est un composant de grille de données riche en fonctionnalités pour afficher des données dans un format tabulaire. Sa large gamme de fonctionnalités comprend la liaison de données, l’édition, le filtrage similaire à Excel, le tri personnalisé, le groupement, la réorganisation des lignes, le gel des lignes et colonnes, l’agrégation des lignes, et l’exportation vers les formats Excel, CSV et PDF.
Pourquoi choisir Syncfusion Essential Studio® Angular Data Grid ?
Haute performance
Efforts bien pensés, et se concentre principalement sur les performances rapides pour charger des millions d’enregistrements en seulement une seconde.
Liaison de données transparente
Liez 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 avec l’aide du gestionnaire de données.
S’adapte à toute résolution
Data Grid a une disposition hautement responsive et un design optimisé pour les ordinateurs de bureau, écrans tactiles et smartphones. Il fonctionne bien sur tous les téléphones mobiles qui utilisent iOS, Android ou Windows OS.
Édition flexible
L’Angular Grid effectue les 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 avec l’aide d’un gestionnaire de données.
Créez vos propres designs de templates
Permet aux utilisateurs de créer des expériences utilisateur personnalisées dans l’Angular Grid basées sur les besoins de leur application en utilisant une large gamme d’options de templates.
Thèmes personnalisables attrayants
Design de pointe avec plus de 5 thèmes intégrés tels que Fluent, Tailwind CSS, Bootstrap, Material, Fabric, et plus. Utilisez l’outil en ligne Theme Studio pour personnaliser facilement les thèmes.
Exportation et impression faciles
Exportez le Data Grid dans divers formats de fichiers, notamment Excel, PDF et CSV. Imprimez toutes les lignes, quel que soit le nombre de pages, ainsi que la page actuellement visualisée.
Globalisation et localisation
Permet aux utilisateurs de différentes locales de les utiliser en formatant les dates, devises et numérotation selon les préférences.
AI-Ready Grid Pour l’analyse des données d’entreprise
Accélérez l’analyse des données dans les applications Angular avec un DataGrid conçu pour les améliorations IA. Intégrez facilement la recherche sémantique et la détection d’anomalies pour des flux de travail plus intelligents.
-
Recherche sémantique: Utilisez des modèles de traitement du langage naturel (NLP) pour permettre aux utilisateurs de rechercher avec des phrases courantes, améliorant l’ergonomie sans mots-clés exacts.
- See how to add semantic search
-
Détection d’anomalies: Ajoutez des outils d’apprentissage automatique (ML) pour mettre en évidence les anomalies de données et assurer automatiquement la cohérence.
- Découvrez comment ajouter la détection d’anomalies
Exemple de Code Angular Data Grid
Commencez facilement avec l’Angular Data Grid en utilisant quelques lignes simples de code HTML et TS, comme démontré ci-dessous. Explorez également notre Exemple Angular Data Grid, qui vous montre comment rendre et configurer un Data Grid dans Angular.
<div class="control-section">
<ejs-grid [dataSource]='data' height='350'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'/>
<e-column field='CustomerName' headerText='Customer Name' width='150'/>
<e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" textAlign='Right'/>
<e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'/>
<e-column field='ShippedDate' headerText='Shipped Date' width='130' format="yMd" textAlign='Right'/>
<e-column field='ShipCountry' headerText='Ship Country' width='150'/>
</e-columns>
</ejs-grid>
</div>import { Component, OnInit } from '@angular/core';
import { orderDetails } from './data';
@Component({
selector: 'ej2-grid-container',
templateUrl: 'default.html'
})
export class DefaultComponent implements OnInit {
public data: Object[] = [];
ngOnInit(): void {
this.data = orderDetails;
}
}
Indicateur de chargement squelette
Le Data Grid affiche l’effet Shimmer comme indicateur de chargement lors de la récupération de données et de leur liaison à la grille pendant le rendu initial, l’actualisation, ou après avoir effectué des actions de grille comme le tri, le filtrage, le groupement et plus. La grille de données offre deux types d’effets d’indicateur de chargement : spinner et shimmer.
Disposition d’interface utilisateur adaptative
L’interface utilisateur du Data Grid est personnalisée et repensée pour de superbes vues et une utilisation optimale sur de petits écrans. Ses fonctionnalités incluent le filtre, le tri, la recherche, le sélecteur de colonnes, le menu des colonnes, le dropdown du pageur et les dialogues d’édition qui s’adaptent à la taille de l’écran et rendent les éléments de ligne dans une direction verticale.
Colonne
Les colonnes définissent le schéma de la source de données dans le Data Grid. Il prend en charge le formatage, la génération automatique de colonnes, les définitions de colonnes, le gel des lignes et colonnes, l’extension de colonnes, l’habillage de texte, le sélecteur de colonnes, le menu des colonnes et d’autres fonctionnalités.
Pagination
La pagination est utilisée pour afficher un segment de données de la source de données assignée. L’Angular Data Grid offre une interface utilisateur de pageur intégrée avec des options pour personnaliser toute son interface utilisateur. Il a également un mode de pagination à la demande pour une récupération efficace des données des services web distants.
Tri
Triez les lignes soit par ordre croissant soit par ordre décroissant par rapport à une colonne en cliquant simplement sur l’en-tête. 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 basée sur les besoins de l’application.
Filtrage
Le filtrage aide à visualiser des enregistrements particuliers ou liés qui répondent à des critères donnés dans la grille de données. La grille de données prend en charge différents types de filtres, notamment de puissants filtres similaires à Excel. Choisissez le type de filtre approprié, définissez votre propre logique de filtrage personnalisée et personnalisez l’interface utilisateur de filtrage selon les besoins de l’application. Les caractères diacritiques peuvent également être filtrés.
Sélection
Sélectionnez les lignes ou cellules en utilisant la case à cocher ou en cliquant simplement dessus. Sélectionnez plus d’une ligne ou cellule en maintenant Ctrl, Shift ou Command, ou par programmation.
Édition
L’Angular Data Grid 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 en utilisant des templates selon les besoins de l’application. Avec 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.
Groupement
Groupez les lignes pour afficher les données dans une structure hiérarchique organisée par ordre croissant ou décroissant pour faciliter l’expansion et la réduction des enregistrements. Il y a une option pour grouper les enregistrements de la colonne désirée par simple glisser-déposer de cette colonne dans une zone de dépôt interactive.
Agrégation
Visualisez facilement les agrégats des valeurs des colonnes du Data Grid en utilisant l’option de résumé. 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.
Lignes et colonnes gelées
Les lignes et colonnes gelées sont visibles en haut et à gauche, droite, les deux, ou en position fixe, respectivement, rendant le contenu de grille restant défilable. Cette fonctionnalité est principalement utilisée pour comparer les valeurs des cellules.
En-tête collant
L’en-tête de l’Angular Data Grid doit être dans une position fixe lors du défilement vertical du document pour visualiser le contenu de la grille avec l’en-tête de colonne.
Glisser-déposer de lignes
L’Angular Grid permet aux utilisateurs de glisser et déposer des lignes vers un autre Data Grid ou composant personnalisé. Les utilisateurs peuvent également glisser et déposer des lignes au sein de la même Data Grid en utilisant l’icône de glissement et transférer des lignes entre différents groupes.
Grid Maître-détail
Angular Master Detail Grid est un scénario d’usage où les détails d’un enregistrement sont visualisés dans une grille de données séparée en cliquant sur une ligne particulière.
Gestion d’état
La gestion d’état dans le composant Angular Data Grid vous permet de maintenir l’état de la grille même après une actualisation du navigateur ou lors de la navigation vers une page différente dans la même session de navigateur. Cette fonctionnalité est particulièrement bénéfique pour conserver la configuration et les données de la grille après un rechargement de page.
Mise à jour en temps réel
Le Data Grid met à jour les données en temps réel dans ses cellules à des intervalles de temps spécifiques. Ces mises à jour se produisent sans causer de décalage ou de ralentissement, assurant que le système reste hautement réactif et efficace.
Fonctionnalités supplémentaires
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 selon les 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 des données des lignes ou cellules sélectionnées dans celui-ci. Les combinaisons de touches Ctrl+C et Ctrl+Shift+H copient les données avec et sans en-têtes, respectivement.
Menu contextuel
Effectue diverses actions dans un Data Grid en utilisant le menu popup qui apparaît lorsque la cellule, l’en-tête ou le pageur est cliqué avec le bouton droit. En plus des éléments de menu par défaut intégrés, des éléments de menu contextuel personnalisés peuvent être ajoutés.
Largeur et hauteur
Définissez les propriétés de largeur et hauteur pour changer la taille de la grille de données. Lorsque le contenu déborde de l’élément grille, des barres de défilement horizontales et verticales apparaîtront. Pour remplir le conteneur parent du data grid, définissez simplement la hauteur et la largeur à 100%.
En-têtes empilés
Les en-têtes empilés permettent de grouper et visualiser les en-têtes de colonnes de manière empilée. Le nombre de colonnes qui peuvent être empilées est illimité. Effectuez toutes les actions Data Grid même lorsque les colonnes sont empilées.
Accessibilité
Navigation au clavier
Le composant Angular Grid garantit que chaque cellule est accessible en utilisant le clavier. Les fonctionnalités principales comme le tri, la sélection et l’édition peuvent être effectuées en utilisant uniquement les commandes du clavier ; aucune interaction de souris n’est requise. Cela aide à créer des applications hautement accessibles en utilisant ce composant.
Lecteur d’écran
La vue Angular Data Grid a un support d’accessibilité WAI-ARIA complet. Son interface utilisateur inclut des éléments visuels à haut contraste qui aident les personnes malvoyantes à avoir la meilleure expérience de visualisation. De plus, des descriptions d’interface utilisateur valides sont facilement accessibles par des technologies d’assistance telles que les lecteurs d’écran.
Droite à gauche (RTL)
Le rendu de droite à gauche permet d’afficher le texte et la disposition du Data Grid de droite à gauche. Cela améliore l’expérience utilisateur et l’accessibilité pour les langues RTL.
Optimisé mobile et convivial au toucher
Le composant Data Grid améliore l’utilisabilité et fournit un design optimisé et responsive pour les ordinateurs de bureau, écrans tactiles et téléphones sur tous les systèmes d’exploitation, y compris iOS, Android et Windows.
Support tactile
Des gestes tactiles conviviaux et un design d’interface utilisateur interactive fournissent la meilleure expérience utilisateur. Toutes les fonctionnalités Data Grid fonctionnent sur les appareils tactiles avec une configuration zéro.
Pageur responsive
Le pageur Data Grid agit intelligemment et change complètement son interface utilisateur de manière responsive selon la dimension. Son design optimisé fournit la meilleure interaction d’interface utilisateur sur différents appareils.
Compatibilité des versions Angular
Avec l’amélioration continue des versions Angular, l’Angular Data Grid est maintenu à jour pour le rendre compatible avec les versions à partir de la 4 jusqu’à la dernière version.
Autres frameworks pris en charge
Le Data Grid est disponible pour les frameworks Blazor, React, JavaScript et Vue. Explorez ses options spécifiques à la plateforme via les liens suivants :
Navigateurs pris en charge
L’Angular Data Grid fonctionne bien avec tous les navigateurs web modernes, y compris Chrome, Firefox, Edge, Safari et Opera.
Vous ne savez pas comment créer votre premier Angular Grid ? Nos vidéos tutorielles et notre documentation peuvent vous aider.
J’aimerais le regarder maintenant J’aimerais le lire maintenantPlus de 145+ composants d'interface utilisateur Angular
TOUS LES COMPOSANTS
Composants intelligents
Grilles
Visualisation des données
Listes déroulantes
Visionneuses et éditeurs de fichiers
Boutons
Chat interactif
Champs de saisie
Navigation
Formulaires
Notifications
Foire aux questions
Pourquoi devriez-vous choisir Syncfusion Essential Studio® Angular Data Grid ?
Le Syncfusion Data Grid est le meilleur Angular Data Grid qui offre les fonctionnalités suivantes :
Chargez des millions d’enregistrements en seulement une seconde.
- Design mobile-first qui s’adapte à toute résolution.
Liaison de données flexible avec support pour utiliser des sources de données locales et distantes telles que JSON, services RESTful, services OData et services WCF.
Édition flexible et modes de sélection d’enregistrements intuitifs.
Options de filtrage similaire à Excel et de groupement prêtes à l’emploi.
Personnalisations de colonnes innombrables et résumés de données.
Options d’exportation de données transparentes comme PDF, CSV et Excel.
- L’un des meilleurs Angular Data Grid du marché qui offre une interface utilisateur riche en fonctionnalités pour interagir avec le logiciel.
Configuration simple et API.
- Prend en charge tous les navigateurs modernes.
Ressources d’apprentissage étendues telles que démos, documentation et vidéos pour apprendre rapidement et commencer avec Angular Data Grid.
Quel est le prix du Syncfusion Angular Data Grid ?
Nous ne vendons pas l’Angular Data Grid séparément. Il n’est disponible à l’achat que dans le cadre de la licence d’équipe Syncfusion. Cela contient plus de 1,600 composants et frameworks, y compris l’Angular Data Grid. Le prix de la licence d’équipe commence à 395 $ par mois pour 5 développeurs et inclut le support et les mises à jour jusqu’à l’expiration de l’abonnement. De plus, nous pourrions offrir des remises basées sur les promotions actuellement actives. Veuillez contacter nos spécialistes produit aujourd’hui pour voir si vous êtes admissible à des remises supplémentaires.
Où puis-je trouver la démo Syncfusion Angular Grid ?
Vous pouvez trouver notre démo Angular Grid, qui démontre comment rendre et configurer le Grid.
Quelle est la différence entre Angular Grid et Angular Data Grid ?
L’Angular Grid est une implémentation de tableau basique (comme table ou *ngFor), tandis que l’Angular Data Grid (comme le Grid Angular de Syncfusion) offre des fonctionnalités avancées comme le tri, le filtrage, la virtualisation et l’édition en ligne pour la gestion de données complexes. Le grid de Syncfusion est optimisé pour la haute performance et l’évolutivité dans les applications d’entreprise.
Puis-je acheter le composant Syncfusion Angular Grid séparément ?
Non, nos 1,600+ composants et frameworks pour web, mobile et bureau, y compris notre Angular Data Grid, ne sont pas vendus individuellement. Ils ne sont disponibles que dans le cadre d’une licence d’équipe. Cependant, nous avons fixé le prix du produit de manière compétitive, donc il ne coûte qu’un peu plus que ce que certains autres fournisseurs facturent pour leur composant Data Grid seul. Nous avons également constaté que, selon notre expérience, nos clients commencent généralement par utiliser un de nos produits puis s’étendent rapidement à plusieurs produits, donc nous avons jugé qu’il était préférable d’offrir tous les 1,600+ composants et frameworks pour un tarif d’abonnement qui commence à 395 $ par mois pour une équipe de 5 développeurs. De plus, nous pourrions être en mesure d’offrir des remises basées sur les promotions actuellement actives. Veuillez contacter nos spécialistes produit aujourd’hui pour voir si vous êtes admissible à des remises supplémentaires.
Puis-je télécharger et utiliser le Syncfusion Angular Data Grid gratuitement ?
Non, c’est un produit commercial qui nécessite une licence payante. Cependant, une licence communautaire gratuite est également disponible pour les entreprises et individus dont les organisations ont moins de 1 million USD de revenus bruts annuels et cinq développeurs ou moins.
Comment commencer avec Syncfusion Angular Grid ?
Un bon endroit pour commencer serait notre documentation complète de prise en main.
Qu’est-ce qu’un Angular Data Grid ?
Un Angular Data Grid est un composant de tableau avancé conçu pour afficher et gérer efficacement de gros jeux de données. Ses fonctionnalités incluent le tri, le filtrage, la pagination et les mises à jour en temps réel. Des bibliothèques comme Syncfusion améliorent les performances avec des fonctions similaires à Excel, le traitement côté serveur et une intégration transparente avec Angular.
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
Superior components:any day anytime
Essential Studio is one of a kind. The fact that they give us the community developer license has always shown how much they value the small teams creating their own startups. Essential Studio has helped a lot in my almost ready business intelligence platform for the healthcare industry. The grid and the kanban components are what made us fall in love with all the other components.
Kelvin M.
Software Development Engineer
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 Syncfusion Angular Data Grid
Kits UI
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 tutoriels et blogs Angular Data Grid
Les vidéos tutorielles et les articles de blog Angular Data Grid vous guideront dans la construction de votre première application avec les composants Angular. Ils fournissent des stratégies de résolution de problèmes, décrivent les fonctionnalités et fonctionnalités, annoncent les nouvelles versions de fonctionnalités, expliquent les meilleures pratiques et présentent des scénarios d’exemple. Explorez nos derniers articles sur notre blog et chaînes de vidéos tutorielles pour les mises à jour Angular Data Grid.
BLOG
1ER JANVIER 2024
BLOG
19 NOVEMBRE 2024
