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

Events

Methods

Properties

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

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

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

Sets or gets whether the reordering of columns is enabled.

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

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

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

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

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

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"

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

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

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

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

Determines the original tabular data source of the PivotTable.

Default value

Try a demo showcasing the dataSource property.

defaultSortByRowGroupsboolean

Sets or gets whether the original tabular data sourse of the PivotTable will be pre-sorted based on columns with the rowGroup property (and their order).

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

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

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"

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

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

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

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"

If set, shows an export button in the drill down 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

Sets or gets the drill down table export file name.

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 }

Sets or gets the drill down dialog callback function. The argument of the callback passed by the PivotTable is the drill-down Table component. You can use it to customize the table.

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 }

Sets or gets the drill down custom action callback function. The argument of the callback passed by the PivotTable is the drill-down data source. You can use it to override the default drill-down UI i.e to replace our Dialog with Table.

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

Sets or gets whether sorting based on columns in classic row groups layout mode is enabled.

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

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

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

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"

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

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

Sets or gets whether to hide the tooltip that displays details when multiple summary cells with non-null values are selected.

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

Sets or gets whether to hide rows that contain only 0 or null values. Applicable only when there are rowGroup columns.

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

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

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;

localestring

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

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

Sets or gets an object specifying strings used in the element that can be localized. Used in conjunction with the property 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

Sets or gets what value is shown in cells that do not have aggregated data to display. By default (null), such cells are empty.

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

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

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;

rightToLeftboolean

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

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

Sets or gets whether sorting by row (when a row group cell is clicked) is enabled. When columnTotals is also enabled, sorting is applied per "column group"; otherwise - for all columns.

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

Sets or gets whether row summaries are displayed in the row headers. Example: Peterson(40) vs Peterson, when rowSummary is set to false.

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

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

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

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

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

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"

Sets or gets the selection mode. Only applicable when selection is enabled.

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"

Determines the sorting mode of the PivotTable.

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

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

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;

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

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

collapseCustomEvent

This event is triggered when a row has been collapsed.

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 when a total column has been collapsed.

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 row has been expanded.

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 when a total column has been expanded.

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

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

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 of selected row ids (when selectionMode is 'many' or 'extended') or an array of selected cell details (when selectionMode is 'cell').

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

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 | (string | number)[], dataField?: string): void

Selects one or more rows (when selectionMode is 'many' or 'extended') or a single cell (when selectionMode is 'cell' and the second argument is passed).

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 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 | (string | number)[], dataField?: string): void

Unselects one or more rows (when selectionMode is 'many' or 'extended') or a single cell (when selectionMode is 'cell' and the second argument is passed).

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

Example