`table`

This component displays a table.

Configuration

For general configuration options, see General Component Configuration.

Specific Configuration

type ("table"): Component type.
cellEditing (boolean): Enable/disable cell editing. Depending on the column type, the appropriate cell editor is provided.
columns (array<Column>): Configuration of the columns.
data (array | Binding): Specification of the data for the table. This can be a list of data records or a bind string to link the data to data in the state.
rowEditing (boolean): Enable/disable row editing. Depending on the column type, the appropriate cell and row editor is provided.

General Configuration

In addition to the configurations that apply to all, the following configurations can be set optionally: //boxLabel settings, disabled, //errorTarget, //icon, label. //label settings, //onChange, //readOnly, //required.

Custom Styling

The visual design of tables is primarily controlled via global variables. CSS can be used specifically for certain deviations.

Using the cls , you can apply your own CSS rules. The component provides the following standard styling points for this purpose:

.table / .table .columns: Styles for the table container. These are applied to the remaining area not filled by the table rows.
.table-label / .table .label: Direct access to the container’s Label. In the case of .label, the column Labels are automatically adjusted as well.
.table-label div: Access to the Label’s font.

Column Configuration

Columns are part of a table and can only exist within it. The type of a column does not correspond to the general type, but to a specific column type.

Specific Configuration

fieldName (string): Name of the field in the data record from which the column’s value is to be retrieved.
format (string): Format in which the column’s values are to be displayed. For example, ` "0" ` to display a ` number` column as an integer. `
type ` (enum<"boolean" | "date" | "number" | "text">): ` ` Column type. `

` === General Configuration

In addition to the configurations that apply to all columns, the following optional configurations can be set: //boxLabel settings, disabled, //errorTarget, //icon, label. //label settings, //onChange, //readOnly, //required.

readOnly is available provided that type is "date," "number," or "text."

Custom Styling

The visual design of the table columns is primarily controlled via global variables. CSS can be used specifically for certain deviations.

Using the cls , you can apply your own CSS rules. The component provides the following standard access points for this purpose:

.table .column-label div / .table .label div: Direct access to the column Label. In the case of .label, the table Label is automatically adjusted as well. The column type can be used as a prefix to access only columns of that type (e.g., .text-column-label).
.table .cell: Access to the table’s cells. The column type can be used as a prefix to access only cells of that type (e.g., .text-cell).

Using .table .cell with cellEditing or rowEditing is not recommended, as editing the file will reinitialize the cells and delete the necessary classes.

Example

table.json

{
  "$schema": "https://forms.virtimo.net/5.0.x/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 a separate window

Keywords: