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.
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.
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|
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.
Table Style Default, Elegant, Bordered, Striped, Hover Row, Condensed
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.
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.
These are the configuration option settings...
This is the result...
Note: The table is bound to a list object that populates the rows.
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 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.
For detailed information on the available methods for this control, access the JS Doc file.
Adding Rows to a Table Dynamically
- Author: Courtney Silva
- Date Created: June 16, 2015
- Date Modified: January 19, 2018