Table

Introduction

The Table element can be used to create Rows and Columns to display other elements in a grid-structure with a fixed number of columns and rows that you define.

insert a column at the indicated location

insert a row at the indicated location

Properties

Table Properties

Item	Description
Width	You can set the width of the table using pixels or percentages or the implicit setting. The default is 100%, which uses all available space of the parent container in which the table is placed. Illustration Width set to 50% Table occupies 50% of the available space within the Panel container.
Display Mode	The Table container has 2 main display modes: Default (flat, basic and tight - useful to help position and align other elements) or Bootstrap (advanced, more options to set and usually needs more space).
First column as header	This will show all items in the first column as a header element (usually bold labels, defined by the CSS definition of the chosen Design Template).
First row as header	This will show all items in the first row as a header element (usually bold labels, defined by the CSS definition of the chosen Design Template).

Default settings

Item	Description
Style	you can set the Style to show No border or Table, where it shows borders around the cells (if so supported by the CSS definition in the selected Design Template - that may override this choice and still show no borders).
Cell padding	This adds space between the cell borders and the contents within the cell

Bootstrap settings

Item	Description
Bordered	If supported by the CSS definition in the Design Template, the table will show borders around the cells.
Condensed	This will use less whitespace around the table and within the cells, making the element a bit tighter (condensed). By default, a bootstrap-table uses quite some whitespace to nicely place all contents clear and separate.
First column as header	This will show all items in the first column as a header element (usually bold labels, defined by the CSS definition of the chosen Design Template).
First row as header	This will show all items in the first row as a header element (usually bold labels, defined by the CSS definition of the chosen Design Template).
Hoverable rows	This option will support highlighting (changing the background color) when hovering over the row
Striped	This will show all rows with switching background, like a zebra striping (usually clear and light grey background - depending on the chosen Design Template).
Responsiveness	Stretch - Tries to fill the available space optimally, without showing scrollbars within the table. Scrollbar - if columns and content need more space than is available, a horizontal scrollbar will be used at the bottom of the table. Column Break - This option should be used carefully. It tries to break rows and put columns on a next line if space is limited, but this usually yields unexpected and not-so-pretty results.

A peculiar thing with the Table element is, when you have set Display mode = Bootstrap, then set the First Column as Header or First Row as Header to true, and then change to Display mode = Default, the table will still be showing the first column or row as headers. You just need to know to switch to Bootstrap to set the options if you want this option for the basic Default table display.

Within the Table, you have Rows and Cells that also each have their own options to play with.

Row options:

Item	Description
Height	You can set a specific height in numeric pixel values
Visible When	You can use an expression to decide whether to show or hide the specific row

Cell options:

Item	Description
Width	You can set a specific height in numeric pixel values
Horizontal align	choose Left, Center, Justify or Right
Vertical align	choose Top, Middle or Bottom to align content in the cell.
Style context	If Table is set to Bootstrap, you can set a Style Context on a cell, Allowing you to change to color of a cell
Enable Tooltip	allows you to set a tooltip on the whole cell area
Visible When	You can use an expression to decide whether to show or hide the specific row

Illustration

This illustration makes use of Label. Refer the linked page if you would like to learn more about these widgets.

Let's continue with the EMS use case from the last topic, Alert, where we had constructed the Employees Overview page. On the page, we had shown the list of employees as cards (using Repeaters) and within a card, we had shown three fields for the employee, one below another, as read-only Form fields. Let's now try to align the three fields vertically within the card.

Note: Although Adaptive Columns would be best suited for this scenario, let's use Table for understanding the element better.

This is what we had from the last topic, Alert.

Let's remove the three fields from inside the Panel, which we are going to replace with a Table.

1. Click on the 'Table' icon, drag and drop it on the canvas at the place where you would like to insert it.

This inserts a Table that contains one cell, the default Display Mode being Bootstrap. Scroll back up to the Properties Section to learn more about this property.

2. To add a column after a specific column, hover over the top right corner of that column. This will bring up a '+' icon. Click on the icon.

To add a row before a specific row, hover over the top left corner of that row. This will bring up a '+' icon. Click on the icon.

To add a row after a specific row, hover over the bottom left corner of that row. This will bring up a '+' icon. Click on the icon.

For our use case, we want a row for the header and a row for the data. We also want 3 columns. So, follow the above steps and add 2 more columns and 1 more row.

Table with 2 rows and 3 columns

3. Add column headers and add Labels corresponding to the required data fields from the Data Model.

1. Save the Template Editor and Preview.