Table

Data binding

Set or modify the data binding for the control in the General properties tab. The table control is bound to a list of objects that populates the rows.

Configuration properties

Set or modify configuration properties for Table in the Configuration properties tab.

The appearance configuration properties for Table are listed in the following table:

Table 1. Appearance configuration properties for Table

Appearance configuration property	Description	Data type
Table style	The style of the table.
Color style	The color style of the control. The colors correspond to variables in the specified theme.	String
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 control 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 displayed 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.
Show pop-ups	Pop-up menus and controls appear over the table when the height is not specified. For example, if this option is selected, a Date Time Picker control appears over the table. Otherwise, the Date Time Picker is embedded in the table cell.	Boolean

The behavior configuration properties for Table are listed in the following table:

Table 2. Behavior configuration properties for Table

Behavior configuration property	Description	Data type
Selection mode	Set how many rows a user can select.	String
Show Delete button	Show or hide the button to delete a row.	Boolean
Show Footer	Show or hide the footer.	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: 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: 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 as 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: 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

The column configuration properties for Table are listed in the following table.

Note: These properties determine how the table is rendered at run time.

Table 3. Columns configuration properties for Table

Column configuration property	Description	Data type
Render as	How cell contents should be rendered: Coach View Seamless Coach View Simple HTML Custom Controls that are nested in table cells, such as Integer and Date Picker, typically have visible borders. The table also has its own border. To remove the borders of the nested controls, use Seamless Coach View. If you are using Coach View or Seamless Coach View, select showLabel to show the label of the nested coach view.	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: var div = document.createElement("div"); div.innerHTML = cell.row.data["firstName"]; cell.setSortValue(cell.row.data["firstName"]); return div;	Boolean
Options	Options to format the data in the column, depending on the data type. Date Picker datePattern For example, if the desired format is Monday 08 Jun, 2015, enter: "datePattern": "EEEE dd MMM, yyyy" Decimal thousandsSeparator, decimalPlaces, decimalSeparator, postfix, prefix For example: "decimalPlaces": 2, "decimalSeparator": ".", "thousandSeparator": ",", "prefix": "$" Integer thousandSeparator Link href These options work only if the column is rendered as as HTML or Custom. With Custom rendering, inside of the On custom cell event, you can use cell.getFormattedValue() to get a value with the formatting applied.	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 control 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 coach view label.	Boolean

Example

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[].

In the client-side human service, create a copy of the coach and wire it to the first coach. In the second coach, change the Table label to Profiles - Coach Two.

This is the result that you get when you run the coach:

Click the Add button, and enter some text in the new row. For example:

When you click the OK button, the second coach loads, and you see that the data including the new row you created is displayed in the table.

Events

Set or modify the event handlers for the control in the Events tab. You can set events to be triggered programmatically or when a user interacts with the control. 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 set cell.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 row selected by user: Activated when the user selects a row. For example:

  alert("Selected row has index " + row.index);

• On row add by user: Activated when the user adds a row with the Add Row button. If it returns a Javascript object, then the object is added as a new row, otherwise an empty object is added. For example:

  alert("Selected row has index " + row.index);

• On deleting row: 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);

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, see Building coaches.
For information about standard properties (General, Configuration, Positioning, Visibility, and HTML Attributes), see Coach view properties.