PivotTable JAVASCRIPT UI Component API

PivotTable Javascript API

Class

PivotTable

PivotTable is a table of statistics that summarizes the data of a more extensive table.

Defines the animation mode for the element. When this property is set to 'none', all animations are disabled. Otherwise, setting this property to a supported value enables the corresponding animation behavior. Use this property to retrieve the current animation mode or specify the desired mode.

Allowed Values

"none" - animation is disabled
"simple" - ripple animation is disabled
"advanced" - all animations are enabled

Default value

"advanced"

Example

Set the animation property.

 <smart-pivot-table animation='none'></smart-pivot-table>

Set the animation property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.animation = 'simple';

Get the animation property.

 const pivottable = document.querySelector('smart-pivot-table');

 let animation = pivottable.animation;

columnReorderboolean

Enables or retrieves the current setting that determines whether users can reorder columns, allowing columns to be rearranged via drag-and-drop or similar interactions. If enabled, columns can be moved to a new position within the layout; if disabled, the column order remains fixed.

Default value

false

Try a demo showcasing the columnReorder property.

Example

Set the columnReorder property.

 <smart-pivot-table column-reorder></smart-pivot-table>

Set the columnReorder property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.columnReorder = false;

Get the columnReorder property.

 const pivottable = document.querySelector('smart-pivot-table');

 let columnReorder = pivottable.columnReorder;

columnsstring[] | { align?: string, allowFilter?: boolean, allowPivot?: boolean, allowRowGroup?: boolean, allowSort?: boolean, dataField?: string, dataType?: string, formatFunction?: { (settings: { value: any, row: string | number, column: string, cell: HTMLTableCellElement, template?: any }): void }, label?: string, pivot?: boolean, rowGroup?: boolean, summary?: string, summarySettings?: { align?: string, prefix?: string, decimalPlaces?: number, thousandsSeparator?: string, decimalSeparator?: string, negativesInBrackets?: boolean } }[]

Provides detailed metadata for each column in the PivotTable’s underlying tabular data source. These settings define attributes such as column names, data types, and formatting options. Using this configuration and the connected data source, the PivotTable dynamically generates its actual columns, ensuring that the displayed data structure accurately reflects both the source data and the specified settings.

Properties

align"center" | "left" | "right"

Sets or gets the header cell alignment for pivot and summary columns and cell alignment for row group columns.

Default value

"left"

Get the align property.

 const pivottable = document.querySelector('smart-pivot-table');

 let align = pivottable.columns[0].align;

allowFilterboolean

Sets or gets whether the column can be filtered.

Default value

true

Get the allowFilter property.

 const pivottable = document.querySelector('smart-pivot-table');

 let allowFilter = pivottable.columns[0].allowFilter;

allowPivotboolean

Sets or gets whether the column can be a pivot column.

Default value

false

Get the allowPivot property.

 const pivottable = document.querySelector('smart-pivot-table');

 let allowPivot = pivottable.columns[0].allowPivot;

allowRowGroupboolean

Sets or gets whether the column can be a row group column.

Default value

false

Get the allowRowGroup property.

 const pivottable = document.querySelector('smart-pivot-table');

 let allowRowGroup = pivottable.columns[0].allowRowGroup;

allowSortboolean

Sets or gets whether summary columns based on the column can be sorted.

Default value

true

Get the allowSort property.

 const pivottable = document.querySelector('smart-pivot-table');

 let allowSort = pivottable.columns[0].allowSort;

dataFieldstring

Sets or gets the column's data source-bound field.

Default value

Get the dataField property.

 const pivottable = document.querySelector('smart-pivot-table');

 let dataField = pivottable.columns[0].dataField;

dataType"boolean" | "date" | "number" | "string"

Sets or gets the data type of the column's cells.

Default value

"string"

Get the dataType property.

 const pivottable = document.querySelector('smart-pivot-table');

 let dataType = pivottable.columns[0].dataType;

formatFunction{ (settings: { value: any, row: string | number, column: string, cell: HTMLTableCellElement, template?: any }): void }

A callback function that can be used to modify the contents of a cell and the cell itself.

Get the formatFunction property.

 const pivottable = document.querySelector('smart-pivot-table');

 let formatFunction = pivottable.columns[0].formatFunction;

labelstring

Sets or gets the column's displayed text (for example in summary column headers).

Default value

Get the label property.

 const pivottable = document.querySelector('smart-pivot-table');

 let label = pivottable.columns[0].label;

pivotboolean

Sets or gets whether the column is a pivot column. Data from pivot columns is represented as column hierarchy in the PivotTable.

Default value

false

Get the pivot property.

 const pivottable = document.querySelector('smart-pivot-table');

 let pivot = pivottable.columns[0].pivot;

rowGroupboolean

Sets or gets whether the column is a row group column. Data from row group columns is represented as rows in the PivotTable. If multiple row groups are set, row hierarchy is displayed based on the order of the row group columns in the columns array.

Default value

false

Get the rowGroup property.

 const pivottable = document.querySelector('smart-pivot-table');

 let rowGroup = pivottable.columns[0].rowGroup;

summary"avg" | "count" | "max" | "median" | "min" | "product" | "stdev" | "stdevp" | "sum" | "var" | "varp"

Sets or gets the summary function to aggregate the column's data by and produce dynamic summary columns for each unique pivot data point. There must always be at least one summary column for the PivotTable to make sense. When columnTotals is enabled, all summary columns must have the same summary function set.

Allowed Values

"avg" - Average
"count" - Count
"max" - Maximum
"median" - Median
"min" - Minimum
"product" - Product
"stdev" - Standard deviation
"stdevp" - Standard deviation based on the entire population
"sum" - Sum
"var" - Variance
"varp" - Variance based on the entire population

Default value

"sum"

Get the summary property.

 const pivottable = document.querySelector('smart-pivot-table');

 let summary = pivottable.columns[0].summary;

summarySettings{ align?: string, prefix?: string, decimalPlaces?: number, thousandsSeparator?: string, decimalSeparator?: string, negativesInBrackets?: boolean }

Sets or gets an object with settings for cells in summary columns. These settings are not applied if column formatFunction is also implemented.

Get the summarySettings property.

 const pivottable = document.querySelector('smart-pivot-table');

 let summarySettings = pivottable.columns[0].summarySettings;

Try a demo showcasing the columns property.

Example

Set the columns property.

 <smart-pivot-table columns='[{ label: 'In progress', dataField: 'inProgress' }, { label: 'Testing', dataField: 'testing' }, { label: 'Done', dataField: 'done' }]'></smart-pivot-table>

Set the columns property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.columns = [{ label: 'In progress', dataField: 'inProgress' }, { label: 'Testing', dataField: 'testing', orientation: 'horizontal', columns: [{ label: 'Manual testing', dataField: 'manualTesting', selected: true, columns: [{ label: 'Desktop devices', dataField: 'desktop' }, { label: 'Mobile devices', dataField: 'mobile', selected: true }] }, { label: 'Unit testing', dataField: 'unitTesting' }] }];

Get the columns property.

 const pivottable = document.querySelector('smart-pivot-table');

 let columns = pivottable.columns;

columnTotalsboolean

Controls the visibility of total columns for each pivot data point. When enabled, total columns are displayed, showing summary values for each data group. Note: All summary columns must use the same summary function (e.g., sum, average) to ensure consistent calculation of the total columns. This setting both determines whether total columns are shown and allows you to retrieve their current visibility status.

Default value

false

Try a demo showcasing the columnTotals property.

Example

Set the columnTotals property.

 <smart-pivot-table column-totals></smart-pivot-table>

Set the columnTotals property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.columnTotals = false;

Get the columnTotals property.

 const pivottable = document.querySelector('smart-pivot-table');

 let columnTotals = pivottable.columnTotals;

columnTotalsPosition"near" | "far"

Gets or sets the position of the total columns, which are displayed only when columnTotals is enabled. This option determines where the summary columns appear in the table, such as at the end (right side) of all columns.

Allowed Values

"near" - The side nearest to the group column.
"far" - The side farthest from the group column.

Default value

"near"

Example

Set the columnTotalsPosition property.

 <smart-pivot-table column-totals-position='far'></smart-pivot-table>

Set the columnTotalsPosition property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.columnTotalsPosition = 'near';

Get the columnTotalsPosition property.

 const pivottable = document.querySelector('smart-pivot-table');

 let columnTotalsPosition = pivottable.columnTotalsPosition;

conditionalFormatting{ column?: string; condition?: string; firstValue?: number; fontFamily?: string; fontSize?: string; highlight?: string; secondValue?: number; text?: string; }[]

Gets or sets the conditional formatting rules that determine how the PivotTable's cells are visually styled based on their values or other criteria. This allows you to dynamically highlight, color, or format cells within the PivotTable according to specified conditions.

Properties

columnstring

The data field of a numeric column to format. Set 'all' to format all numeric columns.

Default value

"all"

Get the column property.

 const pivottable = document.querySelector('smart-pivot-table');

 let column = pivottable.conditionalFormatting.column;

condition"between" | "equal" | "greaterThan" | "lessThan" | "notEqual"

The formatting condition.

Default value

"lessThan"

Get the condition property.

 const pivottable = document.querySelector('smart-pivot-table');

 let condition = pivottable.conditionalFormatting.condition;

firstValuenumber

The value to compare by. When condition is 'between', this is the start (from) value.

Default value

Get the firstValue property.

 const pivottable = document.querySelector('smart-pivot-table');

 let firstValue = pivottable.conditionalFormatting.firstValue;

fontFamily"The default fontFamily as set in CSS" | "Arial" | "Courier New" | "Georgia" | "Times New Roman" | "Verdana"

The fontFamily to apply to formatted cells.

Default value

"The default fontFamily as set in CSS"

Get the fontFamily property.

 const pivottable = document.querySelector('smart-pivot-table');

 let fontFamily = pivottable.conditionalFormatting.fontFamily;

fontSize"8px" | "9px" | "10px" | "11px" | "12px" | "13px" | "14px" | "15px" | "16px"

The fontSize to apply to formatted cells. The fontSize as set in CSS is used by default.

Default value

"14px"

Get the fontSize property.

 const pivottable = document.querySelector('smart-pivot-table');

 let fontSize = pivottable.conditionalFormatting.fontSize;

highlightstring

The background color to apply to formatted cells.

Default value

"The default backgroundColor as set in CSS"

Get the highlight property.

 const pivottable = document.querySelector('smart-pivot-table');

 let highlight = pivottable.conditionalFormatting.highlight;

secondValuenumber

When condition is 'between', this is the end (to) value. Otherwise, this value is not used.

Default value

Get the secondValue property.

 const pivottable = document.querySelector('smart-pivot-table');

 let secondValue = pivottable.conditionalFormatting.secondValue;

textstring

The text color to apply to formatted cells.

Default value

"The default color as set in CSS"

Get the text property.

 const pivottable = document.querySelector('smart-pivot-table');

 let text = pivottable.conditionalFormatting.text;

Try a demo showcasing the conditionalFormatting property.

Example

Set the conditionalFormatting property.

 <smart-pivot-table conditional-formatting='[{ column: 'quantity', condition: 'greaterThan', firstValue: 8, text: '#6AA84F' }, { column: 'quantity', condition: 'lessThan', firstValue: 3, text: '#CC0000' }]'></smart-pivot-table>

Set the conditionalFormatting property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.conditionalFormatting = [{ column: 'price', condition: 'between', firstValue: 3, secondValue: 5, fontFamily: 'Courier New', text: '#0000FF' }];

Get the conditionalFormatting property.

 const pivottable = document.querySelector('smart-pivot-table');

 let conditionalFormatting = pivottable.conditionalFormatting;

dataSourceany

Specifies the initial tabular data source—such as a worksheet range, table, or external database—from which the PivotTable retrieves and organizes its data. This property identifies where the PivotTable’s underlying data originates.

Default value

Try a demo showcasing the dataSource property.

defaultSortByRowGroupsboolean

Specifies or retrieves whether the original tabular data source for the PivotTable should be pre-sorted according to the columns defined with the rowGroup property, and in the same order as those columns appear. This ensures that when the PivotTable is generated, its underlying data is already organized based on the designated row groups, potentially optimizing performance and ensuring consistent grouping behavior.

Default value

false

Example

Set the defaultSortByRowGroups property.

 <smart-pivot-table default-sort-by-row-groups></smart-pivot-table>

Set the defaultSortByRowGroups property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.defaultSortByRowGroups = false;

Get the defaultSortByRowGroups property.

 const pivottable = document.querySelector('smart-pivot-table');

 let defaultSortByRowGroups = pivottable.defaultSortByRowGroups;

designerboolean

Specifies whether the PivotTable designer panel is shown together with the PivotTable. When enabled, the designer provides an interface for configuring column settings, such as rearranging or renaming columns, and applying data filters directly within the PivotTable view. This property can be set to show or hide the designer alongside the table, and can also be used to determine the current visibility state of the designer.

Default value

false

Try a demo showcasing the designer property.

Example

Set the designer property.

 <smart-pivot-table designer></smart-pivot-table>

Set the designer property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.designer = false;

Get the designer property.

 const pivottable = document.querySelector('smart-pivot-table');

 let designer = pivottable.designer;

designerPosition"near" | "far"

Gets or sets the position of the PivotTable’s designer interface, which appears when the designer option is enabled. This property allows you to specify or retrieve where the designer UI is displayed within the application layout.

Allowed Values

"near" - The side nearest to the group column.
"far" - The side farthest from the group column.

Default value

"far"

Example

Set the designerPosition property.

 <smart-pivot-table designer-position='far'></smart-pivot-table>

Set the designerPosition property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.designerPosition = 'near';

Get the designerPosition property.

 const pivottable = document.querySelector('smart-pivot-table');

 let designerPosition = pivottable.designerPosition;

disabledboolean

Prevents the user from interacting with the element, disabling all mouse, keyboard, and touch inputs such as clicks, typing, and focus events. The element will not respond to any user actions while this setting is applied.

Default value

false

Example

Set the disabled property.

 <smart-pivot-table disabled></smart-pivot-table>

Set the disabled property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.disabled = false;

Get the disabled property.

 const pivottable = document.querySelector('smart-pivot-table');

 let disabled = pivottable.disabled;

drillDownboolean

