`table`

Diese Komponente stellt eine Tabelle dar.

Konfiguration

Für allgemeine Konfigurations-Optionen siehe Allgemeine Komponenten Konfiguration.

Spezifische Konfiguration

type ("table"): Typ der Komponente.
cellEditing (boolean): Aktivierung/Deaktivierung des Editierens von Zellen. Je nach Spaltentyp wird entsprechender Zelleneditor angeboten.
columns (array<Column>): Konfiguration der Spalten.
data (array | Binding): Angabe der Daten für die Tabelle. Es könnte eine Liste von Datensätzen sein oder ein Bind-String sein, um die Daten mit Daten im state zu binden.
rowEditing (boolean): Aktivierung/Deaktivierung des Editierens von Zeilen. Je nach Spaltentyp wird entsprechender Zellen- und Zeileneditor angeboten.

Allgemeine Konfiguration

Neben den für alle gültigen Konfigurationen, können optional folgende Konfigurationen gesetzt werden: disabled, label.

Individuelles Styling

Das visuelle Design von Tabellen wird primär über die globalen Variablen gesteuert. Für spezifische Abweichungen kann gezielt CSS eingesetzt werden.

Über das Attribut cls können eigene CSS-Regeln angewendet werden. Die Komponente bietet dafür folgende Standard-Angriffspunkte:

.table / .table .columns: Styles für den Container der Tabelle. Diese werden auf die Rest-Fläche angewendet, die nicht von den Zeilen der Tabelle gefüllt ist.
.table-label / .table .label: Direkter Zugriff auf das Label des Containers. Im Fall von .label werden automatisch die Labels der Spalten mit angepasst.
.table-label div: Zugriff auf die Schrift des Labels.

Spaltenkonfiguration

Spalten sind Teil einer Tabelle und können nur in dieser existieren. Der Typ einer Spalte entspricht nicht dem allgemeinem Typ, sondern einem eigenem Spaltentyp.

Spezifische Konfiguration

fieldName (string): Name des Feldes im Datensatz, aus dem der Wert der Spalte gezogen werden soll.
format (string): Format, in dem die Werte der Spalte angezeigt werden sollen. Beispielsweise "0" um eine number-Spalte als Integer anzuzeigen.
type (enum<"boolean" | "date" | "number" | "text">): Typ der Spalte.

Allgemeine Konfiguration

Neben den für alle gültigen Konfigurationen, können optional folgende Konfigurationen gesetzt werden: disabled, label.

readOnly ist verfügbar, sofern type "date", "number" oder "text" ist.

Individuelles Styling

Das visuelle Design der Tabellenspalten wird primär über die globalen Variablen gesteuert. Für spezifische Abweichungen kann gezielt CSS eingesetzt werden.

Über das Attribut cls können eigene CSS-Regeln angewendet werden. Die Komponente bietet dafür folgende Standard-Angriffspunkte:

.table .column-label div / .table .label div: Direkter Zugriff auf das Label der Spalte. Im Fall von .label wird automatisch das Label der Tabelle mit angepasst. Der Typ der Spalte kann als Prefix verwendet werden, um nur auf Spalten mit diesem typ zuzugreifen (z. B. .text-column-label).
.table .cell: Zugriff auf die Zellen der Tabelle. Der Typ der Spalte kann als Prefix verwendet werden, um nur auf Zellen mit diesem typ zuzugreifen (z. B. .text-cell).

Eine Verwendung von .table .cell mit cellEditing oder rowEditing ist nicht empfohlen, da bei einer Bearbeitung die Zellen neu initialisiert werden und die notwendigen Klassen gelöscht werden.

Beispiel

table.json

{
  "$schema": "https://forms.virtimo.net/5.0.x/schema.json",
  "metaData": {
    "version": 0,
    "id": 0
  },
  "configuration": {},
  "components": [
    {
      "type": "container",
      "label": "Table Component Example",
      "languageButton": true,
      "components": [
        {
          "type": "table",
          "label": "Table 1",
          "data": "${/data/table/data}",
          "height": 250,
          "rowEditing": true,
          "columns": [
            {
              "type": "text",
              "label": "Text Column",
              "fieldName": "t"
            },
            {
              "type": "number",
              "label": "Number Column",
              "fieldName": "n"
            }
          ]
        },
        {
          "type": "table",
          "label": "Table 2",
          "data": [
            { "d": "20.11.2020", "bool": false },
            { "d": "12/31/2025", "bool": true },
            { "d": "2025-12-30T23:00:00.000Z", "bool": false }
          ],
          "height": 250,
          "cellEditing": true,
          "columns": [
            {
              "label": "Date Column",
              "type": "date",
              "fieldName": "d"
            },
            {
              "label": "Bool Column",
              "type": "boolean",
              "fieldName": "bool"
            }
          ]
        }
      ]
    }
  ],
  "state": {
    "data": {
      "table": {
        "data": [
          { "t": "Mustermann", "n": 25 },
          { "t": "Jägermeister", "n": 85 },
          { "t": "Hwang", "n": 20 }
        ]
      }
    }
  }
}

Eingebettete Vorschau

Vorschau in separatem Fenster öffnen

Keywords: