Initializing help system before first use

# vdl-pivottable

The VDL Pivot Table component is a VDL Extension that provides an interface for users to create interactive pivot tables. Pivot tables are a powerful tool for analyzing and summarizing large datasets. The component allows users to visualize and manipulate data in a variety of ways, such as filtering, sorting, and aggregating data. Pivot Table requires grouped data to be passed via the data attribute e.g:

    [
        { key: [1, 1, 'UK'], value: 100},
        { key: [1, 2, 'USA'], value: 200},
        { key: [1, 2, 'FR'], value: 300},
        ...
    ]

VDL actions are available to fetch, group, aggregate and label data.

Add the `compact` class to the parent `vdl-page` to render the Pivot Table with compact style.

ColumnDefinition object passed to cell-render and tooltip-render:

    /* ColumnDefinition
        {
           field: string,
           title: string,
           editable: boolean | ((details: VdlDatagridCellDetails) => boolean),
           parentColumn: false | ColumnDefinition
        }
    */

since 5.2

### Example

    <vdl-var name="groupedData" value="=[]"></vdl-var>
    <vdl-var name="indexSetNames" value="=[]"></vdl-var>
    <vdl-var name="labelArrays" value="=[]"></vdl-var>

    <vdl-action-group name="getData">
        <vdl-action-get-entity-data entity="CountryStats"></vdl-action-get-entity-data>
        <vdl-action-group-by set-position="=[2,0,1]"></vdl-action-group-by>
        <vdl-action-aggregate></vdl-action-aggregate>
        <vdl-action-set-var var="groupedData"></vdl-action-set-var>
        <vdl-action-get-index-sets entity="CountryStats"></vdl-action-get-index-sets>
        <vdl-action-set-var var="indexSetNames"></vdl-action-set-var>
        <vdl-action command="getLabelArray" vdl-repeat="=name in vars.indexSetNames" value="=name"></vdl-action>
    </vdl-action-group>

    <vdl-action-group name="getLabelArray">
        <vdl-action-get-entity-data entity="=value" with-labels="true"></vdl-action-get-entity-data>
        <vdl-action-array-push var="labelArrays"></vdl-action-array-push>
    </vdl-action-group>

    <vdl-pivottable
        data="=vars.groupedData"
        row-dimensions="=['Match']"
        column-dimensions="=['Country', 'Stat']"
        column-titles="=[vars.labelArrays[0],vars.labelArrays[1]]"></vdl-pivottable>

### Attributes

