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.8">
      <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.8">
      <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
Figure : 1. Render Function Applied to Table Cells

Which renders as follows:

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