When this option is enabled, double-clicking a PivotTable summary cell or pressing F2 will display the underlying tabular data that was used to calculate the aggregated value in that cell.

Default value

false

Try a demo showcasing the drillDown property.

Example

Set the drillDown property.

 <smart-pivot-table drill-down></smart-pivot-table>

Set the drillDown property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.drillDown = false;

Get the drillDown property.

 const pivottable = document.querySelector('smart-pivot-table');

 let drillDown = pivottable.drillDown;

drillDownDataExport"" | "xlsx" | "pdf" | "html" | "json" | "csv" | "tsv" | "xml"

Displays an export button within the drill-down dialog when this option is enabled, allowing users to export data directly from the dialog.

Default value

Example

Set the drillDownDataExport property.

 <smart-pivot-table drill-down-data-export=''></smart-pivot-table>

Set the drillDownDataExport property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.drillDownDataExport = 'xlsx';

Get the drillDownDataExport property.

 const pivottable = document.querySelector('smart-pivot-table');

 let drillDownDataExport = pivottable.drillDownDataExport;

drillDownDataExportNamestring

Specifies or retrieves the file name used when exporting data from the drill-down table. This determines the default name of the exported file generated during the export operation.

Default value

Example

Set the drillDownDataExportName property.

 <smart-pivot-table drill-down-data-export-name=''></smart-pivot-table>

Set the drillDownDataExportName property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.drillDownDataExportName = 'myExport';

Get the drillDownDataExportName property.

 const pivottable = document.querySelector('smart-pivot-table');

 let drillDownDataExportName = pivottable.drillDownDataExportName;

drillDownTableInit{ (table: HTMLElement ): void }

Defines or retrieves the callback function that is triggered when the drill-down dialog is opened in the PivotTable. The callback receives the drill-down Table component as its argument, allowing you to customize the appearance, behavior, or data of the resulting table before it is displayed. Use this function to apply custom formatting, event handlers, or modifications to the drill-down Table component.

Example

Set the drillDownTableInit property.

 <smart-pivot-table drill-down-table-init=''></smart-pivot-table>

Set the drillDownTableInit property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.drillDownTableInit = myExport;

Get the drillDownTableInit property.

 const pivottable = document.querySelector('smart-pivot-table');

 let drillDownTableInit = pivottable.drillDownTableInit;

drillDownCustomAction{ (originalRecords: [] ): void }

Enhancements for clarity and detail:

"Defines or retrieves the callback function that handles custom drill-down actions. When a drill-down event occurs in the PivotTable, this callback is invoked with the drill-down data source as its argument. By providing a custom callback, you can override the default drill-down user interface (which typically displays our Dialog with a Table) and implement your own UI or behavior for presenting the drill-down data."

Example

Set the drillDownCustomAction property.

 <smart-pivot-table drill-down-custom-action=''></smart-pivot-table>

Set the drillDownCustomAction property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.drillDownCustomAction = myExport;

Get the drillDownCustomAction property.

 const pivottable = document.querySelector('smart-pivot-table');

 let drillDownCustomAction = pivottable.drillDownCustomAction;

enableSortByRowGroupsboolean

Determines whether column-based sorting is enabled or disabled when using the classic row groups layout mode. When enabled, users can sort data within each column in the classic row grouping layout. This property can be used to either retrieve the current sorting status or set a new value.

Default value

false

Example

Set the enableSortByRowGroups property.

 <smart-pivot-table enable-sort-by-row-groups></smart-pivot-table>

Set the enableSortByRowGroups property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.enableSortByRowGroups = false;

Get the enableSortByRowGroups property.

 const pivottable = document.querySelector('smart-pivot-table');

 let enableSortByRowGroups = pivottable.enableSortByRowGroups;

freezeHeaderboolean

Determines whether the column headers in the PivotTable remain visible (sticky/frozen) at the top of the view when the user scrolls vertically. Setting this property to true keeps the column headers fixed in place, while false allows them to scroll out of view. This property can be used to set or retrieve the current sticky/frozen state of the PivotTable’s column headers.

Default value

false

Try a demo showcasing the freezeHeader property.

Example

Set the freezeHeader property.

 <smart-pivot-table freeze-header></smart-pivot-table>

Set the freezeHeader property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.freezeHeader = false;

Get the freezeHeader property.

 const pivottable = document.querySelector('smart-pivot-table');

 let freezeHeader = pivottable.freezeHeader;

getDefaultSummaryFunction{ (column: PivotTableColumn): string }

A callback function that provides the default summary operation (e.g., sum, average, count) for a summary column when the column is dynamically assigned as a summary field—such as when a user assigns it by dragging and dropping in the UI designer. This function is invoked to ensure that the appropriate summary logic is applied automatically whenever the summary column configuration changes at runtime.

Example

Set the getDefaultSummaryFunction property.

 <smart-pivot-table get-default-summary-function='getDefaultSummaryFunction'></smart-pivot-table>

Set the getDefaultSummaryFunction property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.getDefaultSummaryFunction = getDefaultSummaryFunctionCallback;

Get the getDefaultSummaryFunction property.

 const pivottable = document.querySelector('smart-pivot-table');

 let getDefaultSummaryFunction = pivottable.getDefaultSummaryFunction;

grandTotalboolean

Specifies whether to display a Grand Total row that aggregates the values of all data rows. When enabled, this option will add a summary row at the bottom of the data set, showing the total or combined values for each relevant column. Can also be used to retrieve the current setting.

Default value

false

Try a demo showcasing the grandTotal property.

Example

Set the grandTotal property.

 <smart-pivot-table grand-total></smart-pivot-table>

Set the grandTotal property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.grandTotal = false;

Get the grandTotal property.

 const pivottable = document.querySelector('smart-pivot-table');

 let grandTotal = pivottable.grandTotal;

groupLayout"classic" | "default"

Defines or retrieves how nested rows—determined by the specified rowGroup columns—are visually organized and displayed within the grid. This setting controls the appearance and structure of hierarchical row groupings.

Allowed Values

"classic" - Row nesting in a classic, OLAP, layout. In this layout, there is a separate column for each level of nesting.
"default" - Row nesting with tree grid-like style, with a separate row for each record in the hierarchy.

Default value

"default"

Try a demo showcasing the groupLayout property.

Example

Set the groupLayout property.

 <smart-pivot-table group-layout='classic'></smart-pivot-table>

Set the groupLayout property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.groupLayout = 'default';

Get the groupLayout property.

 const pivottable = document.querySelector('smart-pivot-table');

 let groupLayout = pivottable.groupLayout;

hideCellSelectionTooltipboolean

Determines whether the tooltip displaying detailed information is shown or hidden when multiple summary cells, each containing non-null values, are selected. When enabled, the tooltip with details will be suppressed; when disabled, the tooltip will appear as usual. This property can be set to control the tooltip's visibility or retrieved to check its current state.

Default value

false

Try a demo showcasing the hideCellSelectionTooltip property.

Example

Set the hideCellSelectionTooltip property.

 <smart-pivot-table hide-cell-selection-tooltip></smart-pivot-table>

Set the hideCellSelectionTooltip property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.hideCellSelectionTooltip = false;

Get the hideCellSelectionTooltip property.

 const pivottable = document.querySelector('smart-pivot-table');

 let hideCellSelectionTooltip = pivottable.hideCellSelectionTooltip;

hideEmptyRowsboolean

Specifies whether rows containing only 0 or null values should be hidden or displayed. This setting is only effective when one or more rowGroup columns are defined. Use this property to control the visibility of empty or zero-value rows within grouped data.

Default value

false

Example

Set the hideEmptyRows property.

 <smart-pivot-table hide-empty-rows></smart-pivot-table>

Set the hideEmptyRows property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.hideEmptyRows = false;

Get the hideEmptyRows property.

 const pivottable = document.querySelector('smart-pivot-table');

 let hideEmptyRows = pivottable.hideEmptyRows;

keyboardNavigationboolean

Enables or retrieves the setting that determines whether users can navigate the PivotTable using keyboard shortcuts or arrow keys. When enabled, keyboard navigation allows users to move between cells, fields, and items within the PivotTable, enhancing accessibility and ease of use.

Default value

false

Try a demo showcasing the keyboardNavigation property.

Example

Set the keyboardNavigation property.

 <smart-pivot-table keyboard-navigation></smart-pivot-table>

Set the keyboardNavigation property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.keyboardNavigation = false;

Get the keyboardNavigation property.

 const pivottable = document.querySelector('smart-pivot-table');

 let keyboardNavigation = pivottable.keyboardNavigation;

unlockKeystring

Sets or retrieves the unlockKey property, a unique code or token required to access and activate the product’s full functionality.

Default value

Example

Set the unlockKey property.

 <smart-pivot-table unlock-key=''></smart-pivot-table>

Set the unlockKey property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.unlockKey = '1111-2222-3333-4444-5555';

Get the unlockKey property.

 const pivottable = document.querySelector('smart-pivot-table');

 let unlockKey = pivottable.unlockKey;

localestring

Specifies or retrieves the current language code for the component. This property determines which set of localized messages from the messages object will be used for display. Changing the language automatically updates all text and labels according to the selected locale.

Default value

"en"

Try a demo showcasing the locale property.

Example

Set the locale property.

 <smart-pivot-table locale='de'></smart-pivot-table>

Set the locale property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.locale = 'fr';

Get the locale property.

 const pivottable = document.querySelector('smart-pivot-table');

 let locale = pivottable.locale;

messagesobject

Defines or retrieves an object containing the localized strings used within the element's user interface. This object allows you to customize text elements (such as labels, messages, or tooltips) in different languages. This property works together with the locale property to display the appropriate translations based on the selected or active locale.

Default value

Try a demo showcasing the messages property.

Example

Set the messages property.

 <smart-pivot-table messages='{"he":{"add":"הוסף תנאי","all":"כל העמודות","apply":"להגיש מועמדות","average":"מְמוּצָע","between":"בֵּין","calculation":"תַחשִׁיב","cancel":"לְבַטֵל","center":"מֶרְכָּז","clear":"ברור","clearFilter":"נקה את המסנן","close":"סגור","column":"טור:","columns":"עמודים","columnSettings":"הגדרות עמודה","condition":"מַצָב:","conditionalFormatting":"עיצוב מותנה","CONTAINS_CASE_SENSITIVE":"מכיל (רגיש רישיות)","CONTAINS":"מכיל","count":"לספור","decimalPlaces":"מקומות עשרוניים","decimalSeparator":"מפריד עשרוני","details":"פרטים","DOES_NOT_CONTAIN_CASE_SENSITIVE":"לא מכיל (רגיש רישיות)","DOES_NOT_CONTAIN":"לא מכיל","dragHerePivots":"גרור לכאן להגדרת צירים","dragHereRowGroups":"גרור לכאן להגדרת קבוצות שורות","dragHereSummaries":"גרור לכאן כדי לקבוע סיכומים","EMPTY":"ריק","ENDS_WITH_CASE_SENSITIVE":"מסתיים ב (רגיש רישיות)","ENDS_WITH":"נגמר עם","EQUAL_CASE_SENSITIVE":"שווה (רגיש לרישיות","equal":"שווה ל","EQUAL":"שווה","fields":"שדות","filter":"לְסַנֵן","filterCondition":"מצב סינון","filterPlaceholder":"לְסַנֵן","filters":"מסננים","firstButton":"ראשון","fontFamily":"משפחת גופן:","fontSize":"גודל גופן:","format":"פוּרמָט:","formatColumn":"עמוד עמוד","grandTotal":"סכום סופי","GREATER_THAN_OR_EQUAL":"גדול או שווה","GREATER_THAN":"גדול מ","greaterThan":"גדול מ","groupHeader":"קְבוּצָה","highlight":"שִׂיא","invalidValue":"ערך לא תקין","itemsPerPage":"פריטים לעמוד:","lastButton":"אחרון","left":"שמאלה","LESS_THAN_OR_EQUAL":"פחות מ או שווה","LESS_THAN":"פחות מ","lessThan":"פחות מ","moveTo":"לעבור ל","negativesInBrackets":"שלילי בסוגריים","nextButton":"הַבָּא","NOT_EMPTY":"לא ריק","NOT_EQUAL":"לא שווה","NOT_NULL":"לא ריק","notApplicable":"לא ישים","notEqual":"לא שווה ל","NULL":"null","numberAlignment":"יישור מספרים","numberFormat":"פורמט מספרים","numberPrefix":"קידומת מספרים","ok":"בסדר","pivots":"צירים","previousButton":"קודם","remove":"הסר את המצב","right":"ימין","row":"שׁוּרָה","rowGroups":"קבוצות שורה","sameSummaryFunctionRequired":"smartPivotTable: כאשר "columnTotals" מופעל, על כל עמודות הסיכום להיות מוגדרות באותה פונקציית "סיכום" (למשל '{{דוגמה}} ').","search":"לחפש...","secondValue":"ערך שני:","showRows":"הצג רשומות היכן:","STARTS_WITH_CASE_SENSITIVE":"מתחיל עם (רגיש רישיות)","STARTS_WITH":"מתחיל עם","sum":"סְכוּם","summaries":"סיכומים","summaryPrefix":"שֶׁל","summaryRequired":"smartPivotTable: דרושה לפחות עמודה אחת עם "summary".","text":"טֶקסט","textAlignment":"יישור טקסט","thousandsSeparator":"אלפי מפרידים","total":"סה"כ","value":"ערך:","with":"עם"}}'></smart-pivot-table>

