`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, a corresponding cell and row editor is offered.

General configuration

In addition to the configurations valid for all Configurationsthe following configurations can optionally be set: disabled, labels.

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 typebut a separate 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 an 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 Configurations, the following configurations can optionally be set: labels.

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: