Table

These components represent a table.

Configuration

For general configuration options, see General component configuration.

Specific configuration

data (string/array): Specification of the data for the table. It could be a list of data records or a bind string to bind the data with data in state. See also Binding attributes of form components
dataUrl (string): Specification of a URL to load the data from the external source.
cellEditing (boolean): Activate/deactivate the editing of cells. Depending on the column type, a corresponding cell editor is offered.
rowEditing (boolean): Activate/deactivate the editing of rows. Depending on the column type, the corresponding cell and row editors are offered.
columns (array): Configuration of the columns. See also: Column configuration

Column configuration

type (string): Type of column. Depending on the type, the value in the column is displayed in the correct format and the correct cell editor is offered.

Possible types are: text, number, date, boolean.

label (string): the text of the column header.
fieldName (string): name of the field in the data set from which the value of the column is to be taken.
flex (number): the width ratio with 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 }
         ]
      }
     }
   }
}

Keywords: