PivotTable JAVASCRIPT UI Component API

PivotTable Javascript API

Class

PivotTable

PivotTable

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

Selector

smart-pivot-table

Properties

AanimationSets or gets the animation mode. Animation is disabled when the property is set to 'none'
CcolumnReorderSets or gets whether the reordering of columns is enabled.
CcolumnsDescribes 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. Click for more details. Property object's options:
  • align:string - Sets or gets the header cell alignment for pivot and summary columns and cell alignment for row group columns.
  • allowFilter:boolean - Sets or gets whether the column can be filtered.
  • allowPivot:boolean - Sets or gets whether the column can be a pivot column.
  • allowRowGroup:boolean - Sets or gets whether the column can be a row group column.
  • allowSort:boolean - Sets or gets whether summary columns based on the column can be sorted.
  • dataField:string - Sets or gets the column's data source-bound field.
  • dataType:string - Sets or gets the data type of the column's cells.
  • 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.
  • label:string - Sets or gets the column's displayed text (for example in summary column headers).
  • pivot:boolean - Sets or gets whether the column is a pivot column. Data from pivot columns is represented as column hierarchy in the PivotTable.
  • rowGroup:boolean - 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.
  • summary:string - 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.
  • 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.
    • Property object's options:
    CcolumnTotalsSets 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.
    CcolumnTotalsPositionSets or gets the position of total columns (shown when columnTotals is enabled).
    CconditionalFormattingSets or gets details about conditional formatting to be applied to the PivotTable's cells. Click for more details. Property object's options:
    • column:string - The data field of a numeric column to format. Set 'all' to format all numeric columns.
    • condition:string - The formatting condition.
    • firstValue:number - The value to compare by. When condition is 'between', this is the start (from) value.
    • fontFamily:string - The fontFamily to apply to formatted cells.
    • fontSize:string - The fontSize to apply to formatted cells. The fontSize as set in CSS is used by default.
    • highlight:string - The background color to apply to formatted cells.
    • secondValue:number - When condition is 'between', this is the end (to) value. Otherwise, this value is not used.
    • text:string - The text color to apply to formatted cells.
    DdataSourceDetermines the original tabular data source of the PivotTable.
    DdefaultSortByRowGroupsSets 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).
    DdesignerSets or gets whether to display the PivotTable's designer alongside the table itself. The designer allows for configuring column settings and applying filtering.
    DdesignerPositionSets or gets the position of the PivotTable's designer (shown when designer is enabled).
    DdisabledDisables the interaction with the element.
    DdrillDownIf 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.
    DdrillDownDataExportIf set, shows an export button in the drill down dialog.
    DdrillDownDataExportNameSets or gets the drill down table export file name.
    DdrillDownTableInitSets 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.
    DdrillDownCustomActionSets 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.
    EenableSortByRowGroupsSets or gets whether sorting based on columns in classic row groups layout mode is enabled.
    FfreezeHeaderSets or gets whether the PivotTable's column header is sticky/frozen.
    GgetDefaultSummaryFunctionA 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).
    GgrandTotalSets or gets whether to show a Grand total row aggregating the data of all rows.
    GgroupLayoutSets or gets the way row nesting (based on rowGroup columns) is displayed.
    HhideCellSelectionTooltipSets or gets whether to hide the tooltip that displays details when multiple summary cells with non-null values are selected.
    HhideEmptyRowsSets or gets whether to hide rows that contain only 0 or null values. Applicable only when there are rowGroup columns.
    KkeyboardNavigationSets or gets whether navigation with the keyboard is enabled in the PivotTable.
    LlocaleSets or gets the language. Used in conjunction with the property messages.
    MmessagesSets or gets an object specifying strings used in the element that can be localized. Used in conjunction with the property locale.
    NnullDefaultValueSets or gets what value is shown in cells that do not have aggregated data to display. By default (null), such cells are empty.
    OonCellRenderA callback function executed each time a PivotTable cell is rendered.
    OonColumnRenderA callback function executed each time a PivotTable column header cell is rendered.
    OonInitA callback function executed when the PivotTable is being initialized.
    PpageSizeSets or gets the page size (when paging is enabled).
    PpageIndexSets or gets the current (zero-based) page index (when paging is enabled).
    PpagingSets or gets whether paging is enabled.
    RrightToLeftSets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
    RrowSortSets 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.
    RrowSummarySets or gets whether row summaries are displayed in the row headers. Example: Peterson(40) vs Peterson, when rowSummary is set to false.
    RrowTotalsSets or gets whether to show row total columns for each summary column.
    RrowTotalsPositionSets or gets the position of row total columns (shown when rowTotals is enabled).
    SselectionSets or gets whether row selection (via checkboxes) is enabled.
    SselectionModeSets or gets the selection mode. Only applicable when selection is enabled.
    SsortModeDetermines the sorting mode of the PivotTable.
    TthemeDetermines the theme. Theme defines the look of the element
    TtoolbarSets 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.
    TtooltipSets or gets whether when hovering a cell with truncated content, a tooltip with the full content will be shown.

    Events

    CcellClickThis event is triggered when a cell has been clicked.
    CchangeThis event is triggered when the selection is changed.
    CcolumnClickThis event is triggered when a summary column header cell has been clicked.
    CcollapseThis event is triggered when a row has been collapsed.
    CcollapseTotalColumnThis event is triggered when a total column has been collapsed.
    EexpandThis event is triggered when a row has been expanded.
    EexpandTotalColumnThis event is triggered when a total column has been expanded.
    FfilterThis event is triggered when a filtering-related action is made.
    SsortThis event is triggered when a column header cell has been clicked.

    Methods

    AaddFilterAdds a filter to a specific column.
    CclearFiltersClears applied filters.
    CclearSelectionClears selection.
    CclearSortClears the PivotTable sorting.
    CcollapseAllRowsCollapses all rows (when multiple row groups are applied).
    CcollapseRowCollapses a row (when multiple row groups are applied).
    EexpandAllRowsExpands all rows (when multiple row groups are applied).
    EexpandRowExpands a row (when multiple row groups are applied).
    EexportDataExports the PivotTable's data.
    GgetDynamicColumnsReturns the current dynamic pivot columns.
    GgetSelectionReturns an array of selected row ids (when selectionMode is 'many' or 'extended') or an array of selected cell details (when selectionMode is 'cell').
    RrefreshRefreshes the PivotTable.
    RremoveFilterRemoves filters applied to a specific column.
    SselectSelects one or more rows (when selectionMode is 'many' or 'extended') or a single cell (when selectionMode is 'cell' and the second argument is passed).
    SsortBySorts by a summary or group column.
    UunselectUnselects one or more rows (when selectionMode is 'many' or 'extended') or a single cell (when selectionMode is 'cell' and the second argument is passed).

    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;

    rowGroupboolean

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

    Default value

    false

    Get the rowGroup property. 

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

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

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

    Allowed Values

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

    Default value

    "sum"

    Get the summary property. 

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

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

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

    Get the summarySettings property. 

     const pivottable = document.querySelector('smart-pivot-table');
     let summarySettings = pivottable.columns[0].summarySettings;
    Try a demo showcasing the columns property.

    Example

    Set the columns property. 

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

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

     const pivottable = document.querySelector('smart-pivot-table');
     pivottable.columns = [{ label: 'In progress', dataField: 'inProgress' }, { label: 'Testing', dataField: 'testing', orientation: 'horizontal', columns: [{ label: 'Manual testing', dataField: 'manualTesting', selected: true, columns: [{ label: 'Desktop devices', dataField: 'desktop' }, { label: 'Mobile devices', dataField: 'mobile', selected: true }] }, { label: 'Unit testing', dataField: 'unitTesting' }] }];

    Get the columns property. 

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

    columnTotalsboolean

    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

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

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

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

    Sets or gets the page size (when paging is enabled).

    Default value

    10

    Example

    Set the pageSize property. 

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

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

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

    Get the pageSize property. 

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

    pageIndexnumber

    Sets or gets the current (zero-based) page index (when paging is enabled).

    Default value

    0

    Example

    Set the pageIndex property. 

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

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

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

    Get the pageIndex property. 

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

    pagingboolean

    Sets or gets whether paging is enabled.

    Default value

    false
    Try a demo showcasing the paging property.

    Example

    Set the paging property. 

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

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

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

    Get the paging property. 

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

    rightToLeftboolean

    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;

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