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.
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>
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. |
|
|
| class |
Space-separated list of the classes of the element. |
|
|
| 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. |
accepts 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.
| Variable |
Type |
Description |
| rowData |
Array.<(string|boolean|number)> |
Data for all row cells |
| indices |
Array.<(string|boolean|number)> |
Data for the index columns of the row |
|
accepts 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. |
|
|
| 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 100px. |
|
|