Set the messages property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.messages = {"en":{"add":"Add condition","all":"All columns","apply":"Apply","average":"Average","between":"Between","calculation":"Calculation","cancel":"Cancel","center":"center","clear":"Clear","clearFilter":"Clear filter","close":"Close","column":"Column:","columns":"Columns","columnSettings":"Column settings","condition":"Condition:","conditionalFormatting":"Conditional Formatting","CONTAINS_CASE_SENSITIVE":"contains (case sensitive)","CONTAINS":"contains","count":"Count","decimalPlaces":"Decimal places","decimalSeparator":"Decimal separator","details":"Details","DOES_NOT_CONTAIN_CASE_SENSITIVE":"does not contain (case sensitive)","DOES_NOT_CONTAIN":"does not contain","dragHerePivots":"Drag here to set pivots","dragHereRowGroups":"Drag here to set row groups","dragHereSummaries":"Drag here to set summaries","EMPTY":"empty","ENDS_WITH_CASE_SENSITIVE":"ends with (case sensitive)","ENDS_WITH":"ends with","EQUAL_CASE_SENSITIVE":"equal (case sensitive)","equal":"Equal To","EQUAL":"equal","fields":"Fields","filter":"Filter","filterCondition":"Filter condition","filterPlaceholder":"Filter","filters":"Filters","firstButton":"First","fontFamily":"Font family:","fontSize":"Font size:","format":"Format:","formatColumn":"Format Column","grandTotal":"Grand Total","GREATER_THAN_OR_EQUAL":"greater than or equal","GREATER_THAN":"greater than","greaterThan":"Greater Than","groupHeader":"Group","highlight":"Highlight","invalidValue":"Invalid value","itemsPerPage":"Items per page:","lastButton":"Last","left":"left","LESS_THAN_OR_EQUAL":"less than or equal","LESS_THAN":"less than","lessThan":"Less Than","moveTo":"Move to","negativesInBrackets":"Negatives in brackets","nextButton":"Next","NOT_EMPTY":"not empty","NOT_EQUAL":"not equal","NOT_NULL":"not null","notApplicable":"N/A","notEqual":"Not Equal To","NULL":"null","numberAlignment":"Number alignment","numberFormat":"Number format","numberPrefix":"Number prefix","ok":"OK","pivots":"Pivots","previousButton":"Previous","remove":"Remove condition","right":"right","row":"Row","rowGroups":"Row Groups","sameSummaryFunctionRequired":"smartPivotTable: When "columnTotals" is enabled, all summary columns must have the same "summary" function set (e.g. '{{example}}').","search":"Search...","secondValue":"Second value:","showRows":"Show records where:","STARTS_WITH_CASE_SENSITIVE":"starts with (case sensitive)","STARTS_WITH":"starts with","sum":"Sum","summaries":"Summaries","summaryPrefix":"of","summaryRequired":"smartPivotTable: At least one column with "summary" is required.","text":"Text","textAlignment":"Text alignment","thousandsSeparator":"Thousands separator","total":"Total","value":"Value:","with":"with"}};

Get the messages property.

 const pivottable = document.querySelector('smart-pivot-table');

 let messages = pivottable.messages;

nullDefaultValuenumber

Specifies the value to display in cells that lack aggregated data. When set, this value will be shown in any cell where there is no aggregation result available. By default (null), these cells will appear empty. Setting a custom value (such as "N/A" or 0) allows you to indicate explicitly that no data is present in those cells.

Try a demo showcasing the nullDefaultValue property.

Example

Set the nullDefaultValue property.

 <smart-pivot-table null-default-value='0'></smart-pivot-table>

Set the nullDefaultValue property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.nullDefaultValue = null;

Get the nullDefaultValue property.

 const pivottable = document.querySelector('smart-pivot-table');

 let nullDefaultValue = pivottable.nullDefaultValue;

onCellRender{ (data: any, dynamicColumn: any, value: any, cell: HTMLTableCellElement): void }

A callback function that is invoked every time a cell within the PivotTable is rendered. This function allows you to customize the content, formatting, or behavior of individual PivotTable cells during the rendering process. It receives contextual information about the cell, such as its row, column, and data value.

Example

Set the onCellRender property.

 <smart-pivot-table on-cell-render='onCellRender'></smart-pivot-table>

Set the onCellRender property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.onCellRender = onCellRenderCallback;

Get the onCellRender property.

 const pivottable = document.querySelector('smart-pivot-table');

 let onCellRender = pivottable.onCellRender;

onColumnRender{ (settings: { text: string, cell: HTMLTableCellElement, column: PivotTableColumn, fullDefinition: any }): void }

A callback function that is invoked whenever a column header cell is rendered in the PivotTable. This function allows you to customize the appearance or behavior of each column header as it is generated during the rendering process.

Try a demo showcasing the onColumnRender property.

Example

Set the onColumnRender property.

 <smart-pivot-table on-column-render='onColumnRender'></smart-pivot-table>

Set the onColumnRender property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.onColumnRender = onColumnRenderCallback;

Get the onColumnRender property.

 const pivottable = document.querySelector('smart-pivot-table');

 let onColumnRender = pivottable.onColumnRender;

onInit{ (): void }

A callback function that is executed during the initialization phase of the PivotTable, allowing custom logic to run before the PivotTable is fully rendered or populated with data. This function receives relevant initialization parameters, enabling developers to modify settings or data sources prior to the PivotTable’s display.

Try a demo showcasing the onInit property.

Example

Set the onInit property.

 <smart-pivot-table on-init='onInit'></smart-pivot-table>

Set the onInit property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.onInit = onInitCallback;

Get the onInit property.

 const pivottable = document.querySelector('smart-pivot-table');

 let onInit = pivottable.onInit;

pageSize"10" | "25" | "50"

Specifies or retrieves the number of items displayed per page when paging is enabled. This property determines the page size, allowing you to control how many records are shown on each paginated view.

Default value

Example

Set the pageSize property.

 <smart-pivot-table page-size='25'></smart-pivot-table>

Set the pageSize property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.pageSize = 50;

Get the pageSize property.

 const pivottable = document.querySelector('smart-pivot-table');

 let pageSize = pivottable.pageSize;

pageIndexnumber

Sets or retrieves the current page index, using a zero-based numbering system (i.e., the first page is index 0). This property is applicable only when paging is enabled, allowing navigation between different pages of content.

Default value

Example

Set the pageIndex property.

 <smart-pivot-table page-index='1'></smart-pivot-table>

Set the pageIndex property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.pageIndex = 7;

Get the pageIndex property.

 const pivottable = document.querySelector('smart-pivot-table');

 let pageIndex = pivottable.pageIndex;

pagingboolean

Gets or sets a value indicating whether paging functionality is enabled, allowing data to be divided and displayed across multiple pages.

Default value

false

Try a demo showcasing the paging property.

Example

Set the paging property.

 <smart-pivot-table paging></smart-pivot-table>

Set the paging property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.paging = false;

Get the paging property.

 const pivottable = document.querySelector('smart-pivot-table');

 let paging = pivottable.paging;

rightToLeftboolean

Specifies or retrieves whether the element's text direction and alignment are set to support right-to-left (RTL) languages—such as Arabic or Hebrew—by adapting the layout and text flow accordingly. This property ensures that the element properly displays content for users whose locale requires RTL formatting.

Default value

false

Try a demo showcasing the rightToLeft property.

Example

Set the rightToLeft property.

 <smart-pivot-table right-to-left></smart-pivot-table>

Set the rightToLeft property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.rightToLeft = true;

Get the rightToLeft property.

 const pivottable = document.querySelector('smart-pivot-table');

 let rightToLeft = pivottable.rightToLeft;

rowSortboolean

Determines whether sorting by row is enabled when a row group cell is clicked. If columnTotals is also enabled, sorting will be applied within each "column group" individually. If columnTotals is not enabled, sorting will be applied across all columns together. This property can be used to both retrieve the current sorting behavior and to enable or disable sorting by row group interactions.

Default value

false

Try a demo showcasing the rowSort property.

Example

Set the rowSort property.

 <smart-pivot-table row-sort></smart-pivot-table>

Set the rowSort property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.rowSort = false;

