Modifying Table Configurations
VDL tables are based on the DataTables open source project - much more information is available at
http://www.datatables.net.
You can add DataTables-specific options to a table by using a VDL table modifier.
Set the modifier attribute to an expression that references a function. The function is called before the table is drawn and prior to each table update. It is passed a configuration object and returns a modified version of that object.
The configuration object contains a property called overrides that can be used to add any DataTables configuration options.
In this example, a modifier is applied to a table that adds the DataTables
scrollY option, making it scrollable.
Because the table modifiers are just functions that accept a table configuration object and return a new one, you can easily apply functional composition. The
Lodash library provided with the JavaScript API helps when chaining multiple function calls:
<vdl version="4.1">
<vdl-page>
<br/>
<script>
function scrollableTable(config) {
config.overrides.scrollY=200;
return config;
}
</script>
<vdl-section>
<vdl-table show-filter="true"
column-filter="true"
modifier="=scrollableTable">
<vdl-table-column entity="RET"
size="6"
render="=function(data,type,row) {
return data + ' units';
}">
Return per share</vdl-table-column>
</vdl-table>
<vdl-section>
</vdl-page>
</vdl>
Rendered View using modifier
<vdl version="4.1">
<vdl-page>
<br/>
<script>
function scrollableTable(config) {
config.overrides.scrollY=200;
return config;
}
function makeEditable(config) {
config.columnOptions.forEach(function (columnOptions) {
if (columnOptions.title) {
columnOptions.title=columnOptions.title + '(editable)';
}
columnOptions.editable=true;
});
return config;
}
function logTableConfig(config) {
console.log('vdl-table config (' + config.tableId + ')', config)
return config;
}
</script>
<vdl-section>
<vdl-table modifier="=function(config) {
return _.flow(scrollableTable, makeEditable, logTableConfig)(config)}"
width="600">
<vdl-table-column entity="RET"
size="6"></vdl-table-column>
</vdl-table>
</vdl-section>
</vdl-page>
</vdl>