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

Keywords: