This article provides an overview of the styling options and properties available for table controls via both the In Line Editor (ILE) and Style mode.
Tables are available in two principal layouts: Table and Tabular Table. You can toggle between the two by clicking the caret icon at the top of the ILE.
The Table layout is a mobile-optimized layout that includes, by default, up to four fields at the top level of the table with labels for each field oriented horizontally in each individual table row. Additional fields are included in a drilldown page accessed by tapping the row.
The Tabular Table layout follows a standard table pattern with column titles at the top. This layout is recommended for large form factors (i.e. tablets) only.
Within Style mode, you may select a template for your table's layout. Templates can be accessed by selecting the table control and navigating to the Items tab. You may navigate between different template options by clicking the previous and next arrows at the top of the page.
Currently, ten templates are available:
- Mobile Optimized: This template is most appropriate for tables with more than five columns that will be displayed on small form factors. By default, any columns after the first three are displayed in a drilldown page. More columns can be added to the top-level page by dragging and dropping them in the Items tab.
- Content with Detail, Value, and Description: This layout is optimized for displaying the most important data points for product pricing, purchase order, or other numeric data. Additional columns are included in the drilldown page.
- Content with Detail and Value: The template is a slight variation of the previous one and is intended for numeric data.
- Content and Value with Details: A variation of the previous template with details below the numeric data.
- Value with Columns: Using this layout, you may display all columns included in your table along with an image, button, or other control along the left hand side of row.
- Columns with Value: A mirror image of the previous template.
- Content with Detail: This layout provides a condensed view of table data, with only two columns visible on the main page. All other data is included in the drilldown page.
- Content: Includes only a single column's data on the main page. This layout provides a way to display dozens or even hundreds of table rows while maintaining a good mobile user experience.
- Content, Detail and Description Row: Content and details are arranged vertically with a value and description side-by-side.
- Content with Actionable Text: Extra space on the right accommodate buttons, such as approve/reject buttons or buttons used to interact with actionable text (e.g. phone numbers, email addresses, or locations addresses). These buttons can be used as an alternative to a swipe action or as an addition. Up to three buttons can be included.
Empty Table Message and Timing
When a table does not have any rows to display, by default, Capriza shows the outline of the table and a message to the user that no data is available.
You can choose whether you want to show the table at all if it’s empty and if so, what message to show the user.
In addition, you can choose how long to wait for the table data to become available before showing the message to the user. The default is 4 seconds.
Three style presets are offered to easily modify aspects of your table: Standard, Alternating rows, and Cards.
The Standard (default) preset displays all rows in white and has them take up the full width of the screen.
Sometimes it is easier to differentiate between rows by giving alternate rows a different background color. By using the "Alternating row" preset, each even row of the table will be given a grey background.
A Cards preset is also offered. This setting places the entire table in a card, creating a more pleasing UI on large form factors.
Additional Styling Properties
Several other minor styling options are available. They are as follows:
- Header: Enables you to add a label above the table.
- Content: Add tooltip text to your table. (Note: This feature is only available when Zapps are accessed on desktop or when accessibility features are enabled on the mobile device.)
- Margins: Specify margins for each side of your table.