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.
Properties
Table Properties
Default settings
Bootstrap settings
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:
Cell options:
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.
3. Add column headers and add Labels corresponding to the required data fields from the Data Model.
Save the Template Editor and Preview.
Last updated