Initializing help system before first use

# Creating Tables

Tables are a key tool in using and displaying data, and are built by defining a table or datagrid element and at least one column element.

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

View Designer
Code editor

    <vdl version="5.8">
        <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>

A similar result could be achieved using `<vdl-datagrid>` with the following code:

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

                <vdl-row>
                    <vdl-column heading="Recommended share allocations" heading-level="3">
    																    <vdl-datagrid page-mode="paged" page-size="5" column-filter="true" show-filter="true">
                            <vdl-datagrid-column entity="Shares_fraction"></vdl-datagrid-column>
    																								<vdl-datagrid-column entity="Shares_Return"></vdl-datagrid-column>
    																				</vdl-datagrid-column>
                    </vdl-column>
                </vdl-row>
            </vdl-section>
        </vdl-page>
    </vdl>

This renders as:
Figure : 1. 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.

Parent Topic Using VDL tables

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