vdl-table
Render a table of related array entities. The array entities for each column are defined as child <vdl-table-column> elements. The common index sets are automatically detected. When selection-navigation is enabled the table will emit the following events: "selection-changed" - Triggered whenever the selection is changed, e.g. when user creates new selection. This event is triggered on the vdl-table element. Event handler also receives context of the selection, which includes selection cell list, active cell and selection type. "selection-removed" - Triggered whenever the selection is destroyed, e.g. when sorting and filtering. This event is triggered on the vdl-table element. See the JavaScript API Documentation, Table section for more details on the events.
Example
<script>
function capitalizeHeaders(config) {
config.columnOptions.forEach(function (columnOptions) {
if (columnOptions.title) {
columnOptions.title = columnOptions.title.toUpperCase();
}
});
return config;
}
</script>
<vdl-table modifier="=capitalizeHeaders">
<vdl-table-column entity="SupportCosts"></vdl-table-column>
<vdl-table-column entity="ServiceLevelAgreements"></vdl-table-column>
</vdl-table>
<vdl-var name="selectedRowData" value="=[]"></vdl-var>
<vdl-action-group name="handleSelectionChanged">
<vdl-action-set-var var="selectedRowData" value="=value ? value.activeCell.rowData : []"></vdl-action-set-var>
</vdl-action-group>
<vdl-action-group name="handleSelectionRemoved">
<vdl-action-set-var var="selectedRowData" value="=[]"></vdl-action-set-var>
</vdl-action-group>
<vdl-table vdl-event="'selection-changed':handleSelectionChanged, 'selection-removed':handleSelectionRemoved">
<vdl-table-column entity="SupportCosts"></vdl-table-column>
</vdl-table>Attributes
| add-remove-row | Setting this will show the add-remove row buttons at the bottom of the table. Set to "true" to prompt for index selection on row add. Set to "addrow-autoinc" will switch the behaviour to allow new index values to be created, incrementing from the highest value in the set(s). | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| always-show-selection | Whether to display selection on inactive tables. Set to "true" to keep selection on a table when it becomes inactive. Defaults to false. | accepts expression | ||||||||||
| class | Space-separated list of the classes of the element. | accepts expression | ||||||||||
| column-filter | Set this to "true" to enable the column filters. This will show a header row with filter inputs for each column. | |||||||||||
| id | Specify an element id for the table. Useful if you later want to target the table using a selector. If not given then an id will be generated. | |||||||||||
| modifier | Table modifier function. Will be called after the table configuration has been built. Provides a way to change the configuration before the table is rendered. Must be an expression that resolves to a function. Takes the table configuration object and should return the modified configuration. If an object is not returned then the table will be unaffected. | requires expression | ||||||||||
| page-mode | By default the table will show all rows. Set this attribute to "paged" to enable table pagination. | |||||||||||
| page-size | The number of rows to show per-page in paged mode. Defaults to 50. | accepts expression | ||||||||||
| row-filter | Expression to be used for filtering the rows of a <vdl-table>. This must be an expression and should resolve to either a function or a boolean value. If a function it will be executed when table updates. The function will have the following signature (rowData, indices) and should return a boolean.
|
requires expression | ||||||||||
| save-state | Set this to "false" to disable table state saving. By default table state is stored in the user's browser session so that user settings (e.g. page, sorting and search) are preserved if table data is reloaded. Defaults to true. | accepts expression | ||||||||||
| scenario | The default scenario to use for fetching data in the table. This can be overridden per column but the default will be used when a column does not specify a particular scenario and the index sets will be fetched from the default scenario. | accepts expression | ||||||||||
| selection-navigation | Enable/disable table navigation, selection and clipboard features. Set to "false" to disable these features. Defaults to true. | |||||||||||
| show-filter | Set this to "true" to enable the table filter. This will show a single input above the table to filter across all table cells. | |||||||||||
| width | Set the table to a fixed width, in pixels. Accepts an integer value. If set to the string "custom" then the table width is calculated by adding up all the widths of the columns in the table. If a column doesn't have a width specified then it is given a default value of 100%. | accepts expression |
© 2001-2020 Fair Isaac Corporation. All rights reserved. This documentation is the property of Fair Isaac Corporation (“FICO”). Receipt or possession of this documentation does not convey rights to disclose, reproduce, make derivative works, use, or allow others to use it except solely for internal evaluation purposes to determine whether to purchase a license to the software described in this documentation, or as otherwise set forth in a written software license agreement between you and FICO (or a FICO affiliate). Use of this documentation and the software described in it must conform strictly to the foregoing permitted uses, and no other use is permitted.