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 ist eine React-Datengitter-Komponente und ein tabellarischer Editor, der eine interaktive Tabellenkalkulations-Schnittstelle bietet. Er ist für die Verwaltung tabellarischer Daten mit integrierter Unterstützung für Zellbearbeitung und Tastaturnavigation konzipiert. Das Projekt zeichnet sich durch seine Flexibilität in Rendering und Struktur aus, was den Austausch von Standard-Tabellenelementen durch benutzerdefiniertes Markup wie Listen oder Divs ermöglicht. Es unterstützt benutzerdefiniertes Zell-Rendering durch ein Mapping-System, das Standardzellen basierend auf Zellmetadaten durch spezialisierte Komponenten ersetzt. Die Komponente deckt breite Funktionen für das Management tabellarischer Daten ab, einschließlich Zustandsverfolgung für Bearbeitungen, Bereichslöschungen und das Einfügen von Daten. Sie bietet zudem Steuerelemente für das Zellverhalten, wie z. B. die Definition des Read-Only-Status und das Spanning von Spalten.

Glide Data Grid ist ein virtualisiertes Datengitter für React und TypeScript, das die HTML Canvas API nutzt, um Millionen von Zellen flüssig darzustellen. Es ist als barrierefreie Datentabelle konzipiert, die auch bei der Anzeige und Navigation durch riesige Datensätze hohe Bildraten beibehält. Das Projekt zeichnet sich durch eine Canvas-basierte Rendering-Architektur aus, die Lazy Rendering und eine benutzerdefinierte Zeichen-API verwendet. Dies ermöglicht spezialisierte Zellinhalte und datengesteuertes Styling, das Standard-DOM-Update-Zyklen umgeht, um eine hohe Performance zu gewährleisten. Das Gitter bietet umfassende Layout- und Datenverwaltungsfunktionen, einschließlich Zellzusammenführung, fixierter Spalten, variabler Zeilenhöhen und automatischer Spaltenbreitenberechnung. Es enthält zudem integrierte Unterstützung für Zellbearbeitung, Elementauswahl und Datensuche innerhalb des Gitters.

Grid.js ist eine framework-agnostische JavaScript-Bibliothek für das Rendern interaktiver Datengitter. Sie ermöglicht die Anzeige strukturierter Informationen in tabellarischen Formaten über verschiedene Frontend-Umgebungen hinweg und unterstützt die Datenbefüllung aus statischen Arrays oder JSON-Importen. Die Bibliothek verfügt über ein Plugin-System zur Erweiterung von Benutzeroberflächenkomponenten und Logik sowie über eine benutzerdefinierte Datenpipeline zur Transformation von Informationen vor der Anzeige. Sie enthält integrierte Unterstützung für mehrsprachige Lokalisierung, um Schnittstellenelemente und Nachrichten zu übersetzen. Das Projekt deckt grundlegende Datenvisualisierungsfunktionen ab, einschließlich Sortierung, Filterung und dynamischer Gittervisualisierung. Es bietet Tools zur Verwaltung von Konfigurationseinstellungen und zur Integration in verschiedene JavaScript-Umgebungen.

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 ist eine JavaScript-Bibliothek für das Rendern und Verwalten interaktiver, hierarchischer Datenstrukturen in Web-Interfaces. Sie bietet ein Framework für die Darstellung komplexer verschachtelter Informationen als Baumansichten oder Raster und unterstützt sowohl Standard-Baumnavigation als auch tabellarische Datenlayouts. Die Bibliothek zeichnet sich durch eine modulare Plugin-Architektur aus, die es Entwicklern ermöglicht, benutzerdefinierte Verhaltensweisen und visuelle Elemente in den Komponenten-Lebenszyklus zu injizieren. Sie handhabt große Datensätze durch die Implementierung von On-Demand-Lazy-Loading, das Kindknoten nur bei Bedarf abruft, um die Reaktionsfähigkeit zu wahren. Benutzer können mit den Daten durch Drag-and-Drop-Neuanordnung, Inline-Knotenbearbeitung und Multi-Knoten-Auswahl mit automatischer Status-Propagierung interagieren. Über das grundlegende Rendering hinaus enthält das Projekt umfassende Tools für State-Management und Datenmanipulation. Es unterstützt Echtzeit-Inhaltsfilterung, Tastaturnavigation und die Persistenz von Knoten-Erweiterungs- und Auswahlstatus über Browsersitzungen hinweg. Die Bibliothek basiert auf einem System rekursiver Datennormalisierung und Event-Delegation, um eine konsistente Leistung und Interaktionshandhabung über verschiedene hierarchische Konfigurationen hinweg sicherzustellen.

