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 }
]
}
}
}
}