React TreeGrid - Leistungsfähige Tree liste
- Laden Sie große Datenmengen, indem untergeordnete Daten bei Bedarf dynamisch geladen werden.
- Inklusive flexibler UI-Interaktionen wie Auf-/Zuklappen von Elternzeilen, Dialogbearbeitung u. mehr.
- Attraktive UI-Darstellung mit integrierten Themes wie Fabric, Bootstrap, Material usw.
Quick Overview Video
Trusted by the world’s leading companies
Übersicht
Das React TreeGrid ist eine funktionsreiche Komponente zur effektiven Visualisierung selbstreferenzieller, hierarchischer Daten in tabellarischer Form (baumartige Struktur). Zu den zahlreichen Funktionen gehören Datenbindung, Virtualisierung, Bearbeitung, Sortierung, Suche, Filterung, unendliches Scrollen, Paginierung, gefrorene Zeilen und Spalten, Export in verschiedene Formate, Aggregation von Zeilen und mehr.
Interagieren Sie mit dem Live React TreeGrid
Läuft im Browser. Keine Installation erforderlich.
Warum das Syncfusion® React TreeGrid wählen?
Hohe Leistung
Daten hierarchisch anzeigen. Das optimierte Design der Komponente bietet hohe Leistung, um Millionen von Datensätzen laden in nur wenigen Sekunden zu laden.
Nahtlose Datenbindung
Binden Sie Daten an verschiedene lokale und entfernte Datenquellen wie JSON, OData, WCF und RESTful-Webdienste mithilfe eines Data Managers.
Selbstreferenzielles, hierarchisches Grid
Das React TreeGrid wurde entwickelt, um self-referential and hierarchical Daten in tabellarischer Form darzustellen. Es visualisiert die Beziehung zwischen Eltern- und Kinddatensätzen.
Flexible Bearbeitung
Das React TreeGrid unterstützt Create-, Read-, Update- und Delete-Operationen (CRUD) mit beobachtbaren Daten. Es bearbeitet Daten aus einem JSON-Array oder über einen entfernten Datenservice mithilfe des Data Managers.
Passt sich jeder Auflösung an
Das TreeGrid verfügt über ein hochgradig responsives Layout und ein optimiertes Design für Desktops, Touchscreens und Smartphones. Es funktioniert auf mobilen Geräten mit iOS, Android und Windows OS.
Eigene Template-Designs erstellen
Benutzer können im React TreeGrid eine benutzerdefinierte UI mithilfe einer großen Auswahl an Templates erstellen.
Attraktive, anpassbare Themes
Erstellen Sie moderne Designs mit integrierten Themes wie Fluent, Tailwind CSS, Bootstrap, Material und Fabric. Verwenden Sie das online Theme Studio, um Themes einfach anzupassen.
Globalisierung und Lokalisierung
Benutzer aus verschiedenen Regionen können das TreeGrid verwenden, indem Datum-, Währungs- und Zahlenformate an ihre Präferenzen angepasst werden.
React TreeGrid Codebeispiel
Starten Sie schnell mit dem React TreeGrid anhand weniger TSX-Zeilen, wie im folgenden Beispiel gezeigt. Entdecken Sie auch dieses React TreeGrid-Beispiel, das zeigt, wie man ein TreeGrid in React rendert und konfiguriert.
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sortData } from './data';
function App() {
return <TreeGridComponent dataSource={sortData} treeColumnIndex={1} childMapping='subtasks'>
<ColumnsDirective>
<ColumnDirective field='Category' headerText='Category' width='150'/>
<ColumnDirective field='orderName' headerText='Order Name' width='170'/>
<ColumnDirective field='orderDate' headerText='Order Date' width='130' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='price' headerText='Price' width='100' textAlign='Right' type='number' format='C0' />
</ColumnsDirective>
</TreeGridComponent>
};
export default App;
Skeleton-Ladeanzeige
Das TreeGrid zeigt während des Ladens und Bindens von Daten bei der anfänglichen Darstellung, beim Aktualisieren oder nach Grid-Aktionen wie Sortieren einen Ladeeffekt. Das TreeGrid bietet zwei Effekte: Spinner und Shimmer.
Spalten
Spalten definieren das Schema einer Datenquelle im React TreeGrid. Zu den Funktionen gehören Formatierung, Spaltendefinitionen, Zeilenumbruch, Spaltenauswahl, Spaltenmenü und Spaltenreihenfolge.
Paginierung
Über Paginierung kann ein Datenabschnitt aus der zugewiesenen Datenquelle betrachtet werden. Das React TreeGrid verfügt über eine integrierte Pager-UI mit Optionen zur vollständigen Anpassung. Es bietet außerdem einen On-Demand-Paging-Modus für eine effiziente Datenabfrage von entfernten Webdiensten.
Sortierung
Das React TreeGrid ermöglicht das Sortieren einer Spalte durch einen einfachen Klick auf die Kopfzeile. Ein Strg+Klick auf die Kopfzeile führt eine Mehrfachsortierung aus. Daten können auf- oder absteigend sortiert werden.
Filterung
Filterung hilft Benutzern, bestimmte oder verwandte Datensätze zu sehen, die den angegebenen Filterkriterien entsprechen. Die Komponente unterstützt verschiedene Filtertypen, darunter leistungsfähige, Excel-ähnliche Filter. Die Filter im React TreeGrid erlauben die Auswahl passender Filtertypen, das Definieren eigener Filterlogik und die Anpassung der Filter-UI. Filter können auch in Bezug auf zugehörige Eltern- oder Kinddatensätze definiert werden.
Auswahl
Das React TreeGrid ermöglicht das Auswählen von Zeilen oder Zellen. Eine oder mehrere Zeilen/Zellen können ebenfalls durch Gedrückthalten von Strg oder Command oder programmgesteuert ausgewählt werden.
Zeilen
Zeilen im TreeGrid repräsentieren die Informationen jedes Datenobjekts aus der Datenquelle. Es werden Funktionen wie Erweitern/Reduzieren von Kindzeilen, Neuanordnung von Zeilen, Einrücken/Ausrücken zur Änderung der Hierarchieebenen und viele weitere Features unterstützt.
Bearbeitung
Das React TreeGrid bietet volle Unterstützung für Create-, Read-, Update- und Delete-Operationen (CRUD). Zusätzlich zu integrierten Editor-Komponenten zum Bearbeiten einzelner Spaltenwerte können Benutzer benutzerdefinierte Editor-Komponenten mit Templates erstellen. Die Komponente führt Bearbeitungsoperationen mit einer JSON-Sammlung oder einem entfernten Datenservice mithilfe des Data Managers aus.
Zeilen per Drag & Drop
Das React TreeGrid erlaubt das Ziehen und Ablegen von Zeilen innerhalb desselben oder eines anderen TreeGrid. Diese Funktion ist hilfreich zum Umorganisieren von Daten und zur Schaffung einer intuitiveren Benutzererfahrung.
Aggregation
Aggregationen von Spaltenwerten können einfach mithilfe der Aggregate-Funktion angezeigt werden. Aggregationen lassen sich anpassen, um ihren Wert in jeder Hierarchieebene mit vordefinierten Summen-Typen darzustellen.
Gefrorene Spalten
Gefrorene Spalten sind links, rechts oder auf beiden Seiten des TreeGrid sichtbar und machen den verbleibenden Grid-Inhalt scrollbar. Sie werden hauptsächlich zum Vergleichen von Zellenwerten verwendet.
Suche
Sie können Datensätze mittels der Suchfunktion durchsuchen. Integrieren Sie ein Suchfeld in die Toolbar des React TreeGrid, indem Sie Such-Items hinzufügen.
Adaptives UI-Layout
Die Benutzeroberfläche des React TreeGrid wurde für optimale Darstellung und Bedienbarkeit auf kleinen Bildschirmen angepasst und neu gestaltet. Filter-, Such- und Bearbeitungsdialoge passen sich der Bildschirmgröße an.
Benutzerdefinierte Tooltips
Die React TreeGrid-Komponente ermöglicht das Setzen von Tooltips für TreeGrid-Zellen. Fahren Sie mit der Maus über Tree-Knoten, um Tooltip-Text anzuzeigen.
Fixierte Kopfzeilen
Halten Sie Spaltenköpfe beim Scrollen stets sichtbar. Fixierte Kopfzeilen verbessern die Bedienbarkeit, da sie konstanten Kontext bieten und das Interpretieren und Analysieren großer Datensätze erleichtern.
Exportieren
Excel-, PDF- und CSV-Export
Exportieren Sie das React TreeGrid einfach in Excel-, PDF- oder CSV-Formate. Benutzer können das exportierte Dokument auch programmgesteuert anpassen.
Benutzer können Daten entweder über die Druckoption in der Toolbar oder programmgesteuert drucken. Drucken Sie alle Zeilen eines React TreeGrid, unabhängig von der Seitenanzahl, oder drucken Sie nur die aktuell angezeigte Seite.
Weitere Funktionen
Zeilenhöhe
Die Zeilenhöhe ist ein wichtiger Faktor bei der Darstellung von Datensätzen im Viewport und lässt sich mühelos anpassen. Es ist auch möglich, Zeilenhöhen bedingt festzulegen.
In die Zwischenablage kopieren
Die Zwischenablage ermöglicht das Kopieren ausgewählter Zeilen- oder Zellendaten. Verwenden Sie Strg+C bzw. Strg+Shift+H, um Daten mit bzw. ohne Kopfzeilen zu kopieren.
Kontextmenü
Das Kontextmenü verbessert die Interaktion mit dem React TreeGrid durch ein Pop-up-Menü. Es erscheint beim Rechtsklick auf eine Zelle, Kopfzeile oder den Pager. Neben integrierten Standardmenüpunkten können benutzerdefinierte Menüeinträge hinzugefügt werden.
Breite und Höhe
Benutzer können die Größe des React TreeGrid durch Setzen der width- und height-Eigenschaften ändern. Horizontale und vertikale Scrollbars werden angezeigt, wenn der Inhalt das TreeGrid-Element überläuft. Damit das TreeGrid den übergeordneten Container vollständig ausfüllt, sollten height und width auf 100% gesetzt werden.
Gestapelte Kopfzeilen
Gestapelte Kopfzeilen ermöglichen es Benutzern, Spaltenüberschriften gruppiert darzustellen. Es gibt keine Begrenzung für die Anzahl der gestapelten Spalten. Alle React TreeGrid-Aktionen bleiben auch bei gestapelten Spalten verfügbar.
Barrierefreiheit
Tastaturnavigation
Das TreeGrid stellt sicher, dass jede Zelle per Tastatur zugänglich ist. Wichtige Funktionen wie Erweitern oder Reduzieren von Kindzeilen, Sortieren, Auswählen und Bearbeiten können ausschließlich über Tastaturbefehle ausgeführt werden; keine Mausinteraktion erforderlich. Dies unterstützt die Entwicklung hochzugänglicher Anwendungen mit dieser Komponente.
Screenreader
Das React TreeGrid bietet umfassende WAI-ARIA-Unterstützung. Die Benutzeroberfläche enthält hochkontrastige visuelle Elemente, die sehbehinderten Personen eine bessere Darstellung ermöglichen. Gültige UI-Beschreibungen sind zudem leicht über Assistenztechnologien wie Screenreader zugänglich.
Rechts-nach-Links (RTL)
Die Rechts-nach-Links-Darstellung ermöglicht es, Text und Layout des React TreeGrid von rechts nach links anzuzeigen. Dies verbessert die Benutzererfahrung und Zugänglichkeit für RTL-Sprachen.
Nicht sicher, wie Sie Ihr erstes React TreeGrid erstellen? Unsere Tutorial-Videos und Dokumentation helfen weiter.
Jetzt ansehen Jetzt lesenEntdecken Sie Syncfusions vollständiges React-Komponenten-Ökosystem
Entdecken Sie über 140+ React-UI-Komponenten mit bewährten, produktionsreifen Steuerelementen und den neuesten reinen React-Komponenten, die nativ für die moderne Web-App-Entwicklung erstellt wurden.
-
React-Komponenten
-
Reine React-Komponenten
-
SMARTE KOMPONENTENRASTERDROPDOWN-MENÜSEINGABENDATENVISUALISIERUNGNAVIGATIONSCHALTFLÄCHENINTERAKTIVER CHATBENACHRICHTIGUNGFORMULARE
-
RasterDatenvisualisierungNavigationSchaltflächenEingaben
Häufig gestellte Fragen
Warum sollten Sie sich für das Syncfusion® React TreeGrid entscheiden?
Das Syncfusion® React TreeGrid bietet die folgenden Vorteile:
Benutzer können große Datenmengen laden, indem sie untergeordnete Daten bei Bedarf dynamisch laden.
Enthält flexible UI-Interaktionen wie das Erweitern und Reduzieren von übergeordneten Datensätzen, Dialog-Bearbeitung und mehr.
Flexible Datenbindung mit Unterstützung für lokale und entfernte Datenquellen wie JSON, RESTful-Services, OData-Services und WCF-Services.
- Attraktive UI-Darstellung mit integrierten Themes wie Fabric, Bootstrap usw.
- Einfache Konfiguration und API.
- Unterstützung für alle modernen Browser.
Touch-freundliche und responsive Benutzeroberfläche.
Umfangreiche Lernressourcen wie Demos und Dokumentation ermöglichen einen schnellen Einstieg in das React TreeGrid.
Wo finde ich die Syncfusion® React TreeGrid-Demo?
Unsere React TreeGrid Demo zeigt, wie das TreeGrid gerendert und konfiguriert wird.
Kann ich das Syncfusion® React TreeGrid kostenlos herunterladen und nutzen?
Nein — es handelt sich um ein kommerzielles Produkt, das eine kostenpflichtige Lizenz erfordert. Es gibt jedoch eine kostenlose Community-Lizenz für Unternehmen und Einzelpersonen, deren Organisationen weniger als 1 Million USD Jahresumsatz haben und fünf oder weniger Entwickler beschäftigen.
Wie starte ich mit dem Syncfusion® React TreeGrid?
Ein guter Einstiegspunkt ist unsere ausführliche Dokumentation für den Einstieg.
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.
Aweseome, enough said. really
Easy usability, solving real life problems. easy to implement. most of the cases has the operators and settings possibilities you right away need. never fails to impress
Oliver O
Geschäftsführung Kreation/Artdirektion
A giant framework with great pricing options
I have loved the components and options that Syncfusion has, besides, its documentation, demos, and Support are excellent.
Alejandro Javier V
CEO
Echte Erfolgsgeschichten ansehen
Entwickler auf der ganzen Welt vertrauen auf Syncfusions Essential Studio, um komplexe Projekte zu vereinfachen und die Auslieferung zu beschleunigen. Mit einer umfangreichen Bibliothek an UI-Steuerelementen, leistungsstarken SDKs und zuverlässigem Support hilft Essential Studio Teams, unternehmensreife Anwendungen mit Zuversicht zu erstellen.
Fallstudien erkundenIndustrie
Softwareentwicklung
75% Kostenreduzierung
50% Schnellere Entwicklung
Industrie
Versorgungsunternehmen (Öl und Gas)
450+ Stunden eingespart
Gestraffte Prozesse und Entwicklungsaufwand in Stunden reduziert.
Fortschrittliche, flexible Funktionen
Benutzer durch robuste und vielseitige Funktionalität befähigt.
Industrie
Software und Technologie
1000+ Stunden eingespart
Beschleunigte Entwicklung mit unternehmensreifen UI-Komponenten.
Effizientes Dateimanagement
Vereinfachte Workflows mit Dokumentbibliotheken, ohne sie von Grund auf neu zu erstellen.
Industrie
Software und Technologie
2 Jahre Verzögerung vermieden
Zwei Jahre Verzögerungen durch proaktive Planung verhindert.
Termingerechte Lieferung
Projekte termingerecht mit zuverlässigen Steuerelementen geliefert.
Industrie
IT-Dienstleistungen und IT-Beratung
Verbesserte Leistung
Große Datensätze werden mit einfacher Anpassung und schnellem Debugging verarbeitet.
Hochgradig anpassbar
Plug-and-Play-Steuerelemente mit schneller Vorlagenintegration.
Industrie
Professionelle Dienstleistungen
Sofortiger Zugriff
Schnelle Verfügbarkeit von Funktionen und Ressourcen.
Reduzierte Abhängigkeiten
Weniger Abhängigkeiten für eine schnellere Entwicklung.
Von Benutzern auf der ganzen Welt bewertet
Syncfusion® React TreeGrid-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.
