ag grid Download - ag grid Quellcode herunterladen

ag grid

Anderer Quellcode

Herunterladen

JavaScript-Datenraster | JavaScript-Tabelle

AG Grid-Logo

? Website • ? Dokumentation • ?️ Community

GitHub-Forks

AG Grid ist ein voll funktionsfähiges und hochgradig anpassbares JavaScript-Datenraster. Es bietet eine hervorragende Leistung , weist keine Abhängigkeiten von Drittanbietern auf und bietet Unterstützung für Reagieren , Eckig und Vue .

Überblick

Inhaltsverzeichnis

JavaScript-Datenraster | JavaScript-Tabelle

Unternehmensunterstützung
Fehlerberichte
Fragen
Mitwirken
Tools und Erweiterungen
Vitrine
Sterngucker
Benutzerdefinierte Komponenten
Themen
Benutzerdefinierte Themen
Installation
Aufstellen
Seed-Projekte
Merkmale
Beispiele
? Überblick
⚡️ Schnellstart
?️ Anpassungen
? Gemeinschaft
? Unterstützung
⚠️
Lizenz

AG Grid ist in zwei Versionen verfügbar: Community und Enterprise.

ag-grid-community ist kostenlos, unter der MIT-Lizenz verfügbar und verfügt über alle Kernfunktionen, die von einem JavaScript-Datengrid erwartet werden, einschließlich Sortierung, Filterung, Paginierung, Bearbeitung, benutzerdefinierte Komponenten, Theming und mehr.
ag-grid-enterprise ist unter einer kommerziellen Lizenz erhältlich und verfügt über erweiterte Funktionen wie integrierte Diagrammerstellung, Zeilengruppierung, Aggregation, Pivoting, Master/Detail, serverseitiges Zeilenmodell und Export sowie engagierten Support durch unser Engineering-Team.

Merkmale

Besonderheit	AG Grid Community	AG Grid Enterprise
Filtern	✅	✅ (Fortgeschritten)
Sortierung	✅	✅
Zellbearbeitung	✅	✅
CSV-Export	✅	✅
Drag & Drop	✅	✅
Themen und Styling	✅	✅
Auswahl	✅	✅
Zugänglichkeit	✅	✅
Unendliches Scrollen	✅	✅
Pagination	✅	✅
Serverseitige Daten	✅	✅ (Fortgeschritten)
Benutzerdefinierte Komponenten	✅	✅
Integriertes Diagramm	❌	✅
Bereichsauswahl	❌	✅
Zeilengruppierung und Aggregation	❌	✅
Schwenkbar	❌	✅
Excel-Export	❌	✅
Zwischenablageoperationen	❌	✅
Meister/Detail	❌	✅
Baumdaten	❌	✅
Spaltenmenü	❌	✅
Kontextmenü	❌	✅
Werkzeugtafeln	❌	✅
Unterstützung	❌	✅

ℹ️ Hinweis:
Besuchen Sie die Preisseite für einen vollständigen Vergleich.

Beispiele

Wir haben mehrere Demos erstellt, um den umfangreichen Funktionsumfang von AG Grid für verschiedene Anwendungsfälle zu demonstrieren. Sehen Sie sie unten in Aktion oder interagieren Sie mit ihnen auf unserer Demoseite.

Finanzdemo

Beispiel für Finanzdaten mit Live-Updates und Sparklines:

Live-Demo • Quellcode

Inventar-Demo

Beispiel für Bestandsdaten zum Anzeigen und Verwalten von Produkten:

Live-Demo • Quellcode

HR-Demo

Beispiel für HR-Daten, das hierarchische Mitarbeiterdaten zeigt:

Live-Demo • Quellcode

⚡️ Schnellstart

AG Grid ist einfach einzurichten – Sie müssen lediglich Ihre Daten bereitstellen und Ihre Spaltenstruktur definieren. Lesen Sie weiter, um Anweisungen zur Installation von Vanilla-JavaScript zu erhalten, oder sehen Sie sich unsere Framework-spezifischen Anleitungen an Reagieren , Eckig und Vue.

Installation

 $ npm install --save ag-grid-community

Aufstellen

1. Stellen Sie einen Container bereit

Laden Sie die AG Grid-Bibliothek und erstellen Sie ein Container-Div. Das Div sollte eine Höhe haben, da das Datenraster die Größe des übergeordneten Containers ausfüllt:

 <html lang="en"> <head> <!-- Enthält alle JS & CSS für das JavaScript Data Grid --> <script src="https://cdn.jsdelivr.net/npm/ag-grid-community /dist/ag-grid-community.min.js"></script> </head> <body> <!-- Ihr Data Grid-Container --> <div id="myGrid" style="height: 500px"></div> </body></html>

2. Instanziieren des JavaScript-Datenrasters

Erstellen Sie das Datenraster innerhalb Ihres Container-Div mit createGrid .

 // Grid-Optionen: Enthält alle Data Grid-Konfigurationenconst gridOptions = {};// Ihr Javascript-Code zum Erstellen des Data Gridconst myGridElement = document.querySelector('#myGrid');agGrid.createGrid(myGridElement, gridOptions);

3. Definieren Sie Zeilen und Spalten

 // Rasteroptionen: Enthält alle Datenrasterkonfigurationenconst gridOptions = { // Zeilendaten: Die anzuzeigenden Daten.    rowData: [ { Marke: 'Tesla', Modell: 'Model Y', Preis: 64950, elektrisch: true }, { Marke: 'Ford', Modell: 'F-Series', Preis: 33850, elektrisch: false }, { make: 'Toyota', model: 'Corolla', price: 29600, electric: false }, ], // Spaltendefinitionen: Definiert die anzuzeigenden Spalten.    ColumnDefs: [{ field: 'make' }, { field: 'model' }, { field: 'price' }, { field: 'electric' }],};

ℹ️ Hinweis:
Weitere Informationen zum Erstellen von Datengittern mit AG Grid finden Sie in unserer Dokumentation.

Seed-Projekte

Wir bieten auch Seed-Projekte an, um Ihnen den Einstieg in gängige Konfigurationen zu erleichtern:

Umfeld	Pakete	Module
React App erstellen (CRA)	Pakete	Module
Vite	Pakete	Module
Vite – TypeScript	Pakete	Module
Webpack 5 – TypeScript	Pakete	Module
Webpack 5 – JavaScript	Pakete	Module
Angular CLI	Pakete	Module
Nuxt	Pakete	Module
Vite	Pakete	Module

Anpassungen

AG Grid ist sowohl hinsichtlich des Aussehens als auch der Funktionalität vollständig anpassbar. Es gibt viele Möglichkeiten, das Raster anzupassen, und wir stellen eine Auswahl an Tools zur Verfügung, die Sie bei der Erstellung dieser Anpassungen unterstützen.

Benutzerdefinierte Komponenten

Sie können Ihre eigenen benutzerdefinierten Komponenten erstellen, um das Verhalten des Rasters anzupassen. Sie können beispielsweise anpassen, wie Zellen gerendert werden, wie Werte bearbeitet werden, und auch eigene Filter erstellen.

Es gibt eine Reihe verschiedener Komponententypen, die Sie dem Raster bereitstellen können, darunter:

Zellkomponente: Zum Anpassen des Inhalts einer Zelle.
Kopfzeilenkomponente: Zum Anpassen der Kopfzeile einer Spalte und Spaltengruppen.
Komponente bearbeiten: Zum Anpassen der Bearbeitung einer Zelle.
Filterkomponente: Für benutzerdefinierten Spaltenfilter, der im Spaltenmenü angezeigt wird.
Schwebender Filter: Für einen benutzerdefinierten schwebenden Spaltenfilter, der im Spaltenmenü angezeigt wird.
Datumskomponente: Zum Anpassen der Datumsauswahlkomponente im Datumsfilter.
Ladekomponente: Zum Anpassen der Ladezellenreihe bei Verwendung des serverseitigen Reihenmodells.
Overlay-Komponente: Zum Anpassen von Lade- und No-Zeilen-Overlay-Komponenten.
Statusleistenkomponente: Für benutzerdefinierte Statusleistenkomponenten.
Tool-Panel-Komponente: Für benutzerdefinierte Tool-Panel-Komponenten.
Tooltip-Komponente: Für benutzerdefinierte Zellen-Tooltip-Komponenten.
Menüelementkomponente: Zum Anpassen der in den Spalten- und Kontextmenüs angezeigten Menüelemente.

Um dem Grid einen benutzerdefinierten Zellenrenderer und Filterkomponenten bereitzustellen, erstellen Sie einen direkten Verweis auf Ihre Komponente innerhalb der Eigenschaft gridOptions.columnDefs :

 gridOptions = { columnsDefs: [ { field: 'country', // Die Spalte zum Hinzufügen der Komponente zu cellRenderer: CountryCellRenderer, // Ihr benutzerdefinierter Zellkomponentenfilter: CountryFilter, // Ihre benutzerdefinierte Filterkomponente }, ],};

Themen

AG Grid verfügt über 4 Themen, die jeweils im light und dark verfügbar sind:

Quarz	Material

alpin	Balham

Benutzerdefinierte Themen

Alle AG Grid-Themen können mit der Theming-API angepasst werden, oder Sie können mit Hilfe unseres Theme Builder oder Figma Design System ein neues Thema von Grund auf erstellen.

Gemeinschaft

Tools und Erweiterungen

AG Grid verfügt über eine große und aktive Community, die ein Ökosystem aus Tools, Erweiterungen und Dienstprogrammen von Drittanbietern geschaffen hat, um Sie bei der Erstellung Ihres nächsten Projekts mit AG Grid zu unterstützen, unabhängig davon, welche Sprache oder welches Framework Sie verwenden:

Reagieren • Winkel • TypeScript • Vue • Python • Schlank • SolidJS • .NET • Rost • Laravel

Vitrine

AG Grid wird von Hunderten von Entwicklern auf der ganzen Welt aus fast allen Branchen verwendet. Während die meisten dieser Projekte privat sind, haben wir eine Auswahl von Open-Source-Projekten aus verschiedenen Branchen zusammengestellt, in denen bekannte Namen AG Grid verwenden, darunter JPMorgan , MongoDB und NASA . Besuchen Sie unsere Community Showcase-Seite, um mehr zu erfahren.

Sterngucker

AG Grid wurde 2016 gegründet, erfreut sich stetig steigender Beliebtheit und ist heute Marktführer für Data Grids:

Unterstützung

Unternehmensunterstützung

AG Grid Enterprise-Kunden haben über ZenDesk Zugang zu dediziertem Support, der von unseren Engineering-Teams überwacht wird.

Fehlerberichte

Wenn Sie einen Fehler gefunden haben, melden Sie ihn bitte im Abschnitt „Probleme“ dieses Repositorys.

Fragen

Suchen Sie auf StackOverflow nach ähnlichen Problemen, indem Sie das Tag ag-grid verwenden. Wenn nichts damit zusammenhängt, posten Sie dort eine neue Nachricht. Bitte nutzen Sie GitHub Issues nicht, um Fragen zu stellen.

Mitwirken

AG Grid wird von einem Team von Entwicklern am selben Standort in London entwickelt. Wenn Sie dem Team beitreten möchten, senden Sie Ihre Bewerbung an [email protected].

⚠️ Lizenz

ag-grid-community ist unter der MIT -Lizenz lizenziert.

ag-grid-enterprise verfügt über eine kommerzielle Lizenz.

Weitere Informationen finden Sie in der LICENSE-Datei.

AG-Charts

Wenn Sie es bis hierher geschafft haben, könnte Sie unser neuestes Projekt interessieren: AG Charts – Die beste JavaScript-Diagrammbibliothek der Welt.

Ursprünglich für den Betrieb von Integrated Charts in AG Grid entwickelt, haben wir dieses Projekt 2018 als Open-Source-Lösung veröffentlicht. Da die Beliebtheit seitdem stetig zugenommen hat, haben wir beschlossen, in AG Charts mit einer speziellen Enterprise-Version ( ag-charts-enterprise ) zu investieren Zusätzlich zu unserer kontinuierlichen Unterstützung der ag-charts-community .