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 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="4.7"> 
  <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>

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.

Contents

Index

Glossary

Search Results

Customizing Cell Rendering