Using a Pivot Table

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, for example:

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

VDL actions can be used to fetch, group, aggregate, and label data.

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

Pivot table attributes


Attribute	Description
always-show-selection	Whether to display selection on inactive tables. Set to true to keep selection on a table when it becomes inactive.
class	Space-separated list of the classes of the element.
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 table. 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.
column-set-position	The position of the keys that are used to produce the columns of the pivot table. 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]"`.
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.
data	Use this attribute to pass data directly to vdl-pivottable. Supported formats: Array of key/value objects: `[{key:[x,y] value: z}]`
height	Table height. When page-mode is set to scrolling, you can set the height of the table to something other than the default.
id	Specify an element id for the table. Useful if you later want to target the table using a selector. If not given then an id will be generated.
page-mode	By default the table will show all rows in scrolling mode. Set this attribute to paged to enable table pagination.
page-size	The number of rows to show per-page in paged mode.
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 table. 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.
row-filter	Expression to be used for filtering the rows of a <vdl-pivottable>. This must be an expression and should resolve to either a function or a boolean value. If a function it will be executed when the table updates. The function will have the following signature (rowData, indices) and should return a boolean. `rowData` is an array containing 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` is an array containing the data for the index columns of the row.
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.
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.
show-column-calc	Display a calculated cell displaying the total for each column.
show-row-calc	Display a calculated cell displaying the total for each row.
width	Set the table to a fixed width in pixels. Accepts an integer value. If set to the string custom then the table width is calculated by adding up all the widths of the columns in the table. If a column doesn't have a width specified, then it is given a default value of 100px.

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

Contents

Index

Glossary

Search Results

Using a Pivot Table

Pivot table attributes