Rendering

Ein Renderer steuert, wie jede Zelle in einer Spalte angezeigt wird. Anstatt einen Rohwert anzuzeigen, wandelt ein Renderer die Daten jeder Zelle in stilisierten Text, Symbole, Abzeichen, Links, Aktionsschaltflächen oder jede andere visuelle Darstellung um, die es erleichtert, die Daten schnell zu lesen und zu handeln.

Das Rendering erfolgt vollständig im Browser. Der Server sendet Rohdaten und der Client übernimmt die Präsentation, was die 'Tabelle' unabhängig von der Zeilenanzahl schnell macht.

Weisen Sie einem Renderer eine Spalte mit setRenderer() zu. Der Renderer wird einheitlich auf jede Zelle in dieser Spalte angewendet:

TextRenderer<MusicRecord> renderer = new TextRenderer<>();
renderer.setTheme(Theme.PRIMARY);

table.addColumn("title", MusicRecord::getTitle).setRenderer(renderer);

Renderer vs. Wertgeber

Wenn Sie lediglich einen Zellwert umwandeln oder formatieren müssen, ohne eine DOM-Struktur zu erzeugen, verwenden Sie stattdessen einen Wertgeber. Renderer erzeugen zusätzliche DOM-Elemente für jede gerenderte Zeile, was beim Rendern zusätzliche Kosten verursacht. Reservieren Sie Renderer für visuelle Ausgaben wie Symbole, Abzeichen, Schaltflächen oder jede HTML-basierte Präsentation.

webforJ wird mit integrierten Renderer für die gängigsten Anwendungsfälle geliefert. Für alles, was spezifisch für Ihre App ist, erweitern Sie Renderer und implementieren Sie build(), um einen lodash-Template-String zurückzugeben, der im Browser für jede Zelle ausgeführt wird.

Häufige Renderer

Die folgenden Beispiele zeigen vier häufig verwendete Renderer und demonstrieren das setRenderer()-Muster in der Praxis.

TextRenderer

Stellt den Zellinhalt als einfachen oder stilisierten Text dar. Wenden Sie eine Themenfarbe oder Textdekoration auf eine Spalte an, ohne ihre Struktur zu ändern, wie z.B. das Hervorheben eines Prioritätsfelds in Rot oder das Fettformatieren eines Schlüsselidentifikators.

TextRenderer<MusicRecord> renderer = new TextRenderer<>();
renderer.setTheme(Theme.PRIMARY);
renderer.setDecorations(EnumSet.of(TextDecoration.BOLD));

table.addColumn("title", MusicRecord::getTitle).setRenderer(renderer);

BadgeRenderer

Umhüllt den Zellwert mit einem Abzeichenelement. Unterstützt Themen, Expanses, Farbseeding (automatisch verschiedene Farben pro eindeutigen Wert) und ein optionales führendes Symbol. Verwenden Sie es für kategoriale Werte wie Tags, Typen oder Etiketten, bei denen unterschiedliche visuelle Chips den Nutzern helfen, Zeilen schnell zu scannen und zu vergleichen.

BadgeRenderer<MusicRecord> renderer = new BadgeRenderer<>();
renderer.setTheme(BadgeTheme.PRIMARY);

table.addColumn("musicType", MusicRecord::getMusicType).setRenderer(renderer);

BooleanRenderer

Ersetzt true, false und null Werte durch Symbole. Verwenden Sie es für jede true/false-Spalte, bei der ein Symbol den Wert schneller als Text kommuniziert, wie z.B. Feature-Flags, aktive/inaktive Zustände oder Opt-in-Felder.

// Standard-Symbole
BooleanRenderer<Task> renderer = new BooleanRenderer<>();
table.addColumn("completed", Task::isCompleted).setRenderer(renderer);

// Benutzerdefinierte Symbole
BooleanRenderer<Task> custom = new BooleanRenderer<>(
  TablerIcon.create("thumb-up").setTheme(Theme.SUCCESS),
  TablerIcon.create("thumb-down").setTheme(Theme.DANGER)
);
table.addColumn("completed", Task::isCompleted).setRenderer(custom);

CurrencyRenderer

Formatiert einen numerischen Wert als Geldbetrag unter Verwendung der Regeln des angegebenen Locale. Verwenden Sie es für jede monetäre Spalte, bei der eine ortskorrekte Formatierung (Symbol, Trennzeichen, Dezimalstellen) wichtig ist.

// US-Dollar
table.addColumn("cost", MusicRecord::getCost)
     .setRenderer(new CurrencyRenderer<>(Locale.US));

// Euro mit deutscher Lokalisierung
table.addColumn("retail", MusicRecord::getRetail)
     .setRenderer(new CurrencyRenderer<>(Locale.GERMANY));

Bedingtes Rendering

ConditionalRenderer wählt je nach Wert der Zelle einen anderen Renderer pro Zelle aus. Bedingungen werden nacheinander ausgewertet; der erste Treffer gewinnt. Eine Fallback-Bestimmung kann mit otherwise() gesetzt werden.

Das folgende Beispiel zeigt bedingtes Rendering, das auf eine Rechnungsstatusspalte angewendet wird und zwischen BadgeRenderer-Varianten je nach Wert wechselt:

Code anzeigen

InvoiceListView.java
Invoice.java
InvoiceService.java

Es funktioniert auch gut für numerische Schwellenwerte. Dieses Server-Dashboard verwendet ConditionalRenderer, um die Themen von ProgressBarRenderer basierend auf den CPU- und Speicherauslastungsstufen zu wechseln:

Code anzeigen

ServerDashboardView.java
Server.java
ServerService.java

Bedingungs-API

Bedingungen werden mit statischen Fabrikmethoden erstellt und können mit and(), or() und negate() kombiniert werden.

// Wertgleichheit
Condition.equalTo("active")
Condition.equalToIgnoreCase("active")
Condition.in("active", "pending", "new")

// Numerische Vergleiche
Condition.greaterThan(100)
Condition.lessThanOrEqual(0)
Condition.between(10, 50)

// Boolean/Leere
Condition.isTrue()
Condition.isFalse()
Condition.isEmpty()

// String-Matching
Condition.contains("error")
Condition.containsIgnoreCase("warn")

// Kombination
Condition.greaterThan(0).and(Condition.lessThan(100))
Condition.isEmpty().or(Condition.equalTo("N/A"))
Condition.isTrue().negate()

// Überprüfung über Spalten hinweg
Condition.column("status").equalTo("active")

// Roh-JavaScript-Ausdruck
Condition.expression("cell.value % 2 === 0")

Komposit-Rendering

CompositeRenderer kombiniert mehrere Renderer nebeneinander in einer einzigen Zelle mithilfe eines Flex-Layouts. Verwenden Sie es, um ein Symbol mit Text zu kombinieren, ein Avatar neben einem Namen anzuzeigen oder ein Abzeichen neben einem Statusindikator zu stapeln.

Das folgende Mitarbeitungsverzeichnis verwendet einen CompositeRenderer in der Mitarbeiter-Spalte, um ein automatisch generiertes Avatar neben dem Namen jedes Mitarbeiters anzuzeigen:

Code anzeigen

EmployeeDirectoryView.java

Benutzerdefinierte Renderer

Wenn kein integrierter Renderer für Ihren Anwendungsfall geeignet ist, erweitern Sie Renderer und implementieren Sie build(). Die Methode gibt einen lodash-Template-String zurück, der im Browser für jede Zelle in der Spalte ausgeführt wird und als Mischung aus HTML und JavaScript ausgedrückt wird.

Erstellen eines benutzerdefinierten Renderers

Schritt 1: Erweitern Sie Renderer mit Ihrem Zeilendatentyp.

public class RatingRenderer extends Renderer<MusicRecord> {

Schritt 2: Überschreiben Sie build() und geben Sie einen lodash-Template-String zurück.

  @Override
  public String build() {
    return /* html */"""
      <%
        const rating = Number(cell.value);
        const stars  = Math.round(Math.min(Math.max(rating, 0), 5));
        const full   = '★'.repeat(stars);
        const empty  = '☆'.repeat(5 - stars);
      %>
      <span><%= full %><%= empty %></span>
      <span style="color: var(--dwc-color-body-text)">(<%= rating.toFixed(1) %>)</span>
    """;
  }
}

Schritt 3: Weisen Sie den Renderer einer Spalte zu.

table.addColumn("rating", MusicRecord::getRating)
     .setRenderer(new RatingRenderer());

Tipp

Für weitere Informationen zur Lodash-Syntax, die zum Zugreifen auf Zellinformationen und zum Erstellen informativer Renderer verwendet wird, siehe diesen Referenzabschnitt.

Zugriff auf mehrere Spalten

Verwenden Sie cell.row.getValue("columnId"), um auf Nachbarspalten innerhalb der Vorlage zuzugreifen. Dies ist nützlich, um Felder zu kombinieren, Deltas zu berechnen oder verwandte Daten zu quellen.

public class ArtistAvatarRenderer extends Renderer<MusicRecord> {
  @Override
  public String build() {
    return /* html */"""
      <%
        const name     = cell.row.getValue("artist");
        const initials = name
          ? name.split(' ').map(w => w.charAt(0)).join('').substring(0, 2).toUpperCase()
          : '?';
      %>
      <div style="display: flex; align-items: center; gap: 8px;">
        <div style="width: 28px; height: 28px; border-radius: 50%;
          background: var(--dwc-color-primary); color: white;
          display: flex; align-items: center; justify-content: center;
          font-size: 11px; font-weight: 600;">
          <%= initials %>
        </div>
        <span><%= name %></span>
      </div>
    """;
  }
}

Klickevents

IconButtonRenderer und ButtonRenderer stellen addClickListener() out of the box zur Verfügung. Das Klick-Ereignis bietet Zugriff auf das Datenobjekt der Zeile über e.getItem().

IconButtonRenderer<MusicRecord> deleteBtn = new IconButtonRenderer<>(
  TablerIcon.create("trash").setTheme(Theme.DANGER)
);
deleteBtn.addClickListener(e -> {
  MusicRecord record = e.getItem();
  repository.delete(record);
  table.refresh();
});

table.addColumn("delete", r -> "").setRenderer(deleteBtn);

Leistung: faul Rendering 25.12

Für Spalten, die visuell aufwendige Renderer wie Abzeichen, Fortschrittsbalken, Avatare oder Webkomponenten verwenden, aktivieren Sie faules Rendering, um die Scrollleistung zu verbessern.

table.addColumn("status", Order::getStatus)
     .setRenderer(new BadgeRenderer<>())
     .setLazyRender(true);

Wenn setLazyRender(true) für eine Spalte gesetzt ist, werden die Zellen während des Scrollens mit einem leichten animierten Platzhalter angezeigt. Der tatsächliche Zellinhalt wird gerendert, sobald das Scrollen stoppt. Dies ist eine Einstellung auf Spaltenebene, sodass Sie sie selektiv nur für die Spalten aktivieren können, die davon profitieren.

Code anzeigen

LazyRenderView.java

Wann faules Rendering aktivieren

Zell-Renderer erzeugen mehr Entitäten im DOM, was während des Renderns mehr CPU-Arbeit bedeutet, unabhängig davon, welcher Renderer es erstellt.

Faules Rendering kann helfen, die Leistungsauswirkungen zu reduzieren, wenn ein Renderer wirklich benötigt wird. Wenn Sie nur den Wert ändern oder formatieren müssen und kein komplexes DOM erzeugen, verwenden Sie stattdessen einen Wertgeber, um den Wert zu transformieren.

Eingebaute Renderer-Referenz

webforJ wird mit einem umfassenden Satz an Renderern für die gängigsten Anwendungsfälle ausgeliefert. Weisen Sie jeden von ihnen mit column.setRenderer(renderer) einer Spalte zu.

Code anzeigen

ProductCatalogView.java
Product.java
ProductService.java

Text und Labels

TextRenderer - stilisierter Text mit optionalem Thema und Dekorationen

25.12

Stellt den Zellinhalt als einfachen oder stilisierten Text dar. Unterstützt Themenfarben und Textdekorationen wie fett, kursiv und unterstrichen.

TextRenderer renderer = new TextRenderer<>();
renderer.setTheme(Theme.PRIMARY);
renderer.setDecorations(EnumSet.of(TextDecoration.BOLD));

table.addColumn("title", MusicRecord::getTitle).setRenderer(renderer);

BadgeRenderer - Wert in einem Abzeichen-Chip dargestellt

25.12

Wrapt den Zellwert in einem Abzeichenelement. Unterstützt Themen, Expanses, Farbseeding (automatisch verschiedene Farben pro eindeutigen Wert) und ein optionales führendes Symbol.

BadgeRenderer renderer = new BadgeRenderer<>();
renderer.setTheme(BadgeTheme.PRIMARY);

table.addColumn("musicType", MusicRecord::getMusicType).setRenderer(renderer);

NullRenderer - Platzhalter für null oder leere Werte

25.12

Rendert eine konfigurierbare Fallback-Zeichenfolge, wenn der Zellwert null oder leer ist; andernfalls wird der Wert wie er ist gerendert.

table.addColumn("notes", MusicRecord::getNotes)
     .setRenderer(new NullRenderer<>("N/A"));

Status und Indikatoren

BooleanRenderer - true/false/null als Symbole dargestellt

25.12

Ersetzt true, false und null Werte durch Symbole. Standardmäßig wird ein Häkchen, ein Kreuz und ein Strich verwendet.

// Standard-Symbole
BooleanRenderer renderer = new BooleanRenderer<>();
table.addColumn("completed", Task::isCompleted).setRenderer(renderer);

// Benutzerdefinierte Symbole
BooleanRenderer custom = new BooleanRenderer<>(
  TablerIcon.create("thumb-up").setTheme(Theme.SUCCESS),
  TablerIcon.create("thumb-down").setTheme(Theme.DANGER)
);

StatusDotRenderer - farbiger Indikatorpunkt neben Zelltext

25.12

Rendert einen kleinen farbigen Punkt links vom Zellwert. Ordnen Sie einzelne Werte Themen, CSS-Farbcodes oder java.awt.Color-Instanzen zu.

StatusDotRenderer renderer = new StatusDotRenderer<>();
renderer.addMapping("Active",    Theme.SUCCESS);
renderer.addMapping("Pending",   Theme.WARNING);
renderer.addMapping("Cancelled", Theme.DANGER);

table.addColumn("status", Order::getStatus).setRenderer(renderer);

Zahlen, Währung und Daten

CurrencyRenderer - ortsbasierte Währungsformatierung

25.12

Formatiert einen numerischen Wert als Geldbetrag unter Verwendung der Regeln des angegebenen Locale.

// US-Dollar
table.addColumn("cost", MusicRecord::getCost)
     .setRenderer(new CurrencyRenderer<>(Locale.US));

// Euro mit deutscher Lokalisierung
table.addColumn("retail", MusicRecord::getRetail)
     .setRenderer(new CurrencyRenderer<>(Locale.GERMANY));

PercentageRenderer - Prozentsatz mit optionalem Mini-Fortschrittsbalken

25.12

Stellt einen numerischen Wert als Prozentsatz dar. Setzen Sie das zweite Konstruktorargument auf false, um zu verhindern, dass ein dünner Fortschrittsbalken unter dem Text gerendert wird.

PercentageRenderer renderer = new PercentageRenderer<>(Theme.PRIMARY, true);
table.addColumn("completion", Task::getCompletion).setRenderer(renderer);

ProgressBarRenderer - vollständiger Fortschrittsbalken für numerische Werte

25.12

Rendert einen vollflächigen Fortschrittsbalken mit konfigurierbaren minimalen und maximalen Bereichen, unbestimmtem Modus und gestreifter oder animierter Anzeige. Verwenden Sie setText() mit einem lodash-Ausdruck, um benutzerdefinierten Text auf dem Balken zu überlagern.

ProgressBarRenderer renderer = new ProgressBarRenderer<>();
renderer.setMax(100);
renderer.setTheme(Theme.SUCCESS);
renderer.setTextVisible(true);
renderer.setText("<%= cell.value %>/100");

table.addColumn("progress", Task::getProgress).setRenderer(renderer);

MaskedTextRenderer - Zeichenfolge mit einer Textmaske formatiert

25.12

Wendet eine Zeichenmaske auf einen String-Wert an. # entspricht einer beliebigen Ziffer; literale Zeichen werden beibehalten. Siehe Textmaskenregeln für alle unterstützten Maskenzeichen.

table.addColumn("ssn", Employee::getSsn)
     .setRenderer(new MaskedTextRenderer<>("###-##-####"));

MaskedNumberRenderer - numerischer Wert mit einer Zahlenmaske formatiert

25.12

Formatiert einen numerischen Wert mit einer Musterzeichenfolge und ortsabhängigen Trennzeichen. 0 erzwingt eine Ziffer; # ist optional. Siehe Zahlenmaskenregeln für alle unterstützten Maskenzeichen.

table.addColumn("price", Product::getPrice)
     .setRenderer(new MaskedNumberRenderer<>("###,##0.00", Locale.US));

MaskedDateTimeRenderer - Datum/Uhrzeit-Wert mit einer Datumsmaske

25.12

Formatiert einen Datum- oder Zeitwert mit Muster-Token: %Mz (Monat), %Dz (Tag), %Yz (Jahr) und anderen. Siehe Datums-Maskenregeln für alle verfügbaren Token.

table.addColumn("released", MusicRecord::getReleaseDate)
     .setRenderer(new MaskedDateTimeRenderer<>("%Mz/%Dz/%Yz"));

Links und Medien

EmailRenderer - E-Mail-Adresse als klickbarer mailto-Link

25.12

Umhüllt den Zellwert in einem mailto:-Anker. Ein primär thematisiertes Mailsymbol dient standardmäßig als visuelles Signal.

// Standard-Mail-Symbol
table.addColumn("email", Contact::getEmail)
     .setRenderer(new EmailRenderer<>());

// Benutzerdefiniertes Symbol
table.addColumn("email", Contact::getEmail)
     .setRenderer(new EmailRenderer<>(TablerIcon.create("at")));

PhoneRenderer - Telefonnummer als klickbarer tel-Link

25.12

Umhüllt den Zellwert in einem tel:-Anker. Auf mobilen Geräten wird durch Tippen der Wählbildschirm geöffnet. Ein primär thematisiertes Telefonsymbol wird standardmäßig angezeigt.

// Standard-Telefonsymbol
table.addColumn("phone", Contact::getPhone)
     .setRenderer(new PhoneRenderer<>());

// Benutzerdefiniertes Symbol
table.addColumn("phone", Contact::getPhone)
     .setRenderer(new PhoneRenderer<>(TablerIcon.create("device-mobile")));

AnchorRenderer - Zellwert als konfigurierbarer Hyperlink

25.12

Rendert ein klickbares Ankerelement. Das href unterstützt lodash-Template-Ausdrücke, sodass Sie URLs dynamisch aus dem Zellwert erstellen können.

AnchorRenderer renderer = new AnchorRenderer<>();
renderer.setHref("https://www.google.com/search?q=<%= cell.value %>");
renderer.setTarget("_blank");

table.addColumn("title", MusicRecord::getTitle).setRenderer(renderer);

ImageRenderer - inline Bild in einer Zelle

25.12

Stellt ein Bild dar. Das src-Attribut unterstützt lodash-Template-Ausdrücke, sodass jede Zeile ein anderes Bild anzeigen kann.

ImageRenderer renderer = new ImageRenderer<>();
renderer.setSrc("https://placehold.co/40x40?text=<%= cell.value %>");
renderer.setAlt("Cover");

table.addColumn("cover", MusicRecord::getArtist).setRenderer(renderer);

Personen und Avatare

AvatarRenderer - Avatar mit automatisch generierten Initialen

25.12

Rendert eine Avatarkomponente. Die Initialen werden automatisch aus dem Zellwert abgeleitet. Unterstützt Themen und ein Fallback-Symbol.

AvatarRenderer renderer = new AvatarRenderer<>();
renderer.setTheme(AvatarTheme.PRIMARY);
renderer.setIcon(TablerIcon.create("user"));

table.addColumn("artist", MusicRecord::getArtist).setRenderer(renderer);

Symbole und Aktionen

IconRenderer - eigenständiges Symbol, optional anklickbar

24.00

Rendert ein einzelnes Symbol. Fügen Sie einen Klicklistener für interaktives Verhalten hinzu.

IconRenderer renderer = new IconRenderer<>(TablerIcon.create("music"));
table.addColumn("type", MusicRecord::getMusicType).setRenderer(renderer);

IconButtonRenderer - interaktiver Icon-Button mit Zeilenzugriff

25.12

Rendert einen klickbaren Icon-Button. Das Klickereignis macht das Zeilenobjekt über e.getItem() verfügbar, was es ideal für zeilenbasierte Aktionen macht.

IconButtonRenderer renderer = new IconButtonRenderer<>(TablerIcon.create("edit"));
renderer.addClickListener(e -> openEditor(e.getItem()));

table.addColumn("actions", r -> "").setRenderer(renderer);

ButtonRenderer - thematisierter Button in einer Zelle

24.00

Rendert eine vollständige Button-Komponente innerhalb der Zelle.

ButtonRenderer renderer = new ButtonRenderer<>("Edit");
renderer.setTheme(ButtonTheme.PRIMARY);
renderer.addClickListener(e -> openEditor(e.getItem()));

table.addColumn("edit", r -> "Edit").setRenderer(renderer);

ElementRenderer - rohes HTML-Element mit lodash-Inhalt

24.00

Rendert jedes HTML-Element mit einem lodash-Template-Inhalt-String. Dies ist der Notausgang für Situationen, in denen kein integrierter Renderer geeignet ist.

ElementRenderer renderer = new ElementRenderer<>("span", "<%= cell.value %>");
table.addColumn("custom", MusicRecord::getTitle).setRenderer(renderer);

Template-Referenz

Renderer bieten einen leistungsstarken Mechanismus zur Anpassung der Art und Weise, wie Daten innerhalb einer Tabelle angezeigt werden. Die Hauptklasse, Renderer, ist dafür ausgelegt, erweitert zu werden, um benutzerdefinierte Renderer auf der Grundlage von lodash-Templates zu erstellen, die das dynamische und interaktive Rendern von Inhalten ermöglichen.

Lodash-Templates ermöglichen das Einfügen von HTML direkt in Tabellenspalten, wodurch sie sehr effektiv für das Rendern komplexer Zellendaten in einer Tabelle sind. Dieser Ansatz ermöglicht die dynamische Generierung von HTML basierend auf Zellendaten und erleichtert reichhaltige und interaktive Inhalte in den Tabellenspalten.

Lodash-Syntax

Der folgende Abschnitt beschreibt die Grundlagen der Lodash-Syntax. Während dies kein vollständiger oder umfassender Überblick ist, kann er helfen, Lodash innerhalb der Tabelle-Komponente zu verwenden.

Syntaxübersicht für lodash-Templates:

<%= ... %> - Interpoliert Werte, indem das Ergebnis des JavaScript-Codes in die Vorlage eingefügt wird.
<% ... %> - Führt JavaScript-Code aus, was Schleifen, bedingte Anweisungen und mehr ermöglicht.
<%- ... %> - Entkommt HTML-Inhalten, um sicherzustellen, dass interpolierte Daten sicher vor HTML-Injection-Angriffen sind.

Beispiele unter Verwendung von Zellendaten:

1. Einfache Wertinterpolation: Zeigt direkt den Zellwert an.

<%= cell.value %>

2. Bedingtes Rendering: Verwendet JavaScript-Logik, um Inhalte bedingt zu rendern.

<% if (cell.value > 100) { %> 'Hoch' <% } else { %> 'Normal' <% } %>

3. Kombinieren von Datenfeldern: Rendert Inhalte unter Verwendung mehrerer Datenfelder aus der Zelle.

<%= cell.row.getValue('firstName') + ' ' + cell.row.getValue('lastName') %>

4. Entkommen von HTML-Inhalten: Rendert sicher benutzergenerierte Inhalte.

Der Renderer hat Zugriff auf detaillierte Zell-, Zeilen- und Spalteneigenschaften auf der Client-Seite:

Tabellenzellen-Eigenschaften:

Eigenschaft	Typ	Beschreibung
column	`TableColumn`	Das zugehörige Spaltenobjekt.
first	`boolean`	Gibt an, ob die Zelle die erste in der Zeile ist.
id	`String`	Die Zell-ID.
index	`int`	Der Index der Zelle innerhalb ihrer Zeile.
last	`boolean`	Gibt an, ob die Zelle die letzte in der Zeile ist.
row	`TableRow`	Das zugehörige Zeilenobjekt für die Zelle.
value	`Object`	Der Rohwert der Zelle, direkt aus der Datenquelle.

Tabellenzeilen-Eigenschaften:

Eigenschaft	Typ	Beschreibung
cells	`TableCell[]`	Die Zellen innerhalb der Zeile.
data	`Object`	Die von der App für die Zeile bereitgestellten Daten.
even	`boolean`	Gibt an, ob die Zeile eine gerade Nummer hat (für Stylingzwecke).
first	`boolean`	Gibt an, ob die Zeile die erste in der Tabelle ist.
id	`String`	Eindeutige ID für die Zeile.
index	`int`	Der Zeilenindex.
last	`boolean`	Gibt an, ob die Zeile die letzte in der Tabelle ist.
odd	`boolean`	Gibt an, ob die Zeile eine ungerade Nummer hat (für Stylingzwecke).

Tabellenspalten-Eigenschaften:

Eigenschaft	Typ	Beschreibung
align	ColumnAlignment	Die Ausrichtung der Spalte (links, Mitte, rechts).
id	String	Das Feld des Zeilenobjekts, um die Zellendaten abzurufen.
label	String	Der Name, der in der Spaltenüberschrift gerendert wird.
pinned	ColumnPinDirection	Die Anheftungsrichtung der Spalte (links, rechts, automatisch).
sortable	boolean	Wenn wahr, kann die Spalte sortiert werden.
sort	SortDirection	Die Sortierreihenfolge der Spalte.
type	ColumnType	Der Typ der Spalte (Text, Zahl, Boolean usw.).
minWidth	number	Die minimale Breite der Spalte in Pixel.

Häufige Renderer​

TextRenderer​

BadgeRenderer​

BooleanRenderer​

CurrencyRenderer​

Bedingtes Rendering​

Bedingungs-API​

Komposit-Rendering​

Benutzerdefinierte Renderer​

Erstellen eines benutzerdefinierten Renderers​

Zugriff auf mehrere Spalten​

Klickevents​

Eingebaute Renderer-Referenz​

Text und Labels​

Status und Indikatoren​

Zahlen, Währung und Daten​

Links und Medien​

Personen und Avatare​

Symbole und Aktionen​

Template-Referenz​

Lodash-Syntax​

Syntaxübersicht für lodash-Templates:​

Beispiele unter Verwendung von Zellendaten:​

Häufige Renderer

TextRenderer

BadgeRenderer

BooleanRenderer

CurrencyRenderer

Bedingtes Rendering

Bedingungs-API

Komposit-Rendering

Benutzerdefinierte Renderer

Erstellen eines benutzerdefinierten Renderers

Zugriff auf mehrere Spalten

Klickevents

Eingebaute Renderer-Referenz

Text und Labels

Status und Indikatoren

Zahlen, Währung und Daten

Links und Medien

Personen und Avatare

Symbole und Aktionen

Template-Referenz

Lodash-Syntax

Syntaxübersicht für lodash-Templates:

Beispiele unter Verwendung von Zellendaten: