Table
This component displays a table.
Configuration
For general configuration options, see General Component Configuration.
Specific Configuration
data(string/array)-
Specifies the data for the table. This can be a list of data records or a bind string to link the data to data in
state. See also Binding Form Component Attributes dataUrl(string)-
Specifies a URL to load data from an external source.
cellEditing(boolean)-
Enables or disables cell editing. Depending on the column type, the appropriate cell editor is provided.
rowEditing(boolean)-
Enables or disables row editing. Depending on the column type, the appropriate cell and row editors are provided.
columns(array)-
Configures the columns. See also: Column Configuration
Column Configuration
type(string)-
Column type. Depending on the type, the value in the column is displayed in the correct format and the appropriate cell editor is provided.
Possible types are: text, number, date, boolean.
label(string)-
The text of the column header.
fieldName(string)-
Name of the field in the dataset from which the column value is to be retrieved.
flex(number)-
The width ratio relative to the other columns.
width(number)-
The width of the column
Example
{
"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 }
]
}
}
}
}