Angular Data Grid – Ein leistungsstarkes Raster für moderne Apps
- Lädt Millionen Datensätze blitzschnell.
- Mobile-First-Design für alle Auflösungen.
- Flexible Bearbeitung & Excel-ähnliche Filter.
- Export in PDF, CSV & Excel leicht gemacht.
Quick Overview Video
Trusted by the world’s leading companies
Angular Data Grid Übersicht
Das Angular Grid ist eine funktionsreiche Datenrasterkomponente zur Anzeige von Daten in einem tabellarischen Format. Die breite Palette an Funktionen umfasst Datenbindung, Bearbeitung, Excel-ähnliche Filterung, benutzerdefinierte Sortierung, Gruppierung, Zeilenneuanordnung, Fixieren von Zeilen und Spalten, Aggregieren von Zeilen und Export in Excel-, CSV- und PDF-Formate.
Warum Syncfusion Essential Studio® Angular Data Grid wählen?
Hohe Leistung
Gut durchdachte Bemühungen und konzentriert sich hauptsächlich auf schnelle Leistung zum Laden von Millionen von Datensätzen in nur einer Sekunde.
Nahtlose Datenbindung
Binden Sie Daten nahtlos mit verschiedenen lokalen und entfernten Datenquellen wie JSON, OData, WCF und RESTful-Webdiensten mit Hilfe des Datenmanagers.
Passt sich jeder Auflösung an
Das Data Grid verfügt über ein hochgradig responsives Layout und ein optimiertes Design für Desktops, Touchscreens und Smartphones. Es funktioniert gut auf allen Mobiltelefonen, die iOS, Android oder Windows OS verwenden.
Flexible Bearbeitung
Das Angular Grid führt Erstellungs-, Lese-, Aktualisierungs- und Löschvorgänge (CRUD) einfacher mit einer Liste von Geschäftsobjekten oder einem entfernten Datendienst mit Hilfe eines Datenmanagers durch.
Erstellen Sie Ihre eigenen Vorlagendesigns
Ermöglicht Benutzern, benutzerdefinierte Benutzeroberflächen im Angular Grid basierend auf ihren Anwendungsbedürfnissen mit einer Vielzahl von Vorlagenoptionen zu erstellen.
Attraktive anpassbare Themes
Spitzendesign mit über 5 integrierten Themes wie Fluent, Tailwind CSS, Bootstrap, Material, Fabric und mehr. Nutzen Sie das Online Theme Studio Tool, um Themes einfach anzupassen.
Einfacher Export und Druck
Exportieren Sie das Data Grid in verschiedenen Dateiformaten, einschließlich Excel, PDF und CSV. Drucken Sie alle Zeilen, unabhängig von der Anzahl der Seiten, sowie die aktuell angezeigte Seite.
Globalisierung und Lokalisierung
Ermöglicht Benutzern aus verschiedenen Regionen die Nutzung durch Formatierung von Daten, Währung und Nummerierung entsprechend den Präferenzen.
AI-Ready Grid Für Unternehmensdatenanalyse
Beschleunigen Sie die Datenanalyse in Angular-Apps mit einem für KI-Verbesserungen entwickelten DataGrid. Integrieren Sie problemlos semantische Suche und Anomalieerkennung für intelligentere Daten-Workflows.
-
Semantische Suche: Verwenden Sie Modelle für die Verarbeitung natürlicher Sprache (NLP), um Benutzern die Suche mit alltäglichen Ausdrücken zu ermöglichen, die Benutzerfreundlichkeit zu verbessern und keine exakten Schlüsselwörter zu erfordern.
- See how to add semantic search
-
Anomalieerkennung: Fügen Sie Machine-Learning-(ML)-Tools hinzu, um Datenanomalien hervorzuheben und automatisch Konsistenz sicherzustellen.
- So fügen Sie Anomalieerkennung hinzu
Angular Data Grid Codebeispiel
Beginnen Sie einfach mit dem Angular Data Grid mit nur wenigen Zeilen HTML- und TS-Code, wie unten gezeigt. Entdecken Sie auch unser Angular Data Grid Beispiel, das Ihnen zeigt, wie Sie ein Data Grid in Angular rendern und konfigurieren.
<div class="control-section">
<ejs-grid [dataSource]='data' height='350'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'/>
<e-column field='CustomerName' headerText='Customer Name' width='150'/>
<e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" textAlign='Right'/>
<e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'/>
<e-column field='ShippedDate' headerText='Shipped Date' width='130' format="yMd" textAlign='Right'/>
<e-column field='ShipCountry' headerText='Ship Country' width='150'/>
</e-columns>
</ejs-grid>
</div>import { Component, OnInit } from '@angular/core';
import { orderDetails } from './data';
@Component({
selector: 'ej2-grid-container',
templateUrl: 'default.html'
})
export class DefaultComponent implements OnInit {
public data: Object[] = [];
ngOnInit(): void {
this.data = orderDetails;
}
}
Skeleton-Ladeanzeige
Das Data Grid zeigt den Schimmereffekt als Ladeanzeige an, während Daten abgerufen und an das Raster gebunden werden, während der ersten Darstellung, der Aktualisierung oder nach dem Ausführen von Rasteraktionen wie Sortieren, Filtern, Gruppieren und mehr. Das Datenraster bietet zwei Arten von Ladeanzeigen: Spinner und Shimmer.
Adaptives UI-Layout
Die Benutzeroberfläche des Data Grid ist für kleine Bildschirme angepasst und neu gestaltet, um eine hervorragende Ansicht und Benutzerfreundlichkeit zu gewährleisten. Zu den Funktionen gehören Filter, Sortierung, Suche, Spaltenauswahl, Spaltenmenü, Pager-Dropdown und Bearbeitungsdialoge, die sich an die Bildschirmgröße anpassen und Zeilenelemente vertikal rendern.
Spalte
Spalten definieren das Schema der Datenquelle im Datenraster. Es unterstützt Formatierung, das automatische Generieren von Spalten, Spaltendefinitionen, das Fixieren von Zeilen und Spalten, Spaltenüberspannung, Textumbruch, Spaltenauswahl, Spaltenmenü und andere Funktionen.
Paging
Paging wird verwendet, um ein Datensegment aus der zugewiesenen Datenquelle anzuzeigen. Das Angular Data Grid bietet eine integrierte Pager-Benutzeroberfläche mit Optionen zur Anpassung der gesamten Benutzeroberfläche. Es verfügt auch über einen On-Demand-Paging-Modus für den effektiven Datenabruf von entfernten Webdiensten.
Sortierung
Sortieren Sie Zeilen entweder in aufsteigender oder absteigender Reihenfolge nach einer Spalte, indem Sie einfach auf den Header klicken. Sortieren Sie Daten aus mehreren Spalten, indem Sie die Strg-Taste + Header-Klick gedrückt halten. Darüber hinaus können Sie Ihre eigene benutzerdefinierte Sortierlogik basierend auf den Anwendungsbedürfnissen definieren.
Filterung
Die Filterung hilft, bestimmte oder verwandte Datensätze anzuzeigen, die ein bestimmtes Kriterium im Datenraster erfüllen. Das Datenraster unterstützt verschiedene Filtertypen, einschließlich leistungsstarker Excel-ähnlicher Filter. Wählen Sie den geeigneten Filtertyp, definieren Sie Ihre eigene benutzerdefinierte Filterlogik und passen Sie die Filter-Benutzeroberfläche an die Anwendungsbedürfnisse an. Diakritische Zeichen können ebenfalls gefiltert werden.
Auswahl
Wählen Sie Zeilen oder Zellen mit dem Kontrollkästchen oder durch einfaches Klicken aus. Wählen Sie mehr als eine Zeile oder Zelle aus, indem Sie Strg, Umschalt oder Befehl gedrückt halten, oder programmatisch.
Bearbeitung
Das Angular Data Grid unterstützt Erstellungs-, Lese-, Aktualisierungs- und Löschvorgänge (CRUD). Neben integrierten Editor-Komponenten zur Bearbeitung eines bestimmten Spaltenwerts können benutzerdefinierte Editor-Komponenten mit Vorlagen entsprechend den Anwendungsbedürfnissen erstellt werden. Mit Hilfe eines Datenmanagers können Sie Bearbeitungsvorgänge mit einer Array-Sammlung oder einem Remote-Datendienst durchführen.
Gruppierung
Gruppieren Sie Zeilen, um die Daten in einer organisierten hierarchischen Struktur in aufsteigender oder absteigender Reihenfolge anzuzeigen, um das Erweitern und Reduzieren von Datensätzen zu erleichtern. Es gibt eine Option, Datensätze der gewünschten Spalte durch einfaches Ziehen und Ablegen dieser Spalte in einem interaktiven Ablagebereich zu gruppieren.
Aggregation
Visualisieren Sie einfach die Aggregationen der Data Grid-Spaltenwerte mithilfe der Zusammenfassungsoption. Aggregationen können angepasst werden, um ihren Wert in einzelnen Zusammenfassungszeilen, einzelnen Gruppenzusammenfassungszeilen oder Gruppenüberschriftenzeilen anzuzeigen.
Fixierte Zeilen und Spalten
Fixierte Zeilen und Spalten sind oben bzw. links, rechts, beidseitig oder an einer festen Position sichtbar, wodurch der restliche Rasterinhalt scrollbar wird. Diese Funktion wird hauptsächlich zum Vergleichen von Zellenwerten verwendet.
Sticky Header
Der Header des Angular Data Grid muss beim vertikalen Scrollen des Dokuments an einer festen Position bleiben, um den Rasterinhalt zusammen mit dem Spaltenheader sichtbar zu machen.
Zeilen-Drag & Drop
Das Angular Grid ermöglicht es Benutzern, Zeilen in ein anderes Data Grid oder eine benutzerdefinierte Komponente zu ziehen und abzulegen. Benutzer können Zeilen auch innerhalb desselben Data Grid mit dem Zieh-Symbol ziehen und ablegen und Zeilen zwischen verschiedenen Gruppen verschieben.
Master-Detail-Raster
Angular Master Detail Grid ist ein Anwendungsfall, bei dem die Details eines Datensatzes in einem separaten Datenraster durch Klicken auf eine bestimmte Zeile angezeigt werden.
Zustandsverwaltung
Die Zustandsverwaltung in der Angular Data Grid-Komponente ermöglicht es Ihnen, den Zustand des Rasters auch nach einer Browseraktualisierung oder beim Navigieren zu einer anderen Seite innerhalb derselben Browsersitzung beizubehalten. Diese Funktion ist besonders vorteilhaft, um die Konfiguration und Daten des Rasters nach einem Seitenneuladen beizubehalten.
Live-Update
Das Data Grid aktualisiert Live-Daten in seinen Zellen in bestimmten Zeitintervallen. Diese Aktualisierungen erfolgen ohne Verzögerung oder Verlangsamung, wodurch sichergestellt wird, dass das System hochreaktiv und effizient bleibt.
Zusätzliche Funktionen
Zeilenhöhe
Die Zeilenhöhe ist ein wichtiger Faktor bei der Anzeige der Anzahl von Datensätzen im Viewport und kann basierend auf den UI-Anforderungen der Anwendung leicht angepasst werden. Es ist auch möglich, die Zeilenhöhe bedingt einzustellen.
In die Zwischenablage kopieren
Die Zwischenablage ermöglicht es Benutzern, Daten aus ausgewählten Zeilen oder Zellen zu kopieren. Die Tastenkombinationen Strg+C und Strg+Umschalt+H kopieren Daten mit bzw. ohne Header.
Kontextmenü
Führt verschiedene Aktionen in einem Datenraster über das Popup-Menü aus, das erscheint, wenn auf die Zelle, den Header oder den Pager rechts geklickt wird. Neben integrierten Standardmenüpunkten können auch benutzerdefinierte Kontextmenüpunkte hinzugefügt werden.
Breite und Höhe
Legen Sie die Eigenschaften Breite und Höhe fest, um die Größe des Datenrasters zu ändern. Wenn der Inhalt das Rasterelement überläuft, werden horizontale und vertikale Scrollleisten angezeigt. Um den übergeordneten Container des Datenrasters auszufüllen, stellen Sie einfach die Höhe und Breite auf 100% ein.
Gestapelte Header
Gestapelte Header ermöglichen das Gruppieren und Visualisieren von Spaltenheadern in einer gestapelten Weise. Die Anzahl der stapelbaren Spalten ist unbegrenzt. Führen Sie alle Data Grid-Aktionen auch bei gestapelten Spalten aus.
Barrierefreiheit
Tastaturnavigation
Die Angular Grid-Komponente stellt sicher, dass jede Zelle mit der Tastatur zugänglich ist. Wichtige Funktionen wie Sortieren, Auswählen und Bearbeiten können allein mit Tastaturbefehlen ausgeführt werden; keine Mausinteraktion ist erforderlich. Dies hilft bei der Erstellung hochgradig zugänglicher Anwendungen mit dieser Komponente.
Screenreader
Die Angular Data Grid-Ansicht verfügt über vollständige WAI-ARIA-Barrierefreiheit. Die Benutzeroberfläche enthält visuelle Elemente mit hohem Kontrast, die sehbehinderten Menschen ein optimales Seherlebnis ermöglichen. Außerdem sind gültige UI-Beschreibungen über unterstützende Technologien wie Screenreader leicht zugänglich.
Von rechts nach links (RTL)
Die von rechts nach links gerichtete Darstellung ermöglicht die Anzeige von Text und Layout des Datenrasters von rechts nach links. Dies verbessert die Benutzererfahrung und Zugänglichkeit für RTL-Sprachen.
Mobilgeräteoptimiert und berührungsfreundlich
Die Data Grid-Komponente verbessert die Benutzerfreundlichkeit und bietet ein optimiertes und responsives Design für Desktops, Touchscreens und Telefone über alle Betriebssysteme hinweg, einschließlich iOS, Android und Windows.
Touch-Unterstützung
Benutzerfreundliche Touch-Gesten und ein interaktives UI-Design bieten das beste Benutzererlebnis. Alle Data Grid-Funktionen funktionieren auf Touch-Geräten ohne Konfiguration.
Responsiver Pager
Der Data Grid Pager agiert intelligent und ändert seine gesamte Benutzeroberfläche responsiv basierend auf der Dimension. Sein optimiertes Design bietet die beste UI-Interaktion auf verschiedenen Geräten.
Angular-Versionskompatibilität
Mit kontinuierlichen Verbesserungen in Angular-Versionen wird das Angular Data Grid stets aktualisiert, um die Kompatibilität mit Versionen von 4 bis zur neuesten Version zu gewährleisten.
Andere unterstützte Frameworks
Das Data Grid ist für die Frameworks Blazor, React, JavaScript und Vue verfügbar. Erkunden Sie die plattformspezifischen Optionen über die folgenden Links:
Unterstützte Browser
Das Angular Data Grid funktioniert gut mit allen modernen Webbrowsern, einschließlich Chrome, Firefox, Edge, Safari und Opera.
Sie wissen nicht, wie Sie Ihr erstes Angular Grid erstellen sollen? Unsere Tutorial-Videos und Dokumentation können helfen.
Ich möchte es jetzt ansehen Ich möchte es jetzt lesen145+ Angular-UI-Komponenten
ALLE KOMPONENTEN
SMARTE KOMPONENTEN
RASTER
EDITORS
DROPDOWN-MENÜS
EINGABEN
DATENVISUALISIERUNG
NAVIGATION
SCHALTFLÄCHEN
INTERAKTIVER CHAT
BENACHRICHTIGUNG
FORMULARE
Häufig gestellte Fragen
Warum sollten Sie Syncfusion Essential Studio® Angular Data Grid wählen?
Das Syncfusion Data Grid ist das beste Angular Data Grid, das die folgenden Funktionen bietet:
Laden Sie Millionen von Datensätzen in nur einer Sekunde.
- Mobilgerechtes Design, das sich jeder Auflösung anpasst.
Flexible Datenbindung mit Unterstützung für lokale und Remote-Datenquellen wie JSON, RESTful-Dienste, OData-Dienste und WCF-Dienste.
Flexible Bearbeitung und intuitive Datensatz-Auswahlmodi.
Sofort einsatzbereite Excel-ähnliche Filter und Gruppierungsoptionen.
Zahllose Spaltenanpassungen und Datensummen.
Nahtlose Datenexportoptionen wie PDF, CSV und Excel.
- Eines der besten Angular Data Grids auf dem Markt, das eine funktionsreiche Benutzeroberfläche zur Interaktion mit der Software bietet.
Einfache Konfiguration und API.- Unterstützt alle modernen Browser.
Umfangreiche Lernressourcen wie Demos, Dokumentation und Videos, um schnell zu lernen und mit Angular Data Grid zu beginnen.
Was kostet Syncfusion Angular Data Grid?
Wir verkaufen das Angular Data Grid nicht separat. Es ist nur als Teil der Syncfusion Teamlizenz erhältlich. Diese enthält über 1,600 Komponenten und Frameworks, einschließlich des Angular Data Grid. Der Preis der Teamlizenz beginnt bei 395 $ pro Monat für 5 Entwickler und beinhaltet Support und Updates bis zum Ablauf des Abonnements. Zusätzlich können wir möglicherweise Rabatte basierend auf aktuell aktiven Aktionen anbieten. Bitte kontaktieren Sie noch heute unsere Produktspezialisten, um zu erfahren, ob Sie für zusätzliche Rabatte qualifiziert sind.
Wo finde ich die Syncfusion Angular Grid Demo?
Sie finden unsere Angular Grid Demo, die zeigt, wie das Grid gerendert und konfiguriert wird.
Was ist der Unterschied zwischen Angular Grid und Angular Data Grid?
Das Angular Grid ist eine grundlegende Tabellenimplementierung (ähnlich table oder *ngFor), während das Angular Data Grid (wie das Angular Grid von Syncfusion) erweiterte Funktionen wie Sortierung, Filterung, Virtualisierung und Inline-Bearbeitung für die komplexe Datenverarbeitung bietet. Das Grid von Syncfusion ist für hohe Leistung und Skalierbarkeit in Unternehmensanwendungen optimiert.
Kann ich die Syncfusion Angular Grid-Komponente separat erwerben?
Nein, unsere 1,600+ Komponenten und Frameworks für Web, Mobilgeräte und Desktop, einschließlich unseres Angular Data Grid, werden nicht einzeln verkauft. Sie sind nur als Teil einer Teamlizenz erhältlich. Wir haben das Produkt jedoch wettbewerbsfähig bepreist, sodass es nur unwesentlich mehr kostet als das, was einige andere Anbieter für ihre Data Grid-Komponente allein verlangen. Wir haben auch die Erfahrung gemacht, dass unsere Kunden in der Regel mit einem unserer Produkte beginnen und dann schnell auf mehrere Produkte erweitern. Daher hielten wir es für am besten, alle 1,600+ Komponenten und Frameworks für eine Abonnementgebühr anzubieten, die bei 395 $ pro Monat für ein Team von 5 Entwicklern beginnt. Zusätzlich können wir möglicherweise Rabatte basierend auf aktuell aktiven Aktionen anbieten. Bitte kontaktieren Sie noch heute unsere Produktspezialisten, um zu erfahren, ob Sie für zusätzliche Rabatte qualifiziert sind.
Kann ich das Syncfusion Angular Data Grid kostenlos herunterladen und nutzen?
Nein, dies ist ein kommerzielles Produkt und erfordert eine kostenpflichtige Lizenz. Eine kostenlose Community-Lizenz ist jedoch für Unternehmen und Einzelpersonen erhältlich, deren Organisationen weniger als 1 Million US-Dollar Jahresbruttoumsatz und fünf oder weniger Entwickler haben.
Wie fange ich mit Syncfusion Angular Grid an?
Ein guter Ausgangspunkt wäre unsere umfassende Dokumentation zum Einstieg.
Was ist ein Angular Data Grid?
Ein Angular Data Grid ist eine erweiterte Tabellenkomponente, die entwickelt wurde, um große Datensätze effizient anzuzeigen und zu verwalten. Ihre Funktionen umfassen Sortierung, Filterung, Paginierung und Echtzeitaktualisierungen. Bibliotheken wie Syncfusion verbessern die Leistung mit Excel-ähnlichen Funktionen, serverseitiger Verarbeitung und nahtloser Angular-Integration.
Unsere Kunden lieben uns
Mit einem ausgezeichneten Toolset und einem großartigen Supportteam verkürzt Syncfusion® die Entwicklungszeit der Kunden.Hier sind einige ihrer Erfahrungen.
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
Von Benutzern auf der ganzen Welt bewertet
Syncfusion Angular Data Grid Ressourcen
UI Kits
Figma Download
Figma Download
Auszeichnungen
Viele behaupten, dass sie herausragend sind. Doch wenn andere das erkennen und loben, bedeutet es viel mehr. Syncfusion® präsentiert mit Stolz folgende Branchenauszeichnungen.
Aktuelle Aktivitäten in Angular Data Grid Tutorials und Blogs
Die Angular Data Grid-Tutorial-Videos und Blogbeiträge helfen Ihnen beim Erstellen Ihrer ersten App mit Angular-Komponenten. Sie bieten Problemlösungsstrategien, beschreiben Funktionen und Features, kündigen neue Feature-Releases an, erklären Best Practices und zeigen Beispielszenarien. Entdecken Sie unsere neuesten Beiträge in unserem Blog und unseren Tutorial-Videokanälen für Angular Data Grid-Updates.
BLOG
- JANUAR 2024