Get the rowSort property.

 const pivottable = document.querySelector('smart-pivot-table');

 let rowSort = pivottable.rowSort;

rowSummaryboolean

Controls whether row summaries appear in the row headers. When set to true, row headers display summarized information such as "Peterson(40)" (indicating a summary value). When set to false, row headers show only the row label, like "Peterson", without any summary details. Use this option to toggle the visibility of summary data in your row headers.

Default value

true

Example

Set the rowSummary property.

 <smart-pivot-table row-summary></smart-pivot-table>

Set the rowSummary property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.rowSummary = false;

Get the rowSummary property.

 const pivottable = document.querySelector('smart-pivot-table');

 let rowSummary = pivottable.rowSummary;

rowTotalsboolean

Determines whether to display row total columns alongside each summary column. When enabled, this option will show an additional column for each summary column, presenting the total value for each row. You can use this property to enable (show) or disable (hide) row total columns as needed.

Default value

false

Try a demo showcasing the rowTotals property.

Example

Set the rowTotals property.

 <smart-pivot-table row-totals></smart-pivot-table>

Set the rowTotals property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.rowTotals = false;

Get the rowTotals property.

 const pivottable = document.querySelector('smart-pivot-table');

 let rowTotals = pivottable.rowTotals;

rowTotalsPosition"near" | "far"

Sets or retrieves the position of row total columns within the table. This option determines where the columns displaying the total values for each row will appear when the rowTotals feature is enabled. Adjusting this setting allows you to control whether the row totals are displayed at the beginning, end, or a specific location among the table columns.

Allowed Values

"near" - The side nearest to the group column.
"far" - The side farthest from the group column.

Default value

"near"

Example

Set the rowTotalsPosition property.

 <smart-pivot-table row-totals-position='far'></smart-pivot-table>

Set the rowTotalsPosition property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.rowTotalsPosition = 'near';

Get the rowTotalsPosition property.

 const pivottable = document.querySelector('smart-pivot-table');

 let rowTotalsPosition = pivottable.rowTotalsPosition;

selectionboolean

Determines whether users can select table rows using checkboxes. When enabled, a checkbox appears next to each row, allowing selection. This property can be used to enable or check the current state of row selection functionality.

Default value

false

Try a demo showcasing the selection property.

Example

Set the selection property.

 <smart-pivot-table selection></smart-pivot-table>

Set the selection property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.selection = false;

Get the selection property.

 const pivottable = document.querySelector('smart-pivot-table');

 let selection = pivottable.selection;

selectionMode"many" | "extended" | "cell"

Specifies or retrieves the selection mode for the component. This property is effective only when the selection feature is enabled. When disabled, changing or accessing the selection mode has no effect.

Allowed Values

"many" - Multiple rows can be selected by clicking the rows or their respective checkboxes.
"extended" - Single row can be selected by clicking it. Multiple rows can be selected by Ctrl- or Shift-clicking the rows or just clicking their respective checkboxes.
"cell" - Multiple cells can be selected by click, click-drag, Ctrl + click, or Shift + arrow keys, as well as via standard keyboard navigation. When multiple summary cells with non-null values are selected, a tooltip showng the Average, Count, and Sum of the values is displayed (unless the property hideCellSelectionTooltip is enabled.)

Default value

"many"

Example

Set the selectionMode property.

 <smart-pivot-table selection-mode='extended'></smart-pivot-table>

Set the selectionMode property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.selectionMode = 'many';

Get the selectionMode property.

 const pivottable = document.querySelector('smart-pivot-table');

 let selectionMode = pivottable.selectionMode;

sortMode"none" | "one" | "many"

Specifies the sorting mode applied to the PivotTable, controlling how data rows or columns are ordered (e.g., ascending, descending, or custom criteria). This setting determines the sequence in which PivotTable items are displayed based on the selected sort option.

Default value

"none"

Try a demo showcasing the sortMode property.

Example

Set the sortMode property.

 <smart-pivot-table sort-mode='one'></smart-pivot-table>

Set the sortMode property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.sortMode = 'many';

Get the sortMode property.

 const pivottable = document.querySelector('smart-pivot-table');

 let sortMode = pivottable.sortMode;

themestring

Specifies the theme applied to the element. The theme controls the overall appearance, including colors, fonts, and styles, ensuring a consistent look and feel throughout the element.

Default value

Example

Set the theme property.

 <smart-pivot-table theme='dark'></smart-pivot-table>

Set the theme property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.theme = 'red';

Get the theme property.

 const pivottable = document.querySelector('smart-pivot-table');

 let theme = pivottable.theme;

toolbarboolean

Controls the visibility of the PivotTable toolbar. When displayed, the toolbar includes two breadcrumb components that enable users to modify the row groups and pivot columns directly. It also features "Conditional Formatting" and "Fields" buttons, each of which opens a dialog for configuring additional PivotTable settings.

Default value

false

Try a demo showcasing the toolbar property.

Example

Set the toolbar property.

 <smart-pivot-table toolbar></smart-pivot-table>

Set the toolbar property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.toolbar = false;

Get the toolbar property.

 const pivottable = document.querySelector('smart-pivot-table');

 let toolbar = pivottable.toolbar;

Determines whether a tooltip displaying the full content will appear when hovering over a table cell with truncated (overflowing) content. When enabled, users can view the entire cell content by hovering their mouse over the truncated cell. This property can be set to enable or disable this tooltip behavior and can also be used to check its current status.

Default value

false

Example

Set the tooltip property.

 <smart-pivot-table tooltip></smart-pivot-table>

Set the tooltip property by using the HTML Element's instance.

 const pivottable = document.querySelector('smart-pivot-table');

 pivottable.tooltip = false;

Get the tooltip property.

 const pivottable = document.querySelector('smart-pivot-table');

 let tooltip = pivottable.tooltip;

Events

cellClickCustomEvent

This event is triggered whenever a user clicks on a cell within the component. It provides details about the clicked cell, such as its row and column indices, allowing developers to handle cell-specific actions in response to user interaction.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onCellClick

Arguments

evCustomEvent

ev.detailObject

ev.detail.dataField - The data field of the cell's dynamic column.

ev.detail.row - The data of the cell's row.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of cellClick event.

const pivottable = document.querySelector('smart-pivot-table');
pivottable.addEventListener('cellClick', function (event) {
    const detail = event.detail,
        dataField = detail.dataField,
        row = detail.row;

	// event handling code goes here.
})

changeCustomEvent

This event is triggered whenever the user modifies the current selection, such as highlighting a different portion of text or choosing a new option within a selectable element. It allows you to respond in real time to changes in selection state.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onChange

Arguments

evCustomEvent

ev.detailObject

ev.detail.type - The type of action that initiated the selection change. Possible types: 'programmatic', 'interaction', 'remove'.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of change event.

const pivottable = document.querySelector('smart-pivot-table');
pivottable.addEventListener('change', function (event) {
    const detail = event.detail,
        type = detail.type;

	// event handling code goes here.
})

columnClickCustomEvent

This event is triggered when a user clicks on the header cell of a summary column. It allows you to handle custom actions or logic in response to the user's interaction with the summary column header.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onColumnClick

Arguments

evCustomEvent

ev.detailObject

ev.detail.columnDefinition - An object detailing the clicked dynamic column.

ev.detail.dataField - The data field of the cell's original column.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of columnClick event.

const pivottable = document.querySelector('smart-pivot-table');
pivottable.addEventListener('columnClick', function (event) {
    const detail = event.detail,
        columnDefinition = detail.columnDefinition,
        dataField = detail.dataField;

	// event handling code goes here.
})

collapseCustomEvent

This event is triggered when a row within the data table is collapsed by the user, indicating that its expanded content or details are now hidden. It allows you to execute custom logic whenever a previously expanded row is closed.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onCollapse

Arguments

evCustomEvent

ev.detailObject

ev.detail.record - The (aggregated) data of the collapsed row.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of collapse event.

const pivottable = document.querySelector('smart-pivot-table');
pivottable.addEventListener('collapse', function (event) {
    const detail = event.detail,
        record = detail.record;

	// event handling code goes here.
})

collapseTotalColumnCustomEvent

This event is triggered whenever a total column in the data grid is collapsed by the user, signaling that the column’s aggregated summary view has been hidden from display. This allows you to perform custom actions in response to the collapsing of a total column, such as updating UI elements or recalculating totals.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onCollapseTotalColumn

Arguments

evCustomEvent

ev.detailObject

ev.detail.columnDefinition - The definition of the collapsed total column.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of collapseTotalColumn event.

const pivottable = document.querySelector('smart-pivot-table');
pivottable.addEventListener('collapseTotalColumn', function (event) {
    const detail = event.detail,
        columnDefinition = detail.columnDefinition;

	// event handling code goes here.
})

expandCustomEvent

This event is triggered when a user expands a row, typically to reveal additional details or a nested view associated with that row. It signals that the row has transitioned from a collapsed to an expanded state.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onExpand

Arguments

evCustomEvent

ev.detailObject

ev.detail.record - The (aggregated) data of the expanded row.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of expand event.

const pivottable = document.querySelector('smart-pivot-table');
pivottable.addEventListener('expand', function (event) {
    const detail = event.detail,
        record = detail.record;

	// event handling code goes here.
})

expandTotalColumnCustomEvent

This event is triggered whenever a user expands a total column, typically to reveal underlying details or subrows associated with that column. It allows you to respond to the expansion action, such as loading additional data or updating the user interface accordingly.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onExpandTotalColumn

Arguments

evCustomEvent

ev.detailObject

ev.detail.columnDefinition - The definition of the expanded total column.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of expandTotalColumn event.

const pivottable = document.querySelector('smart-pivot-table');
pivottable.addEventListener('expandTotalColumn', function (event) {
    const detail = event.detail,
        columnDefinition = detail.columnDefinition;

	// event handling code goes here.
})

filterCustomEvent

This event is triggered whenever a user performs an action that initiates, modifies, or removes any filter within the application. It provides an opportunity to respond to changes in filter settings, such as applying, updating, or clearing filters on displayed data or content.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onFilter

Arguments

evCustomEvent

ev.detailObject

ev.detail.action - The filtering action. Possible actions: 'add', 'remove'.

ev.detail.filters - The added filters. Only when action is 'add'.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of filter event.

const pivottable = document.querySelector('smart-pivot-table');
pivottable.addEventListener('filter', function (event) {
    const detail = event.detail,
        action = detail.action,
        filters = detail.filters;

	// event handling code goes here.
})

sortCustomEvent

This event is triggered whenever a user clicks on a column header cell within a table or grid. It typically occurs during user interactions such as sorting or selecting columns, making it useful for implementing custom behaviors in response to column header clicks. The event includes relevant details about the column that was clicked, allowing developers to identify and handle specific columns as needed.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onSort

Arguments

evCustomEvent

ev.detailObject

ev.detail.columns - An array with information about the dynamic columns the PivotTable has been sorted by.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of sort event.

const pivottable = document.querySelector('smart-pivot-table');
pivottable.addEventListener('sort', function (event) {
    const detail = event.detail,
        columns = detail.columns;

	// event handling code goes here.
})

Methods

addFilter( dataField: string, filter: any): void

Applies a filter to a designated column, enabling users to display only the rows that meet specified criteria within that column. This helps refine and customize the data view according to user-defined conditions.

Arguments

dataFieldstring

The column's data field.

filterany

FilterGroup object.

Invoke the addFilter method.

const pivottable = document.querySelector('smart-pivot-table');
pivottable.addFilter("'firstName', filterGroup");

clearFilters(): void

Removes all currently applied filters from the data set, resetting the view to display unfiltered results.

Invoke the clearFilters method.

const pivottable = document.querySelector('smart-pivot-table');
pivottable.clearFilters();

clearSelection(): void

Removes any currently selected items or text, resetting the selection state to none.

Invoke the clearSelection method.

const pivottable = document.querySelector('smart-pivot-table');
pivottable.clearSelection();

clearSort(): void

Removes any applied sorting from the PivotTable, restoring the original item order based on the data source’s default arrangement.

Invoke the clearSort method.

const pivottable = document.querySelector('smart-pivot-table');
pivottable.clearSort();

collapseAllRows(): void

Collapses all rows within the table, minimizing the display of all grouped row sections when multiple row groups are present. This action hides the contents of each group, showing only the group headers or summary rows.

Invoke the collapseAllRows method.

const pivottable = document.querySelector('smart-pivot-table');
pivottable.collapseAllRows();

collapseRow( rowId: string | number): void

Collapses a row within a table that has multiple row groups, hiding its detailed content and displaying only the summary or header for that group. This action helps to organize and condense complex tables for easier navigation and viewing.

Arguments

rowIdstring | number

The id of the row to collapse. Can be retrieved from the rows collection.

Invoke the collapseRow method.

const pivottable = document.querySelector('smart-pivot-table');
pivottable.collapseRow(11);

expandAllRows(): void

Expands all rows in the data grid, including those within multiple row groups, allowing users to view every row regardless of group hierarchy or nesting.

Invoke the expandAllRows method.

const pivottable = document.querySelector('smart-pivot-table');
pivottable.expandAllRows();

expandRow( rowId: string | number): void

Expands a specific row within the table, allowing additional content or details to be displayed, when multiple row groups are present. This function helps users view more information for a selected row without collapsing the grouping structure.

Arguments

rowIdstring | number

The id of the row to expand. Can be retrieved from the rows collection.

Invoke the expandRow method.

const pivottable = document.querySelector('smart-pivot-table');
pivottable.expandRow(8);

exportData( dataFormat: string, fileName: string, callback?: Function): any

Exports all data from the PivotTable in a structured format, allowing for further analysis, reporting, or use in external applications.

Arguments

dataFormatstring

The file format to export to. Supported formats: 'csv', 'html', 'json', 'pdf', 'tsv', 'xlsx', 'xml'.

fileNamestring

The name of the file to export to

callback?Function

A callback function to pass the exported data to (if fileName is not provided)

Returnsany

Invoke the exportData method.

const pivottable = document.querySelector('smart-pivot-table');
const result = pivottable.exportData("html","my-table");

getDynamicColumns(): any[]

Returns an array of the currently active dynamic pivot columns, reflecting the fields that have been selected or computed for pivoting in the current view or dataset. This allows developers to access and manipulate the current pivot configuration programmatically.

Returnsany[]

Invoke the getDynamicColumns method.

const pivottable = document.querySelector('smart-pivot-table');
const result = pivottable.getDynamicColumns();

getSelection(): (string | number)[] | { dataField: string, rowId: string | number }[]

Returns an array representing the current selection within the grid, based on the specified selectionMode:

- When selectionMode is set to 'many' or 'extended', the array contains the IDs of all selected rows.
- When selectionMode is set to 'cell', the array contains objects with details about each selected cell (such as row and column identifiers).

The structure of the returned array adapts dynamically to match the current selection mode.

Returns(string | number)[] | { dataField: string, rowId: string | number }[]

Invoke the getSelection method.

const pivottable = document.querySelector('smart-pivot-table');
const result = pivottable.getSelection();

refresh(): void

Updates the PivotTable data and recalculates all its values, ensuring that any changes in the underlying data source are reflected in the PivotTable’s current view.

Invoke the refresh method.

const pivottable = document.querySelector('smart-pivot-table');
pivottable.refresh();

removeFilter( dataField: string): void

Removes all active filters from a specified column, restoring the column to display its full, unfiltered dataset.

Arguments

dataFieldstring

The column's data field.

Invoke the removeFilter method.

const pivottable = document.querySelector('smart-pivot-table');
pivottable.removeFilter();

select( rowId: string | number | (string | number)[], dataField?: string): void

Enables selection of rows or cells within the data grid, depending on the specified selectionMode:

- When selectionMode is set to 'many' or 'extended', this function allows for the selection of one or multiple rows.
- When selectionMode is set to 'cell' and a second argument is provided, it allows for the selection of a single cell instead of an entire row.

Use the appropriate selectionMode and arguments to control whether users can select individual rows, multiple rows, or specific cells within the grid.

Arguments

rowIdstring | number | (string | number)[]

The id of the row (or an array of row ids) to select (or of the cell's parent row when selectionMode is 'cell'). Can be retrieved from the rows collection.

dataField?string

The dataField of the dynamic column (can be retrieved by calling getDynamicColumns) of the cell to select (only applicable when selectionMode is 'cell').

Invoke the select method.

const pivottable = document.querySelector('smart-pivot-table');
pivottable.select("Ohno0");

sortBy( columnDefinition: any, sortOrder?: string): void

Sorts the data based on the values in a summary or grouping column, allowing you to organize records according to aggregated results or group identifiers.

Arguments

columnDefinitionany

The dynamic column's definition. Can be retrieved from the method getDynamicColumns.

sortOrder?string

Sort order. Possible values: 'asc' (ascending), 'desc' (descending), and null (removes sorting by column). If not provided, toggles the sorting.

Invoke the sortBy method.

const pivottable = document.querySelector('smart-pivot-table');
pivottable.sortBy("dynamicColumns[0]","asc");

unselect( rowId: string | number | (string | number)[], dataField?: string): void

Deselects one or more rows when selectionMode is set to 'many' or 'extended'. Alternatively, if selectionMode is 'cell' and a second argument specifying the target cell is provided, this method will deselect the specified cell. This allows for flexible unselection behavior depending on the current selection mode and provided arguments.

Arguments

rowIdstring | number | (string | number)[]

The id of the row (or an array of row ids) to select (or of the cell's parent row when selectionMode is 'cell'). Can be retrieved from the rows collection.

dataField?string

The dataField of the dynamic column (can be retrieved by calling getDynamicColumns) of the cell to select (only applicable when selectionMode is 'cell').

Invoke the unselect method.

const pivottable = document.querySelector('smart-pivot-table');
pivottable.unselect("Saylor0");

CSS Variables

--smart-table-default-widthvar()

Default value

"100%"

smartTable/smartPivotTable default width

--smart-table-default-heightvar()

Default value

"auto"

smartTable/smartPivotTable default height

--smart-table-header-footer-heightvar()

Default value

"56px"

smartTable height of header and footer

--smart-table-column-header-heightvar()

Default value

"var(--smart-table-header-footer-height)"

smartTable/smartPivotTable height of column header

--smart-table-row-heightvar()

Default value

"48px"

smartTable/smartPivotTable height of rows

--smart-table-cell-paddingvar()

Default value

"12px"

smartTable/smartPivotTable cell padding

--smart-table-indentvar()

Default value

"30px"

smartTable/smartPivotTable hierarchical cell indent

--smart-table-arrow-sizevar()

Default value

"16px"

smartTable/smartPivotTable arrow size

--smart-table-arrow-marginvar()

Default value

"5px"

smartTable/smartPivotTable arrow margin

--smart-table-group-count-displayvar()

Default value

"unset"

smartPivotTable group cell count display

--smart-pivot-table-cell-widthvar()

Default value

"200px"

smartPivotTable cell width

--smart-pivot-table-secondary-group-widthvar()

Default value

"calc(1.25 * var(--smart-pivot-table-cell-width))"

smartPivotTable row group width

--smart-pivot-panel-widthvar()

Default value

"300px"

smartPivotTable designer (smartPivotPanel) width

--smart-pivot-panel-default-heightvar()

Default value

"800px"

Standalone smartPivotPanel default height

--smart-pivot-panel-tab-item-heightvar()

Default value

"150px"

smartPivotTable designer (smartPivotPanel) tab item height

--smart-pivot-panel-paddingvar()

Default value

"10px"

smartPivotTable designer (smartPivotPanel) padding

PivotTable Javascript API

animation"none" | "simple" | "advanced"

Default value

Example

columnReorderboolean

Default value

Example

Properties

align"center" | "left" | "right"

Default value

allowFilterboolean

Default value

allowPivotboolean

Default value

allowRowGroupboolean

Default value

allowSortboolean

Default value

dataFieldstring

Default value

dataType"boolean" | "date" | "number" | "string"

Default value

formatFunction{ (settings: { value: any, row: string | number, column: string, cell: HTMLTableCellElement, template?: any }): void }

labelstring

Default value

pivotboolean

Default value

rowGroupboolean

Default value

summary"avg" | "count" | "max" | "median" | "min" | "product" | "stdev" | "stdevp" | "sum" | "var" | "varp"

Default value

summarySettings{ align?: string, prefix?: string, decimalPlaces?: number, thousandsSeparator?: string, decimalSeparator?: string, negativesInBrackets?: boolean }

Example

columnTotalsboolean

Default value

Example

columnTotalsPosition"near" | "far"

Default value

Example

conditionalFormatting{ column?: string; condition?: string; firstValue?: number; fontFamily?: string; fontSize?: string; highlight?: string; secondValue?: number; text?: string; }[]

Properties

columnstring

Default value

condition"between" | "equal" | "greaterThan" | "lessThan" | "notEqual"

Default value

firstValuenumber

Default value

fontFamily"The default fontFamily as set in CSS" | "Arial" | "Courier New" | "Georgia" | "Times New Roman" | "Verdana"

Default value

fontSize"8px" | "9px" | "10px" | "11px" | "12px" | "13px" | "14px" | "15px" | "16px"

Default value

highlightstring

Default value

secondValuenumber

Default value

textstring

Default value

Example

dataSourceany

Default value

defaultSortByRowGroupsboolean

Default value

Example

designerboolean

Default value

Example

designerPosition"near" | "far"

Default value