# 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="/files/535kdJMCXZgey1XlYlDW" alt=""><figcaption><p>Data Grid Columns Configurator</p></figcaption></figure>

<figure><img src="/files/dWvqeAhW8coGcHsm4fK6" 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](/reference/servoycore/dev-api/database-manager/jsfoundset.md)

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

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

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

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

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.servoy.com/reference/servoy-developer/object-editors/columns-property-configurator.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.