Diese Bibliothek ist eine React-Komponente für das Rendering von Hochleistungs-Datengittern. Sie bietet ein strukturiertes Framework zur Anzeige großer Datensätze durch die Nutzung von Fenster-basierter Zeilen-Virtualisierung, die sicherstellt, dass nur der sichtbare Teil der Daten im Document Object Model (DOM) gerendert wird. Die Komponente zeichnet sich durch fortschrittliche Layout- und Navigationsfunktionen aus, einschließlich nativer Unterstützung für Sticky-Header und Spalten, die beim Scrollen verankert bleiben. Entwickler können imperative Kontrolle über den Tabellen-Viewport ausüben, um zu bestimmten Indizes oder Pixel-Offsets zu navigieren, während komplexe Grid-Zustände wie Spaltensichtbarkeit, Sortierung und Zeilenerweiterung über eine zentrale Konfiguration verwaltet werden. Die Bibliothek unterstützt eine breite Palette interaktiver Funktionen, einschließlich benutzerdefiniertem Zell-Rendering, Spalten-Pinning und der Möglichkeit, Zusammenfassungszeilen für aggregierte Daten anzuhängen. Sie verarbeitet dichte Informationssätze durch flexible Spaltenausrichtung, Breitensteuerung und Textkürzung, was die Erstellung interaktiver Tabellen ermöglicht, die auf Benutzerereignisse wie Klicks und Hover reagieren.

This project is a high-performance data grid component for React designed to render large datasets within a spreadsheet-style interface. It provides a framework for displaying structured tabular information while enabling complex cell-based interactions and data management tasks. The component distinguishes itself through its support for spreadsheet-like editing workflows, including keyboard-driven navigation and the ability to inject custom components into individual cells. Users can dynamically manage the grid layout by resizing columns and organizing headers, ensuring the interface adapts

Diese Bibliothek ist eine leistungsstarke Datengrid-Komponente für React-Anwendungen, die für die Verwaltung und Anzeige großer Datensätze konzipiert ist. Sie bietet ein deklaratives Konfigurationssystem, das es Entwicklern erlaubt, Tabellenstrukturen, Datenquellen und Feature-Toggles über ein strukturiertes Objektschema zu definieren. Die Bibliothek zeichnet sich durch eine flexible Layout-Engine aus, die komplexe UI-Anforderungen unterstützt, wie das Anheften von Headern und spezifischen Spalten an Viewport-Ränder während des Scrollens. Sie nutzt virtualisiertes Rendering, um die Interface-Reaktionsfähigkeit zu wahren, indem nur die sichtbare Teilmenge der Daten angezeigt wird, was eine konsistente Leistung unabhängig von der Gesamtzahl der Elemente sicherstellt. Über ihre Kern-Layout- und Leistungsfunktionen hinaus bietet das Projekt umfangreiche Anpassungsoptionen. Entwickler können benutzerdefinierte React-Komponenten injizieren, um das Erscheinungsbild und Verhalten einzelner Zellen zu definieren, und visuelle Stile über Scoped-CSS-Variablen anwenden, was eine maßgeschneiderte Datenpräsentation ohne Modifikation der internen Komponentenlogik ermöglicht.