Die BPC Version 4.0 wird nicht mehr gewartet.

Sollten Sie diese BPC Version nutzen, empfehlen wir Ihnen eine Migration auf eine aktuelle Version. Die Dokumentation zur neusten BPC Version finden Sie hier. Sollten Sie Fragen haben, wenden Sie sich bitte an unseren Support.

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: