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.

Options specific to the DataTables functionality can be added to a table through the code editor using a 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 of the DataTables configuration options.

In this example, a modifier is applied to a table that adds the DataTables scrollY option, making it scrollable.

Note The DataTables scroller extension is only compatible with Chrome and Firefox when used with Xpress Insight tables. Scrollable tables should only be used within fixed sized containers, such as a vdl-column with a Size attribute specified. Otherwise you may experience some unexpected behavior when the table is rendered in some situations.

<vdl version="4.7">
    <vdl-page>
        <script>
            function scrollableTable(config) {
                config.overrides.scrollY = 200;
                return config;
            }
        </script>
        <vdl-section heading="Modifying Table Configurations">
            <vdl-row>
                <vdl-column>
                    <vdl-table modifier="=scrollableTable">
                        <vdl-table-column entity="Shares_Return" heading="Return per share" size="6"
                        render="=function(data,type,row){return data + ' units';}"></vdl-table-column>
                    </vdl-table>
                </vdl-column>
            </vdl-row>
        </vdl-section>
    </vdl-page>
</vdl>

Rendered View using modifier

Contents

Index

Glossary

Search Results

Modifying Table Configurations