JavaScript Data Grid – DataGrid HTML5 ultra-rapide
- Charge des millions de données instantanément.
- Design mobile-first pour toutes résolutions.
- Édition flexible & filtrage façon Excel.
- Export simple en PDF, CSV et Excel.
Quick Overview Video
Trusted by the world’s leading companies
Aperçu
JavaScript Data Grid, également connu sous le nom de JavaScript DataGrid, est un contrôle riche en fonctionnalités permettant d’afficher des données sous forme de tableau. Sa large gamme de fonctionnalités inclut la liaison de données, l’édition, le filtrage de type Excel, le tri personnalisé, l’agrégation de lignes, la sélection, ainsi que la prise en charge des formats Excel, CSV et PDF.
Pourquoi choisir JavaScript DataGrid de Syncfusion?
Haute performance
Des efforts bien pensés, axés principalement sur des performances rapides pour charger des millions d’enregistrements en une seconde.
Liaison de données fluide
Liez les données de manière fluide avec diverses sources de données locales et distantes telles que JSON, OData, WCF et les services web RESTful grâce au gestionnaire de données.
S’adapte à toutes les résolutions
DataGrid dispose d’une mise en page hautement réactive et d’un design optimisé pour les ordinateurs de bureau, les écrans tactiles et les smartphones. Il fonctionne parfaitement sur tous les téléphones mobiles utilisant iOS, Android ou Windows OS.
Édition flexible
Le JavaScript Grid effectue les opérations créer, lire, mettre à jour et supprimer (CRUD) plus facilement avec une liste d’objets métier ou un service de données distant grâce au gestionnaire de données.
Créez vos propres modèles
Permet aux utilisateurs de créer des expériences personnalisées dans JavaScript Grid selon les besoins de leur application en utilisant une large gamme d’options de modèles.
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 encore. 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, y compris Excel, PDF et CSV. Imprimez toutes les lignes, quel que soit le nombre de pages, ainsi que la page actuellement affichée.
Globalisation et localisation
Permet aux utilisateurs de différentes régions de les utiliser en formatant les dates, la monnaie et la numérotation selon leurs préférences.
Exemple de code JavaScript DataGrid
Commencez facilement avec JavaScript DataGrid en utilisant quelques lignes simples de code HTML et TS comme démontré ci-dessous. Explorez également notre exemple JavaScript DataGrid qui vous montre comment afficher et configurer un DataGrid en JavaScript.
<div class="control-section">
<div class="content-wrapper">
<div id="Grid">
</div>
</div>
</div>import { loadCultureFiles } from '../common/culture-loader';
import { Grid, Selection } from '@syncfusion/ej2-grids';
import { Query, DataManager } from '@syncfusion/ej2-data';
import { orderData } from './data-source';
Grid.Inject(Selection);
/**
* Default Grid sample
*/
loadCultureFiles();
let data: Object = new DataManager(orderData as JSON[]).executeLocal(new Query().take(15));
let grid: Grid = new Grid(
{
dataSource: data,
columns: [
{ field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },
{ field: 'CustomerName', headerText: 'Customer Name', width: 150 },
{ field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' },
{ field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' },
{ field: 'ShippedDate', headerText: 'Shipped Date', width: 140, format: 'yMd', textAlign: 'Right' },
{ field: 'ShipCountry', headerText: 'Ship Country', width: 150 }
]
});
grid.appendTo('#Grid');
Indicateur de chargement skeleton
Le Data Grid affiche l’effet Shimmer comme indicateur de chargement lors de la récupération des données et de leur liaison à la grille pendant le rendu initial, le rafraîchissement ou après avoir effectué des actions telles que le tri, le filtrage, le regroupement, etc. Le Data Grid propose deux types d’indicateurs de chargement : le spinner et le shimmer.
Disposition d’interface utilisateur adaptative
L’interface utilisateur du Data Grid est personnalisée et repensée pour une excellente visibilité et convivialité sur les petits écrans. Ses fonctionnalités incluent le filtre, le tri, la recherche, le sélecteur de colonnes, le menu de colonnes, le menu déroulant du pager et les boîtes de dialogue d’édition qui s’adaptent à la taille de l’écran et affichent les éléments de ligne verticalement.
Colonne
Les colonnes définissent le schéma de la source de données dans JavaScript DataGrid. 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 retour à la ligne, le sélecteur de colonnes, le menu de colonnes et d’autres fonctionnalités.
Pagination
La pagination est utilisée pour afficher un segment de données provenant de la source de données assignée. Le JavaScript Data Grid propose une interface de pagination intégrée avec des options pour personnaliser toute son interface. Il dispose également d’un mode de pagination à la demande pour une récupération efficace des données à partir de services web distants.
Tri
Triez les lignes par ordre croissant ou 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 enfoncée + clic sur l’en-tête. De plus, vous pouvez définir votre propre logique de tri personnalisée en fonction des besoins de l’application.
filtrage
Le filtrage permet de visualiser des enregistrements particuliers ou liés qui répondent à un critère donné dans le Data Grid. JavaScript Data Grid prend en charge différents types de filtres, y compris des filtres puissants 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 selon les besoins de l’application. Les caractères diacritiques peuvent également être filtrés.
Sélection
SSélectionnez des lignes ou des cellules en utilisant une case à cocher ou simplement en cliquant dessus. Sélectionnez plusieurs lignes ou cellules en maintenant Ctrl, Maj ou Command, ou de manière programmatique.
Édition
Le JavaScript Data Grid prend en charge les opérations de création, lecture, mise à jour et suppression (CRUD). En plus des composants d’édition intégrés pour modifier la valeur d’une colonne, des composants d’édition personnalisés peuvent être créés à l’aide de modèles selon les besoins de l’application. Grâce au gestionnaire de données, vous pouvez effectuer des opérations d’édition avec une collection de tableaux JavaScript ou un service de données distant.
Regroupement
Regroupez les lignes pour afficher les données dans une structure hiérarchique organisée en ordre croissant ou décroissant afin de faciliter l’expansion et la réduction des enregistrements. Il est possible de regrouper les enregistrements d’une colonne souhaitée par simple glisser-déposer de cette colonne dans une zone interactive.
Agrégation
Les agrégats des valeurs de colonnes peuvent être facilement affichés à l’aide de la fonctionnalité 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 ou des lignes de légende de groupe.
Lignes et colonnes figées
Les lignes et colonnes figées sont visibles en haut et à gauche, à droite, aux deux ou à une position fixe, respectivement, rendant le reste du contenu du grid défilable. Cette fonctionnalité est principalement utilisée pour comparer les valeurs des cellules dans le composant JavaScript DataGrid.
En-tête fixe
L’en-tête du JavaScript Data Grid doit être en position fixe lors du défilement vertical du document afin de visualiser le contenu du grid avec l’en-tête de colonne.
Glisser-déposer de lignes
Le JavaScript Grid permet aux utilisateurs de glisser-déposer des lignes vers un autre DataGrid ou un composant personnalisé. Les utilisateurs peuvent également glisser-déposer des lignes dans le même DataGrid en utilisant l’icône de glissement et transférer des lignes entre différents groupes.
Grid maître-détail
Le JavaScript Master Detail Grid est un scénario d’utilisation dans lequel les détails d’un enregistrement sont affichés dans un grid de données séparé en cliquant sur une ligne particulière.
Gestion d’état
La gestion d’état dans le composant JavaScript Data Grid vous permet de conserver l’état du grid même après un rafraîchissement du navigateur ou lors de la navigation vers une autre page dans la même session. Cette fonctionnalité est particulièrement utile pour conserver la configuration et les données du grid après le rechargement de la 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 provoquer de ralentissement, garantissant que le système reste très réactif et efficace.
Graphiques intégrés avec DataGrid
La grille de données s’intègre au composant graphique, transformant les données sélectionnées en visualisations dynamiques et interactives. Cette combinaison de tableaux et de graphiques permet aux utilisateurs d’obtenir des informations plus claires en un coup d’œil. Les utilisateurs peuvent personnaliser les types de graphiques, les axes et les éléments visuels.
Fonctionnalités supplémentaires
Hauteur de ligne
La hauteur des lignes est un facteur important lors de l’affichage du nombre d’enregistrements dans la zone visible, et elle est facilement personnalisable selon les exigences de l’interface utilisateur de l’application. Il est également possible de définir la hauteur des lignes 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. Utilisez les combinaisons de touches Ctrl+C et Ctrl+Shift+H pour copier les données avec et sans en-têtes, respectivement.
Menu contextuel
Effectue diverses actions dans un JavaScript DataGrid à l’aide du menu contextuel qui apparaît lorsqu’on clique avec le bouton droit sur une cellule, un en-tête ou un élément de pagination. 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 de hauteur pour modifier la taille du data grid. Lorsque le contenu dépasse l’élément de la 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 regrouper et de visualiser les en-têtes de colonnes de manière empilée. Le nombre de colonnes pouvant être empilées est illimité. Effectuez toutes les actions du Data Grid même lorsque les colonnes sont empilées.
Accessibilité
Navigation clavier
Le composant JavaScript Grid garantit que chaque cellule est accessible via le clavier. Les principales fonctionnalités comme le tri, la sélection et l’édition peuvent être effectuées uniquement à l’aide de commandes clavier ; aucune interaction avec la souris n’est requise. Cela permet de créer des applications hautement accessibles avec ce composant.
Lecteur d’écran
L’affichage JavaScript DataGrid prend entièrement en charge l’accessibilité WAI-ARIA. L’interface utilisateur du Data Grid comprend des éléments visuels à contraste élevé qui aident les personnes malvoyantes à bénéficier de la meilleure expérience visuelle. De plus, des descriptions d’interface 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 du JS DataGrid de droite à gauche. Cela améliore l’expérience utilisateur et l’accessibilité pour les langues RTL.
Optimisé pour mobile et convivial
Le composant Data Grid améliore l’utilisabilité et offre un design optimisé et réactif pour les ordinateurs de bureau, les écrans tactiles et les téléphones sur tous les systèmes d’exploitation, y compris iOS, Android et Windows.
Support tactile
Des gestes tactiles conviviaux et une conception d’interface interactive offrent la meilleure expérience utilisateur. Toutes les fonctionnalités du Data Grid HTML5 fonctionnent sur les appareils tactiles sans configuration.
Pagination réactive
Le pager du Data Grid agit intelligemment et modifie entièrement son interface utilisateur de manière réactive en fonction des dimensions. Son design optimisé offre la meilleure interaction utilisateur sur différents appareils.
Autres frameworks pris en charge
La Data Grid est disponible pour les frameworks Blazor, React, Angular et Vue. Découvrez ses options spécifiques à chaque plateforme via les liens suivants :
Navigateurs pris en charge
Le DataGrid HTML5 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 JavaScript DataGrid? Notre documentation peut vous aider.
J’aimerais le lire maintenantPlus de 145+ contrôles d'interface utilisateur JavaScript
TOUS LES CONTROLES
Composants intelligents
Grilles
Visualisation des données
Listes déroulantes
Visionneuses et éditeurs de fichiers
Boutons
Chat interactif
Champs de saisie
Navigation
Formulaires
Notifications
Questions Fréquemment Posées
Pourquoi choisir Syncfusion JavaScript DataGrid?
Le Syncfusion JavaScript DataGrid prend en charge les fonctionnalités suivantes:
Charger des millions d’enregistrements en une seconde.
- Conception mobile-first qui s’adapte à toutes les résolutions.
Liaison de données flexible avec prise en charge 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 intuitifs des enregistrements.
Options de filtrage de type Excel et de regroupement prêtes à l’emploi.
Personnalisations infinies des colonnes et résumés de données.
Options d’exportation de données fluides comme PDF, CSV et Excel.
- L’un des meilleurs JavaScript DataGrid du marché offrant une interface riche en fonctionnalités pour interagir avec le logiciel.
Configuration simple et API.
- Compatible avec tous les navigateurs modernes.
Ressources d’apprentissage étendues telles que démos et documentation pour apprendre rapidement et démarrer avec JavaScript DataGrid.
Quel est le prix du JavaScript DataGrid de Syncfusion?
Nous ne vendons pas le JavaScript DataGrid séparément. Il est uniquement disponible à l’achat dans le cadre de la licence d’équipe Syncfusion. Celle-ci contient plus de 1,600 composants et frameworks, y compris le JavaScript DataGrid. 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 réductions en fonction des promotions en cours. Veuillez contacter nos spécialistes produits dès aujourd’hui pour savoir si vous êtes éligible à des réductions supplémentaires.
Où puis-je trouver la démo du JavaScript DataGrid de Syncfusion?
Vous pouvez consulter notre démo JavaScript DataGrid, qui montre comment afficher et configurer le DataGrid.
Puis-je acheter le composant JavaScript DataGrid de Syncfusion séparément?
Non, nos 1,600+ composants et frameworks pour le web, le mobile et le bureau, y compris notre JavaScript 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, de sorte qu’il coûte à peine plus cher que ce que certains autres fournisseurs facturent pour leur contrôle DataGrid seul. Nous avons également constaté que nos clients commencent généralement par utiliser un de nos produits, puis passent rapidement à plusieurs produits. Nous avons donc estimé qu’il était préférable d’offrir tous les 1,600+ composants et frameworks pour un abonnement à partir de 395 $ par mois pour une équipe de 5 développeurs. De plus, nous pourrions offrir des réductions en fonction des promotions en cours. Veuillez contacter nos spécialistes produits dès aujourd’hui pour savoir si vous êtes éligible à des réductions supplémentaires.
Puis-je télécharger et utiliser gratuitement le JavaScript DataGrid de Syncfusion?
Non, il s’agit d’un produit commercial nécessitant une licence payante. Cependant, une licence communautaire gratuite est également disponible pour les entreprises et les particuliers dont les organisations ont un chiffre d’affaires annuel inférieur à 1 million USD et cinq développeurs ou moins.
Comment démarrer avec le JavaScript DataGrid de Syncfusion?
Un bon point de départ serait notre documentation de démarrage complète.
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
Evalue par des utilisateurs du monde entier.
Ressources JavaScript DataGrid de Syncfusion
UI Kits
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 de JavaScript DataGrid
Les articles de blog sur JavaScript Data Grid vous guideront dans la création de votre première application avec les contrôles JavaScript. Ils proposent 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 nos blogs pour les mises à jour de JavaScript Data Grid.
