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.
In cases where a property name contains a separator (.), you can use square brackets to specify the exact property name. For example, for available.cars, the correct path would be response.data.[available.cars]. This tells the application to look for a property named available.cars within the data object of the response. Nested square brackets are also supported.
In addition to accessing properties, you can also access specific elements in an array by their index. This is particularly useful when you want to display only a specific entry from an array. For example, consider the available.cars array. If you want to display only the first car in the array, you can do so by specifying the index of that car in the path. In JavaScript, arrays are zero-indexed, meaning the first element is at index 0: response.data.available_cars[0].
In addition to arrays, the data table can also generate and display rows based on objects. This is useful when your data structure consists of an array of objects, where each object represents a row in the data table.
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. |
| 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"
}
}
]