`table`

Diese Komponenten 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.
dataUrl (string): Angabe einer URL, um die Daten aus der externen Quelle zu laden.
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.

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 (string): Typ der Spalte, mögliche Typen sind: boolean, date, number und text.

Allgemeine Konfiguration

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

Beispiel

table.json

{
  "$schema": "https://forms.virtimo.net/5.1.0/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: