Table

The Table control allows you to create a table using other controls such as Text, Decimal, Output Text, etc.

Like almost all SPARK controls, you can trigger events that are fired when the user interacts with the control (see the Event and Methods sections below and the Event Handling article for more information).

This control is most commonly used when wanting to display data in a table format.

Behavior

Selection Mode None, Single, Multiple

Show Delete Button Visibility of the delete button

Show Footer Visibility of the footer

Show Table Stats Visibility of table stats

Show Pager Visibility of the pager

Show Page Sizer The page sizer allows the user to choose the number of rows viewable at a given time

Initial Page Size Pager size in integer (rows)

Note: The pager only displays 5 pagers, therefore, depending on the initial page size, and the number of records, the pager may not be consecutive (1, 2, 3...)

example 1:Table has a total of 50 entries, and the initial page size is set to 10

example 2: Table has a total of 50 entries, and the initial page size is set to 5

The user should click the 'Next' button to navigate through the table entries in order, or use the page number buttons to move quickly through the pages.

Columns

Render as Coach View, Seamless Coach View, Simple HTML, Custom

Note on Seamless Coach View: The border of the control is not visible nested within a table cell. (i.e. typical form input controls, such as the Integer control, date picker, etc that has a border, there is also a border from the table surrounding that control. To remove unseemly outlines, use Seamless Coach View.)

Visibility Visible, Read-Only, None

Sortable When checked, data is sortable (Only simple type binding for columns is supported by default). To sort a complex type you will need to use a custom Render, and an On New Cell event.

Options Optional formatting using already created objects. For example, if there is a Date Picker control and the desired format is Monday 08 Jun, 2015, enter: "datePattern": "EEEE dd MMM, yyyy"

(e.g. "decimalPlaces": 2, "decimalSeparator": ".", "thousandSeparator": ",", "prefix": "$")

Decimal	thousandsSeparator, decimalPlaces, decimalSeparator, postfix, prefix
DatePicker	datePattern
Link	href
Integer	thousandSeparator

Options only work if you are rendering it as HTML or Custom; with Custom rendering, inside of the On New Cell event, you can use cell.getFormattedValue() to get a value with formatting options applied.

Css Configure a specific column with styles or CSS classes. If there is a colon in this value, the table control assumes that you have specified a CSS style, otherwise, it will assume that you have specified one or more CSS class names. For example, color: #00ff00

Width Width of column in px, em, or %, if no unit is specified px is assumed. Note: It is suggested to leave one column's width undefined to allow the browser to calculate any remaining space and assign it to the column whose width was not specified.

Appearance

Table Style Default, Elegant, Bordered, Striped, Hover Row, Condensed

Color Style

Width Width in px, %, em; For example: 50px, 20%, 0.4em. If no unit is specified, px is assumed

Height Height of table in px, %, em (not including the header or footer if shown);
For example: 50px, 20%, 0.4em. If no unit is specified, px is assumed. If you specify a height and the rows displayed exceeds the available vertical space in the body of this table, the body becomes vertically scrollable.

Show pop-ups Displays pop-up menus in table cells when no height is specified.

Performance

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).

Async Batch Size Defines how many rows are loaded synchronously in an asynchronous batch. This can help tune/optimize synchronous vs. asynchronous loading performance.

Example

These are the configuration option settings...

This is the result...

Note: The table is bound to a list object that populates the rows.

Events

With the Table control, there are 5 types of event handlers:

On Load When the page loads
On Custom Cell When there is a new cell (In order for this event to work, the developer needs to create a custom render. This can also be used to set cell.setSortValue(cell.value) for complex types)
On Rows Loaded When rows are loaded
On Row Selected by User When a row is selected by user
On Row Add by User When a row is added by the user. If it returns a JavaScript object, thenthe object will be added as the new row, otherwise an empty object will be added.
On Deleting Row When a record is deleted. The on delete record can be used, for example, to require user confirmation before the record is officially deleted.

You can use JavaScript logic to affect the effects of the control, depending on the event. More information on using these controls can be found in the Event Handling article.

Methods

For detailed information on the available methods for this control, access the JS Doc file.