Awesome GitHub RepositoriesData Grid Components

MUI X is a collection of advanced React UI components for building data-rich applications, including a data grid, charting library, date and time pickers, scheduler, and tree view. The library is built with accessibility as a core principle, ensuring all components meet WCAG and WAI-ARIA standards for keyboard navigation and screen reader announcements. The components are designed for extensibility and performance. The data grid offers comprehensive data management with sorting, filtering, pagination, column pinning, row grouping, inline editing, and Excel export. The charting library support

react-datasheet est un composant de grille de données et éditeur tabulaire pour React qui fournit une interface de feuille de calcul interactive. Il est conçu pour gérer des données tabulaires avec un support intégré pour l'édition de cellules et la navigation au clavier. Le projet se distingue par sa flexibilité dans le rendu et la structure, permettant le remplacement des éléments de table standard par du balisage personnalisé comme des listes ou des divs. Il supporte le rendu de cellules personnalisé via un système de mapping qui échange les cellules par défaut avec des composants spécialisés basés sur les métadonnées de la cellule. Le composant couvre de larges capacités pour la gestion de données tabulaires, incluant le suivi d'état pour les modifications, les suppressions de plages et le collage de données. Il fournit également des contrôles pour le comportement des cellules, comme la définition du statut en lecture seule et la fusion de colonnes.

Glide Data Grid est une grille de données virtualisée pour React et TypeScript qui utilise l'API HTML Canvas pour afficher des millions de cellules de manière fluide. Il est conçu comme une table de données accessible qui maintient des fréquences d'images élevées lors de l'affichage et de la navigation dans des jeux de données massifs. Le projet se distingue par une architecture de rendu basée sur le canvas qui utilise le rendu différé (lazy rendering) et une API de dessin personnalisée. Cela permet un contenu de cellule spécialisé et un stylisme piloté par les données qui contourne les cycles de mise à jour DOM standard pour garantir une haute performance. La grille fournit des capacités complètes de mise en page et de gestion de données, incluant la fusion de cellules, les colonnes figées, les hauteurs de ligne variables et le calcul automatique de la largeur des colonnes. Elle inclut également un support intégré pour l'édition de cellules, la sélection d'éléments et la recherche dans les données de la grille.

Grid.js est une bibliothèque JavaScript agnostique aux frameworks pour le rendu de grilles de données interactives. Elle permet l'affichage d'informations structurées sous forme tabulaire dans différents environnements frontend, prenant en charge le peuplement des données à partir de tableaux statiques ou d'importations JSON. La bibliothèque dispose d'un système de plugins pour étendre les composants et la logique de l'interface utilisateur, ainsi qu'un pipeline de données personnalisé pour transformer les informations avant leur affichage. Elle inclut un support intégré pour la localisation multilingue afin de traduire les éléments d'interface et les messages. Le projet couvre les capacités fondamentales de visualisation de données, notamment le tri, le filtrage et la visualisation dynamique de grilles. Il fournit des outils pour gérer les paramètres de configuration et s'intégrer avec divers environnements JavaScript.

Vue-easytable is a high-performance data grid component designed for the Vue.js framework. It provides a comprehensive interface for displaying and managing large-scale tabular data, utilizing virtual scrolling to maintain responsiveness by rendering only the visible subset of rows within the browser. The component offers spreadsheet-style interaction, enabling users to perform direct, in-place data editing and manipulation. It supports complex grid configurations, including column pinning, row expansion, and data filtering, allowing for the organization of structured information to improve r

