Initializing help system before first use

Customizing Cell Rendering

The display characteristics of table cells can be controlled by providing a render function per column.
Note: Number formatting is explained in more detail in the next section.

Code editor

The render function accepts three arguments:
  • The cell value.
  • The cell render action: filter, display, type or sort. These correspond to the actions performed when cells are rendered—in most cases, you can ignore this and return the same value for all render actions.
  • The values from each cell in the corresponding row.

The render function can be provided inline within the vdl-table-column or vdl-datagrid-column render attribute, or you can reference a function that has previously been defined in the view, allowing functions to be shared between multiple columns.

The following example includes a shared formatter which is used to format the values for sales resource allocation into percentages, together with an inline function that performs a simple transformation. 

<vdl version="5.5"> 
  <vdl-page>
        <script>
            function formatFrac(original) {
                return insight.Formatter.formatNumber(original, '00%');
            }
        </script>
        <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" show-filter="true" column-filter="true">
                        <vdl-table-column entity="Shares_fraction" size="2" render="=formatFrac"></vdl-table-column>
                        <vdl-table-column entity="Shares_Return" size="2" render="=function(data, type, row) { return data + ' percent';}"></vdl-table-column>
                    </vdl-table>
                </vdl-column>
            </vdl-row>
        </vdl-section>
    </vdl-page>
</vdl>
A similar result can be achieved using vdl-datagrid: 

<vdl version="5.5"> 
  <vdl-page>
        <script>
            function formatFrac(original) {
                return insight.Formatter.formatNumber(original, '00%');
            }
        </script>
        <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">
                        <vdl-datagrid-column entity="Shares_fraction" size="2" render="=formatFrac"></vdl-datagrid-column>
                        <vdl-datagrid-column entity="Shares_Return" size="2" render="=function(data, type, row) { return data + ' percent';}"></vdl-datagrid-column>
                    </vdl-datagrid>
                </vdl-column>
            </vdl-row>
        </vdl-section>
    </vdl-page>
</vdl>
Note: The vdl-datagrid table lacks a global filter. For a breakdown of available features, see Working with VDL Tables
Render Function Applied to Table Cells

Which renders as follows:


Rendered View of Customized Cells
The next example includes taking an action dependent upon the type argument passed to the italic function: 
function italic(data, type, row) { 
    data = data ? data : ''; 
    if (type === 'display') { 
        return 'Italic text ' + _.escape(data) + ''; 
    } else if (type === 'copy') { 
        return data + ' (in italics)'; 
    }
    return data;
}
In this case, if the cell is rendered following a copy action, the contents of the cell are rendered in italics.
Parent Topic Using VDL tables

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