Table
Data binding
Set or modify the data binding for the view in the General properties tab. The table view is bound to a list of objects that populates the rows.
Configuration properties
Under Configuration, set or modify the configuration properties for the view.
- Screen size
- A configuration property that has the Screen Sizes icon
beside the property name can have different values for each screen size. If you do not set a value, the screen size inherits the value of the next larger screen size as its default value.
- Theme definitions
- Theme definitions specify the colors and styles for a view and determine its appearance. You can preview the look and feel of views in the theme editor. See Themes.
Appearance configuration property | Description | Data type |
---|---|---|
Table style | The style of the table. You can choose between
the following options:
|
TableStyle |
Color style | The color style of the table. The colors correspond to variables in the
specified theme. You can choose between the following options:
|
TableColorStyle |
Highlight selection | Shades rows that are selected. This option does not work if the color style is none. | Boolean |
Width![]() |
Specifies the width of the table. You can specify the width in px (pixels), % (percent), or em units. For example, 50px, 20%, or 0.4em. If no unit type is specified, then px is assumed. | String |
Height
![]() |
Specifies the height of the view in px (pixels) or em units. If no unit type is specified, then px is assumed. The height does not include the header or footer. If you specify a height and the rows exceed the available vertical space in the body of the table, the body becomes vertically scrollable. | String |
Wrap column headers | Wraps column headers depending on the space available to the table. | Boolean |
Show pop-ups | Pop-up menus and views appear over the table when the height is not specified. For example, if this option is selected, a Date Time Picker view appears over the table. Otherwise, the Date Time Picker is embedded in the table cell. | Boolean |
Style header and footer | Enables you to apply a different header and footer style. The Modern style, for example, streamlines pagination in the header and footer. | TableHFStyle |
Behavior configuration property | Description | Data type |
---|---|---|
Selection mode | Specify how many rows a user can select:
|
TableSelectionMode |
Show Delete button | Show or hide the button to delete a row. | Boolean |
Show Footer![]() |
Show or hide the footer. The footer is also displayed if any of the footer views are enabled, for example, Show Add button. | Boolean |
Show Add button | Show or hide the button to add a row. If the table is sorting or filtering,
the newly added row may not be displayed as the last row in the table, or may not be displayed at
all until sorting or filtering is cleared. Note that if you choose a Modern header and footer style and want to show the Add button, you must also select the Show footer option. |
Boolean |
Show table stats![]() |
Enables the display of table stats in the footer. For example, Showing
1 to 5 of 59 entries . Note that you must also select the Show footer option. |
Boolean |
Show pager![]() |
Show or hide the number of pages. The pager only displays 5 pages, therefore,
depending on the initial page size, and the number of records, the pages may not be consecutive (1,
2, 3...). For example: The table has a total of 50 entries, and the initial page size is set to 5. The page numbers that are shown are 1, 3, 5, 7, 10. The user clicks the Next button to navigate through the pages in order, or uses the page number buttons to move quickly through the pages. Note that you must also select the Show footer option. |
Boolean |
Show page sizer![]() |
Show or hide the page sizer which displays the number of rows on a page. | Boolean |
Initial page size![]() |
The number of rows displayed on a page. | Integer |
Resize columns | Allow users to resize columns by dragging the column separators. | Boolean |
ANY type | The specification of the business object definition type when the view is bound to an ANY type list. | TableANYType |
Column configuration property | Description | Data type |
---|---|---|
Render as | How cell contents should be rendered:
Views that are nested in table cells, such as Integer and Date Picker (deprecated), typically have visible borders. The table also has its own border. To remove the borders of the nested views, use a Seamless view. If you are using Coach View or Seamless Coach View, select showLabel to show the label of the nested view. For more information, see Rendering types. |
String |
Visibility | The column visibility. | String |
Sortable | Allow the data in this column to be sorted. By default, only columns that are
bound to simple types can be sorted. To sort a complex type you must set Render
as to Custom and use an On custom cell
event. For
example:
|
Boolean |
Options | Options to format the data in the column, depending on the data type.
|
String |
CSS | The CSS styling to apply to the column. You can use CSS style (for example,
For example, color:#00ff00 ) or CSS classes. If there is a colon in this field, the
table view assumes that you have specified a CSS style. Otherwise, it assumes that you have
specified one or more CSS class names. |
String |
Width | Width of column in px, em, or %. If no unit is specified px is assumed. Note: Consider leaving one column's width undefined so that the browser can calculate any remaining space and assign it to the column whose width is not specified. | String |
Label | The label of the column. | String |
showLabel | When the cell is rendered as a Coach View or a Seamless Coach View, shows or hides the view label. | Boolean |
Performance configuration property | Description | Data type |
---|---|---|
Async loading | Provides a better UI experience for large data sets (at the expense of slower overall row-loading time once the section starts loading). | Boolean |
Async batch size | Defines how many rows are loaded synchronously in an asynchronous batch. This can help tune/optimize synchronous vs. asynchronous loading performance. | Integer |
Example
- A name parameter of type String.
- A favoriteSport parameter of type String.
- A favoritePlayer parameter of type String.
var autoObject = [];
autoObject[0] = {};
autoObject[0].name = "Dylan";
autoObject[0].favoriteSport = "Tennis";
autoObject[0].favoritePlayer = "Federer";
autoObject[1] = {};
autoObject[1].name = "Max";
autoObject[1].favoriteSport = "Soccer";
autoObject[1].favoritePlayer = "Messi";
autoObject
The client-side human service has a private variable profiles of type Profiles[].
- General > Label is Profiles - Coach One.
- General > Binding is profiles[].
- A Name column with binding profiles.currentItem.name
- A Favorite Sport column with binding profiles.currentItem.favoriteSport
- A Favorite Player column with binding profiles.currentItem.favoritePlayer
- Configuration > Behavior
- Selection mode is Single
- Show Delete button is selected
- Show footer is selected
- Show Add button is selected
- Show table stats is selected
- Configuration > Columns has three entries with the following settings:
- RenderAs is set to Coach View
- Visibility is set to Visible
- Sortable is selected
In the client-side human service, create a copy of the page and wire it to the first page. In the second page, change the Table label to Profiles - Coach Two.



Rendering types
- Coach View
- Use this rendering type, which is the default type, to render the contents of a table column as
a view that executes JavaScript logic. This rendering type is more data-intensive and might have an
impact on the column rendering performance. For example, to get a modal section included in a table
to become visible when you click a button, you can use the Coach View rendering type and logic
similar to the following JavaScript in the
on Click
event of the button:${../Modal_Section1}.setVisible(true);
- Seamless Coach View
- Use this rendering type to remove the border of the views that are included in a table during rendering. You could use this rendering type to change the rendering appearance of typical form input views such as Integer or Decimal. Other than the difference in appearance, this rendering type is treated the same as a view.
- Simple HTML
- Use this rendering type to render the table contents using pure HTML, and only when the table fields do not execute any JavaScript logic. If used with fields that execute JavaScript (for example, in a view event), the view is not rendered on the page. This rendering type is the least data-intensive of the described types.
- Custom
- Use this rendering type to specify rendering options to a custom table column or to specify what
a field should look like. When you edit the configuration data for a table column, you can use the
Options edit box to specify optional formatting to apply to already created
objects. For example,
decimalPlaces': 2, 'decimalSeparator': '.', 'thousandsSeparator': ',', 'prefix':'$'
.
Events
Set or modify the event handlers for the view in the Events properties. You can set events to be triggered programmatically or when a user interacts with the view. For information about how to define and code events, see User-defined events.
Table has the following types of event handlers:
- On load: Activated when the table loads. For example:
me.setPageIndex(0);
- On custom cell: Activated when a cell that has custom rendering options
(set in the Columns configuration) loads. To use this event, you must set the Render as
configuration value to
Custom
in the Columns configuration. You can also use this event to setcell.setSortValue(cell.value)
for complex types. For example:var div = document.createElement("div"); div.innerHTML = cell.row.data[cell.varName]; return div;
- On rows loaded: Activated when the rows are displayed. This event is
applicable only for paged tables. For example:
alert("All rows have " + (all ? "" : "NOT") + " been loaded");
- On expandable row loaded: This event fires when an expandable row loads. To
use this event, you must enable allow expandable rows config option. For example when the row is
rendered as
Coach View
:
Example when the row is rendered asrow.views.forEach(function(view) { switch(view.context.viewid) { case "Text1": view.setData(row.data[varName]); break; case "Text2": view.setData(row.data[varName]); break; } });
Custom
:var div = document.createElement("div"); div.innerHTML = row.data[varName] + " " + row.data[varName]; return div;
- On row expanded: Triggers when the row expands. For example:
${Service_Call1}.execute();
- On row collapsed: Triggers when the row collapses. For
example:
alert("Collapsed row has index " + row.recordIndex);
- On row selected: Activated when the user selects a row. For example:
alert("Selected row has index " + row.recordIndex);
- On all rows selected: Activated when the user
uses Select All to select all the rows in a table that is in
Multiple selection mode or to clear the selection on all the table rows. It
provides a context variable that is named all to indicate that all or none of the
rows are selected. For example:
alert("All rows selected: " + all);
- On row added: This event is called when a row is being added by the user
through the
Add Row
button. If it returns a JavaScript object, then the object is added , otherwise an empty object is added. For example:alert("New row will be added");
- On row deleted: Activated when the user asks to delete a record. If the
event returns
false
, the record is not deleted. This event can be used to require user confirmation before the record is officially deleted. For example:return confirm("Are you sure you want to delete item " + item.str1);
- On sorting by column header: Activated
when the user clicks the sort icon in a table column header. It returns
false
to use the custom sorting and skip the default table sorting. You can use this event to setme.context.binding.set("value", myCustomSortedList)
to a custom-sorted list. For example:alert("Sorting " + col + " column in " + order + " order"); me.context.binding.set("value", myCustomSortedList); return false;
- On page sizer change: Activated when the user
changes the value for the per-page input field. For
example:
me.showPager(true);
-
On column resized: Activated when the user resizes a column. For
example:
alert("Column resized");
- On column dropped: Activated when the user drags and
drops a column.
alert("Column dropped");
Methods
For detailed information on the available methods for Table, see the Table JavaScript API.
Additional resources
For information about how to create a coach or page, see Building coaches.
For information about standard properties
(General, Configuration,
Positioning, Visibility, and HTML
Attributes), see View properties.