Fancytree est une bibliothèque JavaScript conçue pour rendre et gérer des structures de données hiérarchiques interactives au sein d'interfaces web. Elle fournit un framework pour afficher des informations imbriquées complexes sous forme d'arborescences ou de grilles, prenant en charge à la fois la navigation standard dans l'arborescence et les mises en page de données tabulaires. La bibliothèque se distingue par une architecture de plugin modulaire qui permet aux développeurs d'injecter des comportements et des éléments visuels personnalisés dans le cycle de vie du composant. Elle gère les grands ensembles de données en implémentant un chargement paresseux à la demande, qui récupère les nœuds enfants uniquement lorsque nécessaire pour maintenir la réactivité. Les utilisateurs peuvent interagir avec les données via le glisser-déposer, l'édition de nœuds en ligne et la sélection multi-nœuds avec propagation automatique de l'état. Au-delà du rendu de base, le projet inclut des outils complets pour la gestion d'état et la manipulation de données. Il prend en charge le filtrage de contenu en temps réel, la navigation au clavier et la persistance des états d'expansion et de sélection des nœuds à travers les sessions de navigateur. La bibliothèque est construite sur un système de normalisation récursive des données et de délégation d'événements pour garantir des performances et une gestion des interactions cohérentes à travers diverses configurations hiérarchiques.

Cette bibliothèque est un composant React conçu pour le rendu de grilles de données haute performance. Elle fournit un framework structuré pour afficher de grands jeux de données en utilisant la virtualisation des lignes basée sur la fenêtre, ce qui garantit que seule la portion visible des données est rendue dans le modèle objet du document (DOM). Le composant se distingue par des capacités avancées de mise en page et de navigation, incluant la prise en charge native des en-têtes et colonnes fixes qui restent ancrés pendant le défilement. Les développeurs peuvent exercer un contrôle impératif sur la fenêtre d'affichage de la table pour naviguer vers des indices ou des décalages de pixels spécifiques, tout en gérant des états de grille complexes tels que la visibilité des colonnes, le tri et l'expansion des lignes via une configuration centralisée. La bibliothèque prend en charge un large éventail de fonctionnalités interactives, incluant le rendu de cellules personnalisé, l'épinglage de colonnes et la possibilité d'ajouter des lignes de résumé pour les données agrégées. Elle gère les jeux d'informations denses en offrant un alignement de colonne flexible, un contrôle de largeur et une troncature de texte, permettant la création de tables interactives qui répondent aux événements utilisateur comme les clics et les survol de souris.

Ce projet est un composant de grille de données haute performance pour React, conçu pour rendre de grands jeux de données au sein d'une interface de type tableur. Il fournit un framework pour afficher des informations tabulaires structurées tout en permettant des interactions complexes basées sur les cellules et des tâches de gestion de données. Le composant se distingue par sa prise en charge des flux de travail d'édition de type tableur, incluant la navigation au clavier et la possibilité d'injecter des composants personnalisés dans des cellules individuelles. Les utilisateurs peuvent gérer dynamiquement la mise en page de la grille en redimensionnant les colonnes et en organisant les en-têtes, garantissant que l'interface s'adapte aux besoins spécifiques de visualisation de données. La grille inclut des capacités pour gérer de grands volumes d'informations via le rendu fenêtré et le chargement paresseux (lazy loading), qui maintiennent les performances en ne traitant que le sous-ensemble visible de données. Elle offre également un contrôle impératif via des références de composants, permettant la manipulation programmatique des positions de défilement et des états de sélection.

Cette bibliothèque est un composant de grille de données haute performance pour les applications React, conçu pour gérer et afficher de grands jeux de données. Elle fournit un système de configuration déclaratif qui permet aux développeurs de définir des structures de tableaux, des sources de données et des bascules de fonctionnalités via un schéma d'objet structuré. La bibliothèque se distingue par un moteur de mise en page flexible qui prend en charge des exigences d'interface utilisateur complexes, telles que l'épinglage des en-têtes et de colonnes spécifiques aux bords de la fenêtre d'affichage lors du défilement. Elle utilise un rendu virtualisé pour maintenir la réactivité de l'interface en affichant uniquement le sous-ensemble visible de données, garantissant des performances cohérentes quel que soit le nombre total d'éléments. Au-delà de ses capacités de mise en page et de performance de base, le projet offre des options de personnalisation étendues. Les développeurs peuvent injecter des composants React personnalisés pour définir l'apparence et le comportement des cellules individuelles et appliquer des styles visuels via des variables CSS à portée, permettant une présentation de données sur mesure sans modifier la logique interne des composants.