Property configurator for columns

Reference documentation for the Property configurator for columns

Overview

The Property configurator for columns is used to add or edit multiple columns in a Data Grid and Table components. It is shown automatically when adding the component to a form but it can be also shown by selecting the component on the form and clicking on the gear icon in the top-right corner.

Data Grid Columns Configurator

Orange gear icon in the top-right corner of the Data Grid

Sections

Datasource Selection

Located in the top-right corner, it allows the selection of the source from where the columns of the grid/table will be chosen, by default the is selected but it can be changed using the

Available Columns

Located below the Datasource Selection, it shows the list of , , and from the selected . It also shows Scope Variables and Form Variables.

A common use case is to have options in the grid/table to edit or delete the selected row, below the Datasource columns, there is a small section that shows a few pre-defined icons that can be used to know how to add icons as columns.

Clicking on any column or icon will add it to the list of selected columns.

Selected Columns

Occupies the right side of the dialog, it shows the list of columns that will be added to the grid/table.

For each selected column the following can be configured:

Name	Description
Dataprovider	A radio button that indicates if the column is meant to be used as a data provider, which means that the value of that specific column will be displayed in the grid/table cell
Style Class Dataprovider	A radio button that indicates if the column is meant to be used as a style class data provider, which means that the value of that specific column will be added as a CSS class to the grid/table cell
Style Class	A text box to enter any CSS class to be added to the grid/table cell
Header Title	A text box to enter the header of the column
Trash Icon	Used to remove the column from the grid/table

Currently, there is no way to reorder the columns from the wizard, this can be done directly in the component after the columns are added by dragging and dropping them