Initializing help system before first use

Working with VDL Tables

The <vdl-table> component is powerful mechanism that generates tables from a given list of array entities from one or more scenarios.

A <vdl-table> element inspects the properties of each array entity, discovering their index sets. If - and only if - all of the index sets match (same type, same length), then a table is generated. However, you can filter individual index sets per entry if you need to include arrays that contain additional indices. It should contain one <vdl-table-column> element for each column you wish the table to include.

In Binding the User Interface to Scenario Data we used a table to display two columns based on the frac and RET entities: 
<vdl version="4.1">
  <vdl-page>
    <vdl-section heading="Welcome to Portfolio Optimization"
                 heading-level="1">
      <vdl-section heading="Recommended share allocations"
                   heading-level="3">
        <vdl-table page-mode="paged"
                   page-size="5" 
                   show-filter="true"
                   column-filter="true">
          <vdl-table-column entity="frac"></vdl-table-column>
          <vdl-table-column entity="RET"></vdl-table-column>
        </vdl-table>
      </vdl-section>
    </vdl-section>
  </vdl-page>
</vdl>
This renders as:

Rendering a two-column Table

A row has been created for each element of the SHARES index set, which indexes both frac and RET.

You can change the column titles by specifying a custom title as the text content of the vdl-table-column nodes. Otherwise, the columns take their titles from model aliases or, if there are none, the model entity names. To customize any autogenerated index columns, you must provide a set attribute corresponding to the name of the index column to customize - again, the custom title is actually provided as the text content of the vdl-table-column node.

Note that the table contains two entities - as long as you ensure that the index sets of all entities are the same you can add as many as you wish.

Other elements of this code snippet are explained in later sections.

Covered Topics
  • Configuring Pagination and Filtering
    You can further customize how VDL tables are displayed through the use of special attributes - all are documented in the VDL Reference.
  • Customizing Cell Rendering
    The display characteristics of table cells can be controlled by providing a render function per column.
  • Formatting Numbers
    It is common to want to format integer and real entities for display in table columns - for example to display them as currency or percentage values.
  • Editing and Validating Table Cells
    All array data can be made editable in a VDL table.
  • Adding and Removing Rows
    Controls can be added to VDL tables that allow end users to add and remove rows, updating the model data accordingly.
  • Index Filtering
    If you need to display multiple arrays in the same table, but one or more of the arrays have additional indices, you need to filter the data by specifying fixed values for the additional indices.
  • Working with Multi-scenario Tables
    By default, displays data from the first scenario on the shelf. You can override this for the table or an individual column using the scenario attribute.
  • Modifying Table Configurations
    VDL tables are based on the DataTables open source project - much more information is available at
  • Filtering Table Rows
    Table rows can be filtered based on the result of an expression.
  • Table Layout and Display State Saving
    When a table is in an unsized column, its columns stretch to fit their contents. When the total table width hits the section width, it wraps content in the columns.
Parent Topic Exploring the Core VDL Components

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