Customizing Cell Rendering
The display characteristics of table cells can be controlled by providing a render function per column.
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.
|
Note Number formatting is explained in more detail in the next section.
<vdl version="4.1">
<vdl-page>
<br/>
<script>
function formatFrac(original) {
return insight.Formatter.formatNumber(original, '00%');
}
</script>
<vdl-section heading="Welcome to Portfolio Optimization"
heading-level="1">
<vdl-section 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="frac"
size="2"
render="=formatFrac"></vdl-table-column>
<vdl-table-column entity="RET"
size="2"
render="=function(data, type, row) {
return data + ' percent';
}"></vdl-table-column>
</vdl-table>
</vdl-section>
</vdl-section>
</vdl-page>
</vdl>
|
Render Function Applied to Table 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.