# Property configurator for columns

## Overview

The **Property configurator for columns** is used to add or edit multiple columns in a [Data Grid](https://docs.servoy.com/guides/develop/application-design/ui-components/grids/data-grid_new) and [Table](https://docs.servoy.com/guides/develop/application-design/ui-components/grids/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.

<figure><img src="https://3933488479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjpWd52BKwABWxF2lScUK%2Fuploads%2Fgit-blob-72d77766cb247a3e6711236a4f6e9ce23c14920d%2Fimage.png?alt=media" alt=""><figcaption><p>Data Grid Columns Configurator</p></figcaption></figure>

<figure><img src="https://3933488479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjpWd52BKwABWxF2lScUK%2Fuploads%2Fgit-blob-52d1835c6f80955211c6ec713f40f5b3c0a2e46a%2Fimage.png?alt=media" alt=""><figcaption><p>Orange gear icon in the top-right corner of the Data Grid</p></figcaption></figure>

## 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 [Form's Foundset](#user-content-fn-1)[^1] is selected but it can be changed using the [Datasource Selection Wizard](#user-content-fn-2)[^2]

### Available Columns

Located below the Datasource Selection, it shows the list of Columns[^3], Calculations[^4], and Aggregates[^5] from the selected Datasource[^6]. 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                                                                                                                                                          |

{% hint style="info" %}
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
{% endhint %}

[^1]: Overview of [Foundset](https://docs.servoy.com/reference/servoycore/dev-api/database-manager/jsfoundset)

[^2]: Overview of the [Datasource Selection Wizard](https://docs.servoy.com/reference/servoy-developer/object-editors/datasource-selection-wizard)

[^3]: Overview of the [Column](https://docs.servoy.com/reference/servoycore/object-model/database-server/table/column) object

[^4]: Overview of the [Calculation](https://docs.servoy.com/reference/servoycore/object-model/database-server/table/calculation) object

[^5]: Overview of the [Aggregate](https://docs.servoy.com/reference/servoycore/object-model/database-server/table/aggregation) object

[^6]: Overview of the [Datasource](https://docs.servoy.com/reference/servoycore/dev-api/datasources) object