Initializing help system before first use

Modifying Table Configurations

Tables created in the View Designer, and in the Code editor are based on the DataTables open source project. For more, see http://www.datatables.net.

You can add DataTables-specific options to a table by using a table modifier in the code editor. 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 of the DataTables configuration options.

In this example, a modifier is applied to a table that adds the DataTables scrollY option, making it scrollable. 
<vdl version="4.6">
    <vdl-page>
      <script>
        function scrollableTable(config) {
          config.overrides.scrollY=200;
          return config;
        }
      </script>
      <vdl-section heading="Modifying Table Configurations">
        <vdl-table 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 of Table Modifier

Rendered View using modifier

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.6">  
  <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="500">
				<vdl-table-column entity="RET" size="6"></vdl-table-column>
			</vdl-table>
		</vdl-section>
	</vdl-page>
</vdl>

Rendered Result using lodash

Parent Topic Working with Tables

© 2001-2019 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.