Comment on page
Table
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
Item | Description |
|---|---|
Width | |
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). |
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 |
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 |
|
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.
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 |
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 |
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.
- 4.Save the Template Editor and Preview.
Last modified 8mo ago