# Table (Grid)

![](https://3821468174-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LrTlA1suFa5N48x_83N%2F-MDoymSPF1x4QZZW2ECU%2F-MDoyvcgpjRONazJSOdx%2FTable.png?alt=media\&token=b75cd517-3f61-4758-895b-4be4b4cf6695)

A Table is a multi-column List Box. Unlike List Boxes, Tables can have a Header and can be editable. You can load a Table with data from the Database or using the ‘Table Add Line’ Action. A Table can interact with the user through its Events. You should use a Table when you need to present an item composed with information that needs to be displayed en separated fields (columns).\
\
**Value -** It has no value.&#x20;

For the control in question, when opening its properties, the following window appears:&#x20;

{% hint style="info" %}
Depending on the control chosen, the properties are different.
{% endhint %}

### Properties

![](https://3821468174-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LrTlA1suFa5N48x_83N%2F-ME8nMMSaPTVYF1Jhprl%2F-ME8o26LZQVOa1ldTkB6%2FTable_Menu.PNG?alt=media\&token=914add7d-e756-4025-a934-a15aa4d1282a)

### Tab - General

* **Name** - Name of the Control. This Name will be used to identify the Control throughout the Project. The name of the Control can only contain letters, digits or underscore (\_).
* **Text** - *Not applicable to this control.*
* **Description** - *Not applicable to this control.*
* **Plane** - Plane of the Form where the Control should be created. Check the [Planes](https://doc.sysdevmobile.com/kalipso5/developing/form/option-window/planes) chapter for more information.
* **Visible** - With this option selected, the control is (or is not) visible.
* **Enabled** - With this option selected, the control is (or is not) enabled. It may be visible (previous option), but it may not be enabled. In this case an event associated with the control is not executed

**Layout**

* **X** - x position of the Control from left
* **Y** - y position of the Control from top&#x20;
* **Width** - Width of the Control. &#x20;
* **Height** -  Height of the Control

{% hint style="info" %}
In relation to all these layout options, it is possible to set this value in runtime via the “[**Set Property**](https://doc.sysdevmobile.com/kalipso5/developing/form/actions/actions-description/group-controls/set-property)” Action. You can also retrieve this value in runtime via the “[**Get Property**](https://doc.sysdevmobile.com/kalipso5/developing/form/actions/actions-description/group-controls/get-property)” Action.
{% endhint %}

**Style**

***Appearance***

* **Background** - Background color of the Control. You can set the color for the background.
* **Opacity** - Set the percentage of opacity for the background.
* **Grid Lines** - To activate or deactivate the Grid Lines of the table. In Win32 clients, without advanced style, it can only be none or both (vertical+horizontal).
* **Line Color** - Color of table lines.

{% hint style="info" %}
You can set this value is runtime via the “[**Set Property**](https://doc.sysdevmobile.com/kalipso5/developing/form/actions/actions-description/group-controls/set-property)” Action. You can retrieve this value in runtime via the “[**Get Property**](https://doc.sysdevmobile.com/kalipso5/developing/form/actions/actions-description/group-controls/get-property)” Action.
{% endhint %}

On the right side of the Style section, you can choose templates with pre-defined styles or configurable ones. By clicking on this option, the following style possibilities for the label appear:

* **Styles**
  * None
  * Base

***Text***

* **Font** - Font of the displayed Text
* **Size** - Font size of the displayed Text
* **Font Color** - Font color of the displayed Text and/or select the code in the color picker.
* **Font properties** - Set of options where you can choose whether the font is bold, italic or underline

***Border***

* **Border** - Yes or No.&#x20;

***Header*** (you can activate or not this feature)

* **Background** - Background color of the header
* **Text** - Text color of the header

\
\&#xNAN;***Advanced Style*** (you can activate or not this feature)

* **Row Height** - Define the height for the row
* **Docked Columns** - Define the number of docked columns
* **Transparent Background** - Set the background transparent
* **Odd Row** - Chose the color for the odd row
* **Even Row** - Chose the color for the even row<br>
* **Selection Mode** - Chose between row or cell
* **Editable** - If in the previous option you chose cell then this field is active. So it is possible to chose:
  * No
  * On Click
  * On double Click
  * On Click or ENTER
  * On double Click
  * On ENTER
  * By Action Only
* **Selected Row** - Chose the color for the selected row
* **Selected Text** - Chose the color for the selected text

### Tab - Content

![](https://3821468174-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LrTlA1suFa5N48x_83N%2F-ME8oBf-vfAIMqNxOknq%2F-ME8oOdUk9XQSnXjCg87%2FTable_Content_Menu.PNG?alt=media\&token=26c0b8e4-10c3-4521-83c9-33606539a969)

When accessing this tab, the system presents options to load the control through three sources.

Load controls from:

* **Nothing** - If select it will use the Kalipso database if filled.
* **Tables** - You can use data of one of the database you have imported
* **SQL Advanced** - You can use SQL Advance to fill the combo box.

In the table the necessary fields for the name, title, type, etc. are filled in. You can add and edit table columns.

For each tab, the options available are:

Tables

<figure><img src="https://3821468174-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LrTlA1suFa5N48x_83N%2Fuploads%2FFsA05MfcDbXq46L111YG%2FK_Tables_Content_1.png?alt=media&#x26;token=60651728-dc84-48ef-b38b-969c7cbfccd8" alt=""><figcaption></figcaption></figure>

* Kalipso Syntax
* String Expression
* Filter
* Order By

**SQL Advanced**

<figure><img src="https://3821468174-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LrTlA1suFa5N48x_83N%2Fuploads%2FoXsU1oIZFIDIkeerXkfl%2FK_Tables_Content_2.png?alt=media&#x26;token=eba93908-4063-4ae3-b593-fcdb38927023" alt=""><figcaption></figcaption></figure>

* Database Profile - Choose the desired pre existing profile
* SQL statement - Field to insert the SQL&#x20;

{% hint style="info" %}
**LIMIT** and **OFFSET**: internally Kalipso already uses "LIMIT 200 OFFSET 0". So if you need to use your own LIMIT and OFFSET you need to do: **SELECT \* FROM ( YOUR QUERY)**&#x20;

Ex:

"SELECT \* FROM (SELECT trackId, name FROM tracks LIMIT 10 OFFSET 10)"&#x20;
{% endhint %}

### Tab - Relations

![](https://3821468174-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LrTlA1suFa5N48x_83N%2F-ME8oBf-vfAIMqNxOknq%2F-ME8ocWom6HAkF14Hom2%2FTable_Relations_Menu.PNG?alt=media\&token=b7ab41bf-e54c-48c5-b9c2-9503557504c9)

You can use this option to link tables when you are using more than a Table to fill this object. This option is related to the one defined in the previous tab related to the content.

Having database tables associated with the table provided here, these tables will appear in this tabulation to make relations between them.

### Tab - **Actions**

![](https://3821468174-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LrTlA1suFa5N48x_83N%2F-MFBkljpFAD4zKKOic9z%2F-MFBmMDt8ZuUN33N-o8d%2FTable_Actions_Menu.PNG?alt=media\&token=44e0c2dd-90de-44eb-b8e2-543d5ef9bbf2)

For each control, actions can be associated. For this, with the control selected, it is possible to access this tab and associate an action to the control. For more information on the actions available and how to use them click [**here**](https://doc.sysdevmobile.com/kalipso5/developing/form/option-window/actions).‌‌‌

{% hint style="warning" %}
In order to save and use this control, you must, in the content tab, establish the source of the data. If not, Kalipso will not allow you to save.
{% endhint %}

#### Shortcuts‌ <a href="#shortcuts" id="shortcuts"></a>

* F2 - Actions
* F3 - General Properties
