Tabelle

Diese Komponenten stellt eine Tabelle dar.

Konfiguration

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

Spezifische Konfiguration

data (string/array): Angabe der Daten für die Tabelle. Es könnte eine Liste von Datensätze sein oder ein Bind-String sein, um die Daten mit Daten im state zu binden. Siehe auch Attribute von Formular-Komponenten binden
dataUrl (string): Angabe eines URL, um die Daten aus der externen Quelle zu laden.
cellEditing (boolean): Aktivierung/Deaktivierung des Editierens von Zellen. Je nach Spaltentyp wird entsprechender Zelleneditor angeboten.
rowEditing (boolean): Aktivierung/Deaktivierung des Editierens von Zeilen. Je nach Spaltentyp wird entsprechender Zellen- und Zeileneditor angeboten.
columns (array): Konfiguration der Spalten. Siehe auch: Spaltenkonfiguration

Spaltenkonfiguration

type (string): Typ der Spalte. Abhängig vom Typ wird der Wert in der Spalte im richtigen Format angezeigt und richtigen Zelleneditor angeboten.

Mögliche Typen sind: text, number, date, boolean.

label (string): der Text des Spaltenkopfs.
fieldName (string): Name des Feldes im Datensatz, aus dem der Wert der Spalte gezogen werden soll.
flex (number): das Breiteverhältnis mit den anderen Spalten.
width (number): die Breite der Spalte

Beispiel

{
   "metaData": {
     "author": "Virtimo AG",
     "name": "Test - Form Table",
     "version": 1,
     "id": "form-table"
   },
   "components": [
      {
         "type": "container",
         "layout": "vertical",
         "components": [
            {
               "type": "table",
               "label": "FORMS TABLE",
               "data": "/data/table/data",
               "height": 400,
               "rowEditing": true,
               "columns": [
                  {
                     "type": "text",
                     "label": "Name",
                     "fieldName": "name",
                     "flex": 2
                  },
                  {
                     "type": "number",
                     "label": "Alter",
                     "fieldName": "age",
                     "format": "0",
                     "flex": 1
                  },
                  {
                     "type": "date",
                     "label": "Einzugsdatum",
                     "fieldName": "date",
                     "format": "d.m.Y",
                     "flex": 2
                  },
                  {
                     "label": "Veganer",
                     "type": "boolean",
                     "fieldName": "veganer",
                     "disabled": true,
                     "width": 100
                  }
               ]
            },
            {
               "type": "button",
               "label": "Submit",
               "action": "submit"
            }
         ]
      }
   ],
   "configuration": {
      "submitUrl": "http://localhost:3000/test"
   },
   "state": {
     "language": "de",
     "data": {
      "table": {
         "data" : [
            { "name": "Mustermann", "age": 25, "date": "20.11.2020", "veganer": false },
            { "name": "Musterfrau", "age": 20, "date": "10.12.2013", "veganer": true },
            { "name": "Alexander", "age": 35, "date": "16.01.2021", "veganer": false },
            { "name": "Jägermeister", "age": 85, "date": "12.07.2022", "veganer": false },
            { "name": "Hwang", "age": 20, "date": "26.03.1999", "veganer": true }
         ]
      }
     }
   }
}

Keywords: