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.

Selector

smart-pivot-table

Properties

Events

Methods

Properties

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

Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

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

Sets or gets whether the reordering of columns is enabled.

Default value

false

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 } }[]

Describes the columns of the PivotTable's original tabular data. Based on these settings and the data source, the actual columns of the PivotTable are dynamically generated.

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

"string"

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.

Default value

"null"

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.

Get the summarySettings property.

 const pivottable = document.querySelector('smart-pivot-table');
 let summarySettings = pivottable.columns[0].summarySettings;

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

Sets or gets whether to show total columns for each pivot data point. When enabled, all summary columns must have the same summary function set by which total columns are calculated.

Default value

false

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"

Sets or gets the position of total columns (shown when columnTotals is enabled).

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; }[]

Sets or gets details about conditional formatting to be applied to the PivotTable's cells.

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

0

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.

Default value

"The default fontSize as set in CSS"

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

1

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;

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

Determines the original tabular data source of the PivotTable.

Default value

""

designerboolean

Sets or gets whether to display the PivotTable's designer alongside the table itself. The designer allows for configuring column settings and applying filtering.

Default value

false

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"

Sets or gets the position of the PivotTable's designer (shown when designer is enabled).

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

Disables the interaction with the element.

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

If enabled, shows the original tabular data that has been aggregated in a PivotTable summary cell when the cell is double-clicked or F2 is pressed.

Default value

false

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;

freezeHeaderboolean

Sets or gets whether the PivotTable's column header is sticky/frozen.

Default value

false

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 returns the default summary function of a summary column when it is dynamically assigned as such (e.g. by drag-drop in the designer).

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

Sets or gets whether to show a Grand total row aggregating the data of all rows.

Default value

false

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"

Sets or gets the way row nesting (based on rowGroup columns) is displayed.

Default value

"default"

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;

keyboardNavigationboolean

Sets or gets whether navigation with the keyboard is enabled in the PivotTable.

Default value

false

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;

localestring

Sets or gets the language. Used in conjunction with the property messages.

Default value

"en"

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

Sets or gets an object specifying strings used in the element that can be localized. Used in conjunction with the property locale.

Default value




Example

Set the messages property.

 <smart-pivot-table messages='{"he":{"add":"הוסף תנאי","all":"כל העמודות","apply":"להגיש מועמדות","between":"בֵּין","calculation":"תַחשִׁיב","cancel":"לְבַטֵל","center":"מֶרְכָּז","clear":"ברור","clearFilter":"נקה את המסנן","close":"סגור","column":"טור:","columns":"עמודים","columnSettings":"הגדרות עמודה","condition":"מַצָב:","conditionalFormatting":"עיצוב מותנה","CONTAINS_CASE_SENSITIVE":"מכיל (רגיש רישיות)","CONTAINS":"מכיל","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":"מתחיל עם","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","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","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","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;

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

A callback function executed each time a PivotTable cell is rendered.

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 executed each time a PivotTable column header cell is rendered.

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 executed when the PivotTable is being initialized.

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;

rightToLeftboolean

Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

Default value

false

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;

rowTotalsboolean

Sets or gets whether to show row total columns for each summary column.

Default value

false

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 gets the position of row total columns (shown when rowTotals is enabled).

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

Sets or gets whether row selection (via checkboxes) is enabled.

Default value

false

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"

Sets or gets the selection mode. Only applicable when selection 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"

Determines the sorting mode of the PivotTable.

Default value

"none"

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

Determines the theme. Theme defines the look of 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

Sets or gets whether the PivotTable's toolbar is shown. It contains two breadcrumb components that allow the modification of the row group and pivot columns, as well as the "Conditional Formatting" and "Fields" buttons that open a dialog with additional settings.

Default value

false

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;

tooltipboolean

Sets or gets whether when hovering a cell with truncated content, a tooltip with the full content will be shown.

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 when a cell has been clicked.

  • 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 when the selection is changed.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onChange

Arguments

evCustomEvent

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) {
	// event handling code goes here.
})

columnClickCustomEvent

This event is triggered when a summary column header cell has been clicked.

  • 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.
})

filterCustomEvent

This event is triggered when a filtering-related action is made.

  • 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 when a column header cell has been clicked.

  • 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

Adds a filter to a specific column.

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

Clears applied filters.


Invoke the clearFilters method.

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

clearSelection(): void

Clears selection.


Invoke the clearSelection method.

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

clearSort(): void

Clears the PivotTable sorting.


Invoke the clearSort method.

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

collapseAllRows(): void

Collapses all rows (when multiple row groups are applied).


Invoke the collapseAllRows method.

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

collapseRow( rowId: string | number): void

Collapses a row (when multiple row groups are applied).

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 (when multiple row groups are applied).


Invoke the expandAllRows method.

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

expandRow( rowId: string | number): void

Expands a row (when multiple row groups are applied).

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 the PivotTable's data.

Arguments

dataFormatstring

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

fileName?string

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 the current dynamic pivot columns.

Returnsany[]

Invoke the getDynamicColumns method.

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

getSelection(): (string | number)[]

Returns an array of selected row ids.

Returns(string | number)[]

Invoke the getSelection method.

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

refresh(): void

Refreshes the PivotTable.


Invoke the refresh method.

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

removeFilter( dataField: string): void

Removes filters applied to a specific column.

Arguments

dataFieldstring

The column's data field.


Invoke the removeFilter method.

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

select( rowId: string | number): void

Selects a row.

Arguments

rowIdstring | number

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


Invoke the select method.

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

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

Sorts by a summary or group column.

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): void

Unselects a row.

Arguments

rowIdstring | number

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


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

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