The column schema definition is used to specify which columns are to be displayed in the table, what the column header (title) should be, as well as whether the column can be moved (drag&drop), sortable, etc.
The key property is crucial, because it is responsible for the correct connections of elements from the data source to the column. Another equally important property is type, which allows you to interpret the values in the column depending on the type of data to be displayed.
You can edit the schema definition using the Edit Schema Definition button under the Data Table pane. It displays the Schema Editor window with detailed definitions of how the data table is presented to the end user.
The schema is edited in the JSON editor.
Basic Properties
The basic properties are added to each column in the data table by default. They can be edited in the Schema Editor window.
The following properties are available:
| Property | Description |
|---|---|
| type | Defines the type of variable displayed in the column. The following types are allowed: text, date, json, icon, fileSize, amount, number, boolean. |
| key | Defines a reference to the column. |
| title | Defines a column title. |
| sortable | Defines whether the column can be sorted. Possible values are: true or false. |
| draggable | Defines whether the column can be dragged to a different place. Possible values are: true or false. |
Additional Properties
You can add additional properties into the schema definition, depending on the column type.
The following properties are available:
| Property | Type | Description |
|---|---|---|
| locale | decimal, integer, amount, date | Language code in ICU format. For example, en-US is the code for English (United States). Locale determines the formatting of certain data types, such as dates. This value is nested under another digit-related column property. |
| digitsInfo | decimal, integer, amount, date | Decimal places, according to the Angular Decimal Pipe. This value is nested under another digit-related column property. For information on setting the digitsInfo parameter, search the Angular API online documentation for DecimalPipe. |
| decimalConfig | decimal | Configuration of the displayed decimal number. The following properties can be defined: locale and digitsInfo. |
| currencyConfig | amount | Configuration of the displayed currency. The following properties can be defined:
|
| dateConfig | date | Configuration of the displayed date. The following properties can be defined:
|
The following is an example of a schema definition of a table with four columns:
[
{
"type": "decimal",
"key": "id",
"title": "No",
"sortable": true,
"draggable": true
},
{
"type": "date",
"key": "creation_date",
"title": "Creation date",
"sortable": true,
"draggable": true,
"dateConfig": {
"locale": "en-GB",
"format": "full",
"tooltipFormat": "medium"
}
},
{
"type": "decimal",
"key": "people",
"title": "Numbers of interested people",
"sortable": true,
"draggable": true,
"decimalConfig": {
"digitsInfo": "1.0-0",
"locale": "pl-PL"
}
},
{
"type": "amount",
"key": "cost",
"title": "Cost of maintenance",
"sortable": true,
"draggable": true,
"currencyConfig": {
"code": "EUR",
"digitsInfo": "2.2-2",
"display": "€",
"locale": "de-DE"
}
}
]