always-show-selection | Whether to display selection on inactive grids. Set to true to keep selection on a grid when it becomes inactive. | since 5.2 |  |
cell-render | A custom cell render function or expression that is applied to all cells in the datagrid. This affects the rendered output of the cell only, sorting and filtering are unaffected. The cell-render function should return either the original data unchanged, some new data to display in the cell or a new HTML element to insert into the cell. In addition to returning the original or modified cell data it can also modify the HTML cellElement that is passed in. If a cell-render function is provided on vdl-datagrid and a child vdl-datagrid-column has a render function, then the vdl-datagrid-column render function will take precedence. Pivot Table generates the column definitions, so to identify special header or totals columns you can check columnDefinition.field matching "__empty", "__totals" or a numeric string, e.g. "0".
Variable | Type | Description
--- | --- | ---
data | (string|boolean|number) | The value of the cell being rendered. Its data type will match that of the array elements in this column. The cell value will be HTML escaped to avoid XSS security issues.
type | string | The type call data requested - this will currently always be display.
rowData | Array.<(string|boolean|number)> | The values from each cell in the current row. The order of the row data reflects the underlying order of the array indices rather than the display order.
columnDefinition | ColumnDefinition | The ColumnDefinition object representing the configuration of the cell's column. See the ColumnDefinition object describe in the pivottable description above. You can detect special columns with the field value "__empty", "__totals" or a numeric string, e.g. "0". You can also use columndefinition.parentColumn to iterate over nested columns headers to work out the location of the cell.
cellElement | HTMLElement | The cell HTML element. This can be modified or appended to, affecting the display of the cell.
| since 5.3 | requires expression |
class | Space-separated list of the classes of the element. | since 5.2 |  |
column-dimensions | Used to define the dimensions pivoted onto the columns. Supported format: An array of column group headings `["pivot column a", "pivot column b"]`, or a number representing the number of dimensions from the original data set that will be used as columns in the pivot grid. Both would result in two columns groups, but only the array of strings would result in the groups having headings. Pivoting will always be done by row first, then by column. If "column-set-positions" are also set, "column-dimensions" will only set column group headings. | since 5.2 | accepts expression |
column-set-position | The position of the keys that are used to produce the columns of the pivot grid. You can specify a single value or an array. For example: `key[x,y,z]` to pivot by y `column-set-position="1"`, or to pivot by z and x `column-set-position="=[2,0]"`. | since 5.2 | accepts expression |
column-sorters | An array of comparator functions used to sort column headings. This accepts an array of `(Function|undefined|null)` items. Each provided comparator function corresponds to the dimensions specified in column-dimension or column-set-positions attributes. The comparator functions are called with 2 objects to compare, each having value and label properties for the element in the column headers, `{value: PrimitiveType, label: string}`. e.g: `sortItems(a, b) => a.value - b.value;`. You can skip custom sorting on dimensions by using undefined or null values, e.g: `column-sorters="=[undefined, sortItems]"`. When no sorter is specified for a column dimension the headers will be sorted alpha-numerically by label, or value if no label is set. | since 5.3 | requires expression |
column-titles | An array of arrays used to decorate the column titles, supported formats are; Array of strings `["Column 1", "Column 2"]`, or an array of value/label objects: `[{value:x label: "x label"}]`. One array per dimension. When using the value/label array, the value represents the column index and the label the string that will be used to for the column heading. | since 5.2 | requires expression |
data | Use this attribute to pass data directly to vdl-pivottable. Supported formats: Array of key/value objects: `[{key:[x,y] value: z}]` | since 5.2 | requires expression |
header-tooltip-render | A custom render function or expression that is called for each column header in the pivottable and defines how to display the header's tooltip. It should return either a string or HTML content to display inside the tooltip, a DOM node to replace the tooltip or an undefined/nullish value to hide the tooltip.
Variable | Type | Description
--- | --- | ---
title | string | The title text of the column header the tooltip is being generated for.
columnDefinition | ColumnDefinition | The ColumnDefinition object representing the configuration of the tooltip header's column. See the ColumnDefinition object describe in the column-definition attribute.
headerElement | HTMLElement | The tooltip's header HTML element.
| since 5.7 | requires expression |
height | Provide a height to contain the pivottable, when page-mode is set to scrolling (default). Accepts integer or css units (50%, 200px). If no unit is specified, it defaults to pixels. | since 5.2 | accepts expression |
id | Specify an element id for the grid. Useful if you later want to target the grid using a selector. If not given then an id will be generated. | since 5.2 |  |
min-cell-width | Set the minimum cell width, in pixels. Accepts an integer value. | since 5.3 | accepts expression |
page-mode | By default, the grid will show all rows in scrolling mode. Set this attribute to paged to enable grid pagination. | since 5.2 |  |
page-size | The number of rows to show per-page in paged mode. Defaults to 50. | since 5.2 | accepts expression |
resizable-columns | Allow users to resize columns by dragging the column edges. The user can also double-click column edges to expand/collapse the column to the size of the contents. It is recommended that you set an "id" attribute on the Pivot Table when using this feature so that the column widths can be reinstated to the correct Pivot Table on redraw. Resized columns will retain their size on redraw during the current browser session only. Defaults to false. | since 5.8 |  |
row-dimensions | Used to define the dimensions pivoted onto the rows. Supported format: An array of row group headings `["pivot column a", "pivot column b"]`, or a number representing the number of dimensions from the original data set that will be used as rows in the pivot grid. Both would result in two row groups, but only the array of strings would result in the groups having headings. Pivoting will always be done by row first, then by column. When used in conjunction with "row-set-positions", "row-dimensions" will only set the row group headings. | since 5.2 | accepts expression |
row-filter | Expression to be used for filtering the rows of a <vdl-datagrid>. This must be an expression and should resolve to either a function or a boolean value. If a function it will be executed when grid updates. The function will have the following signature (rowData, indices) and should return a boolean.
Variable | Type | Description
--- | --- | ---
rowData | Array.<(string|boolean|number)> | The values from each cell in the current row. The order of the row data reflects the underlying order of the array indices rather than the display order.
indices | Array.<(string|boolean|number)> | Data for the index columns of the row
| since 5.2 | requires expression |
row-set-position | The position of the key or keys you wish to pivot onto the rows. You can specify a single value or an array. For example: `key[x,y,z]` to pivot by y `row-set-position="1"`, or to pivot by z and x `row-set-position="=[2,0]"`. The default value is 0. | since 5.2 | accepts expression |
row-sorters | An array of comparator functions used to sort data in the index columns. This accepts an array of `(Function|undefined|null)` items. Each provided comparator function corresponds to the dimensions specified in row-dimension or row-set-positions attributes. The comparator functions are called with 2 objects to compare, each having value and label properties for the data cells in the corresponding index rows, `{value: PrimitiveType, label: string}`. e.g: `sortItems(a, b) => a.value - b.value;`. You can skip custom sorting on dimensions by using undefined or null values, e.g: `row-sorters="=[undefined, sortItems]"`. When no sorter is specified for a row dimension the data will be sorted alpha-numerically by label, or value if no label is set. | since 5.3 | requires expression |
row-titles | An array of arrays used to decorate the row titles, supported formats are; Array of strings `["Column 1", "Column 2"]`, or an array of value/label objects: `[{value:x label: "x label"}]`. One array per dimension. | since 5.2 | requires expression |
show-column-calc | Display a calculated cell displaying the total for each column. | since 5.2 | accepts expression |
show-row-calc | Display a calculated cell displaying the total for each row. | since 5.2 | accepts expression |
tooltip-render | A custom render function or expression that is called for each cell in the pivottable and defines how to display the cell's tooltip.It should return either a string or HTML content to display inside the tooltip, a DOM node to replace the tooltip or an undefined/nullish value to hide the tooltip.The tooltip is not displayed on the bottom-calc row's cells.
Variable | Type | Description
--- | --- | ---
data | (string|boolean|number) | The value of the cell the tooltip is being generated for. Its data type will match that of the array elements in this column. The cell value will be HTML escaped to avoid XSS security issues.
type | string | The type cell data requested - this will currently always be display.
rowData | Array.<(string|boolean|number)> | The values from each cell in the current row. The order of the row data reflects the underlying order of the array indices rather than the display order.
columnDefinition | ColumnDefinition | The ColumnDefinition object representing the configuration of the tooltip cell's column. See the ColumnDefinition object describe in the pivottable description above.
cellElement | HTMLElement | The tooltip's cell HTML element.
| since 5.3 | requires expression |
width | Provide a width to contain the pivottable. Accepts integer or css units (50%, 200px). If no unit is specified, it defaults to pixels. If no width is provided the width defaults to 100% of its container. | since 5.2 |  |

Parent Topic VDL 5 Reference

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