Awesome GitHub RepositoriesReact Components

This project is a declarative data visualization library that provides a composable suite of user interface components for rendering interactive charts. It functions as an SVG-based charting engine, allowing developers to construct complex visualizations by nesting modular building blocks such as axes, grids, legends, and data series within a unified layout. The library distinguishes itself through a highly responsive architecture that automatically reconciles layout changes and maps data domains to pixel coordinates using mathematical scale functions. It prioritizes performance through memoi

Nivo is a responsive charting framework and a React data visualization library that uses D3 for its underlying math logic. It serves as both a collection of interactive chart components for web applications and a server-side visualization engine for generating static data chart images. The project distinguishes itself by providing a containerized chart rendering API, allowing the visualization engine to be deployed via Docker to serve rendered graphics as images or files through a programmatic interface. It also features a motion engine for animated data transitions, ensuring smooth visual sh

React DevTools is a set of web browser developer tools integrated into Chrome and Firefox. It functions as a component inspector and UI debugger designed to visualize the component hierarchy and analyze the runtime behavior of React applications. The project includes a performance profiler used to detect unnecessary component re-renders and improve rendering efficiency. It also provides utilities for mapping virtual component trees to the physical DOM and linking rendered UI elements directly to their corresponding source code files and line numbers. The toolset covers component hierarchy vi

react-vis is a declarative, component-based React data visualization library. It provides a framework of reusable building blocks for rendering interactive charts and graphs by mapping raw data to visual attributes such as position, color, and size. The system leverages D3 for its scaling and layout logic. The library is distinguished by its ability to handle complex data relationships, including hierarchical data via tree maps and circle packing, as well as multidimensional analysis using parallel axes and radar charts. It also supports network flow mapping to illustrate the volume and direc

F2 is a cross-platform charting engine and grammar-based visualization tool designed to render interactive data visualizations. It functions as a declarative system that allows users to build complex charts by defining the relationships between data dimensions and visual encoding channels. The framework is specifically optimized for mobile data visualization, providing a toolkit for creating touch-optimized charts. It supports custom data visualization styling, enabling the use of personalized shapes and animations to define a unique visual identity. The engine provides a platform-agnostic r

Penrose is a compiler that transforms structured mathematical notation into optimized SVG diagrams. It uses a three-stage pipeline of separate domain, substance, and style files to define mathematical objects, relationships, and visual presentation, then solves continuous optimization problems with user-defined spatial constraints and objectives to automatically arrange diagram elements. The system separates diagram content from visual style using distinct declarative languages, and provides a typed domain language with subtype hierarchies for mathematical objects. It supports embedding compi

BizCharts is a React charting library that wraps the G2 grammar of graphics, providing declarative React components for building interactive data visualizations. It bridges G2's imperative charting API with React's declarative component model, enabling chart creation through nested component composition without writing imperative code. The library distinguishes itself by mapping G2's grammar of graphics primitives directly to React component types, allowing chart series like line, bar, and scatter to be expressed as interchangeable React components. It synchronizes G2 chart instance creation,

Regulex is a tool that parses regular expressions into interactive syntax diagrams, rendering them directly on an HTML canvas. It converts a regex string into an abstract syntax tree and visualizes the structure as a navigable diagram, making the internal logic of a regular expression visually accessible. Beyond basic visualization, Regulex provides syntax validation that detects and reports precise errors, including invalid back references and octal escapes. It also offers a state-machine visualization mode that maps regex AST nodes to NFA-like states and transitions, rendered as a directed

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.

gluestack-ui is a cross-platform React component library built with Tailwind CSS. It provides over 30 pre-built, accessible components that can be installed by copying their source files directly into a project, giving developers full control over customization without external runtime dependencies. Every component implements WAI-ARIA patterns, keyboard navigation, and screen reader support out of the box. A key differentiator is the copy-paste architecture: rather than a traditional package dependency, component source code is placed in the project, allowing direct editing and eliminating ve

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.

Dies ist eine Guided-Tour-Bibliothek und ein Onboarding-Framework für React-Anwendungen. Es bietet ein System zur Erstellung interaktiver Schritt-für-Schritt-Anleitungen unter Verwendung von elementverankerten Popovers und visuellen Maskierungstools, um spezifische Schnittstellenkomponenten hervorzuheben. Die Bibliothek konzentriert sich auf Barrierefreiheit und bietet integrierte Unterstützung für Screenreader und Tastaturnavigation, um ein inklusives Benutzer-Onboarding zu gewährleisten. Sie ermöglicht eine umfassende Anpassung durch den Austausch von Standard-Schnittstellenelementen, wie Badges und Buttons, durch benutzerdefinierte React-Komponenten. Das Framework deckt die Tour-Orchestrierung durch Zustandsverwaltung und selektorbasiertes Element-Targeting ab. Es enthält Funktionen für automatisches Viewport-Scrolling, Popover-Übergangsmanagement und die Möglichkeit, die Benutzerinteraktion mit der zugrunde liegenden Schnittstelle während eines Rundgangs einzuschränken.

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

🌌 A React toolkit for graph visualization based on G6.

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.