Initializing help system before first use

Working with Tables

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

A Table element inspects the properties of each array entity, discovering their index sets. 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 Table Column or <vdl-table-column> element for each column you wish the table to include.

We can use a table to display columns based on the Shares_fraction and Shares_Return entities:

View Designer

Code editor 
<vdl version="4.7">
    <vdl-page>
        <vdl-section heading="Welcome to Portfolio Optimization" heading-level="1">

            <vdl-row>
                <vdl-column heading="Recommended share allocations" heading-level="3">
                    <vdl-table page-mode="paged" page-size="5" column-filter="true" show-filter="true">
                        <vdl-table-column entity="Shares_fraction"></vdl-table-column>
                        <vdl-table-column entity="Shares_Return"></vdl-table-column>
                    </vdl-table>
                </vdl-column>
            </vdl-row>
        </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, either by:
  • selecting the column in the View Designer and editing the Heading attribute.
  • adding a heading text value to the <vdl-table-column> node 
<vdl-table-column entity="Shares_fraction" heading="The Shares Fraction Column"></vdl-table-column>.

Otherwise, the columns take their titles from model aliases or, if there are none, the model entity names. To customize any auto-generated index columns, you must provide a set attribute corresponding to the name of the index column to customize—as before, the custom title is provided as the text content of the <vdl-table-column> node.

This table contains two entities, if the index sets of all entities in the table are the same you can add as many as you wish.

Covered Topics
  • Configuring Pagination and Filtering
    You can further customize how Tables are displayed by using special attributes
  • Customizing Cell Rendering
    The display characteristics of table cells can be controlled by providing a render function per column.
  • Formatting Numbers
    Edit attributes to format integer and real entities for display in table columns, for instance if you need to display them as currency or percentage values.
  • Editing and Validating Table Cells
    All array data can be made editable in a table.
  • Adding and Removing Rows
    Controls can be added to 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
    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.
  • Filtering Table Rows
    Table rows can be filtered based on the result of an expression.
  • Table Layout and Display State Saving
    The Table Columns of a Table that is placed in an unsized layout Column component will stretch to fit the longest content in any row in the column.
Parent Topic Exploring the Core Components