`table`

This component represents a table.

Configuration

For general configuration options, see General component configuration.

Specific configuration

type ("table"): Type of component.
cellEditing (boolean): Activation/deactivation of cell editing. Depending on the column type, a corresponding cell editor is offered.
columns (array<Column>): Configuration of the columns.
data (array | Binding): 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.
dataUrl (string): Specification of a URL to load the data from the external source.
rowEditing (boolean): Activation/deactivation of row editing. Depending on the column type, corresponding cell and row editors are offered.

General configuration

In addition to the configurations valid for all, the following configurations can optionally be set: disabled, //errorTarget, //icon, label. //onChange, //readOnly, //required.

Column configuration

Columns are part of a table and can only exist in this table. The type of a column does not correspond to the general type, but to its own column type.

Specific configuration

fieldName (string): Name of the field in the data record from which the value of the column is to be taken.
format (string): Format in which the values of the column are to be displayed. For example "0" to display a number column as an integer.
type (string): Type of column, possible types are: boolean, date, number and text.

General configuration

In addition to the configurations valid for all, the following configurations can optionally be set: //disabled, //errorTarget, //icon, label. //onChange, //readOnly, //required.

Example

table.json

{
  "$schema": "https://forms.virtimo.net/5.1.0/schema.json",
  "metaData": {
    "version": 0,
    "id": 0
  },
  "configuration": {},
  "components": [
    {
      "type": "container",
      "label": "Table Component Example",
      "languageButton": true,
      "components": [
        {
          "type": "table",
          "label": "Table 1",
          "data": "${/data/table/data}",
          "height": 250,
          "rowEditing": true,
          "columns": [
            {
              "type": "text",
              "label": "Text Column",
              "fieldName": "t"
            },
            {
              "type": "number",
              "label": "Number Column",
              "fieldName": "n"
            }
          ]
        },
        {
          "type": "table",
          "label": "Table 2",
          "data": [
            { "d": "20.11.2020", "bool": false },
            { "d": "12/31/2025", "bool": true },
            { "d": "2025-12-30T23:00:00.000Z", "bool": false }
          ],
          "height": 250,
          "cellEditing": true,
          "columns": [
            {
              "label": "Date Column",
              "type": "date",
              "fieldName": "d"
            },
            {
              "label": "Bool Column",
              "type": "boolean",
              "fieldName": "bool"
            }
          ]
        }
      ]
    }
  ],
  "state": {
    "data": {
      "table": {
        "data": [
          { "t": "Mustermann", "n": 25 },
          { "t": "Jägermeister", "n": 85 },
          { "t": "Hwang", "n": 20 }
        ]
      }
    }
  }
}

Embedded preview

open preview in separate window

Keywords: