PivotTable — Smart UI JavaScript API

PivotTable — Smart UI JavaScript API

On this page + Quick start

Quick start · JavaScript

Complete starter source per framework. Run the scaffold/install command first, then replace the listed files with the full code below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>PivotTable - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-pivot-table id="demo-pivottable"></smart-pivot-table>

  <script type="module">
    import './node_modules/smart-webcomponents/source/modules/smart.pivottable.js';

    const el = document.getElementById('demo-pivottable');
    if (el) {

      el.dataSource = [{ firstName: 'Nancy', productName: 'Espresso', quantity: 3 }, { firstName: 'Andrew', productName: 'Latte', quantity: 5 }, { firstName: 'Nancy', productName: 'Latte', quantity: 2 }];
      el.columns = [{ label: 'First Name', dataField: 'firstName', rowGroup: true }, { label: 'Product', dataField: 'productName', pivot: true }, { label: 'Quantity', dataField: 'quantity', summary: 'sum' }];
      el.freezeHeader = true;
      el.grandTotal = true;

      el.addEventListener('change', (event) => console.log('change:', event.detail || event));
    }
  </script>
</body>
</html>
For AI tooling

Developer Quick Reference

Component: PivotTable   Framework: JavaScript   Selector: smart-pivot-table

API counts: 45 properties, 17 methods, 9 events

Common properties: 0, 1, 2, 3, 4, 5

Common methods: addFilter(), clearFilters(), clearSelection(), clearSort(), collapseAllRows(), collapseRow()

Common events: cellClick, change, columnClick, collapse, collapseTotalColumn, expand

Module hint: smart-webcomponents/source/modules/smart.pivottable.js

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

Class

PivotTable

PivotTable

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

Selector

smart-pivot-table

Quick picks

changecolumnsdataSourcedisabledrefresh

Properties

AanimationDefines the animation mode for the element. When this property is set to 'none', all animations are disabled. Otherwise, setting this property to a supported value enables the corresponding animation behavior. Use this property to retrieve the current animation mode or specify the desired mode.
CcolumnReorderEnables or retrieves the current setting that determines whether users can reorder columns, allowing columns to be rearranged via drag-and-drop or similar interactions. If enabled, columns can be moved to a new position within the layout; if disabled, the column order remains fixed.
CcolumnsProvides detailed metadata for each column in the PivotTable’s underlying tabular data source. These settings define attributes such as column names, data types, and formatting options. Using this configuration and the connected data source, the PivotTable dynamically generates its actual columns, ensuring that the displayed data structure accurately reflects both the source data and the specified settings. 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:
    CcolumnTotalsControls the visibility of total columns for each pivot data point. When enabled, total columns are displayed, showing summary values for each data group. Note: All summary columns must use the same summary function (e.g., sum, average) to ensure consistent calculation of the total columns. This setting both determines whether total columns are shown and allows you to retrieve their current visibility status.
    CcolumnTotalsPositionGets or sets the position of the total columns, which are displayed only when columnTotals is enabled. This option determines where the summary columns appear in the table, such as at the end (right side) of all columns.
    CconditionalFormattingGets or sets the conditional formatting rules that determine how the PivotTable's cells are visually styled based on their values or other criteria. This allows you to dynamically highlight, color, or format cells within the PivotTable according to specified conditions. 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.
    DdataSourceSpecifies the initial tabular data source—such as a worksheet range, table, or external database—from which the PivotTable retrieves and organizes its data. This property identifies where the PivotTable’s underlying data originates.
    DdefaultSortByRowGroupsSpecifies or retrieves whether the original tabular data source for the PivotTable should be pre-sorted according to the columns defined with the rowGroup property, and in the same order as those columns appear. This ensures that when the PivotTable is generated, its underlying data is already organized based on the designated row groups, potentially optimizing performance and ensuring consistent grouping behavior.
    DdesignerSpecifies whether the PivotTable designer panel is shown together with the PivotTable. When enabled, the designer provides an interface for configuring column settings, such as rearranging or renaming columns, and applying data filters directly within the PivotTable view. This property can be set to show or hide the designer alongside the table, and can also be used to determine the current visibility state of the designer.
    DdesignerPositionGets or sets the position of the PivotTable’s designer interface, which appears when the designer option is enabled. This property allows you to specify or retrieve where the designer UI is displayed within the application layout.
    DdisabledPrevents the user from interacting with the element, disabling all mouse, keyboard, and touch inputs such as clicks, typing, and focus events. The element will not respond to any user actions while this setting is applied.
    DdrillDownWhen this option is enabled, double-clicking a PivotTable summary cell or pressing F2 will display the underlying tabular data that was used to calculate the aggregated value in that cell.
    DdrillDownCustomActionEnhancements for clarity and detail:"Defines or retrieves the callback function that handles custom drill-down actions. When a drill-down event occurs in the PivotTable, this callback is invoked with the drill-down data source as its argument. By providing a custom callback, you can override the default drill-down user interface (which typically displays our Dialog with a Table) and implement your own UI or behavior for presenting the drill-down data."
    DdrillDownDataExportDisplays an export button within the drill-down dialog when this option is enabled, allowing users to export data directly from the dialog.
    DdrillDownDataExportNameSpecifies or retrieves the file name used when exporting data from the drill-down table. This determines the default name of the exported file generated during the export operation.
    DdrillDownTableInitDefines or retrieves the callback function that is triggered when the drill-down dialog is opened in the PivotTable. The callback receives the drill-down Table component as its argument, allowing you to customize the appearance, behavior, or data of the resulting table before it is displayed. Use this function to apply custom formatting, event handlers, or modifications to the drill-down Table component.
    EenableSortByRowGroupsDetermines whether column-based sorting is enabled or disabled when using the classic row groups layout mode. When enabled, users can sort data within each column in the classic row grouping layout. This property can be used to either retrieve the current sorting status or set a new value.
    FfreezeHeaderDetermines whether the column headers in the PivotTable remain visible (sticky/frozen) at the top of the view when the user scrolls vertically. Setting this property to true keeps the column headers fixed in place, while false allows them to scroll out of view. This property can be used to set or retrieve the current sticky/frozen state of the PivotTable’s column headers.
    GgetDefaultSummaryFunctionA callback function that provides the default summary operation (e.g., sum, average, count) for a summary column when the column is dynamically assigned as a summary field—such as when a user assigns it by dragging and dropping in the UI designer. This function is invoked to ensure that the appropriate summary logic is applied automatically whenever the summary column configuration changes at runtime.
    GgrandTotalSpecifies whether to display a Grand Total row that aggregates the values of all data rows. When enabled, this option will add a summary row at the bottom of the data set, showing the total or combined values for each relevant column. Can also be used to retrieve the current setting.
    GgroupLayoutDefines or retrieves how nested rows—determined by the specified rowGroup columns—are visually organized and displayed within the grid. This setting controls the appearance and structure of hierarchical row groupings.
    HhideCellSelectionTooltipDetermines whether the tooltip displaying detailed information is shown or hidden when multiple summary cells, each containing non-null values, are selected. When enabled, the tooltip with details will be suppressed; when disabled, the tooltip will appear as usual. This property can be set to control the tooltip's visibility or retrieved to check its current state.
    HhideEmptyRowsSpecifies whether rows containing only 0 or null values should be hidden or displayed. This setting is only effective when one or more rowGroup columns are defined. Use this property to control the visibility of empty or zero-value rows within grouped data.
    KkeyboardNavigationEnables or retrieves the setting that determines whether users can navigate the PivotTable using keyboard shortcuts or arrow keys. When enabled, keyboard navigation allows users to move between cells, fields, and items within the PivotTable, enhancing accessibility and ease of use.
    LlocaleSpecifies or retrieves the current language code for the component. This property determines which set of localized messages from the messages object will be used for display. Changing the language automatically updates all text and labels according to the selected locale.
    MmessagesDefines or retrieves an object containing the localized strings used within the element's user interface. This object allows you to customize text elements (such as labels, messages, or tooltips) in different languages. This property works together with the locale property to display the appropriate translations based on the selected or active locale.
    NnullDefaultValueSpecifies the value to display in cells that lack aggregated data. When set, this value will be shown in any cell where there is no aggregation result available. By default (null), these cells will appear empty. Setting a custom value (such as "N/A" or 0) allows you to indicate explicitly that no data is present in those cells.
    OonCellRenderA callback function that is invoked every time a cell within the PivotTable is rendered. This function allows you to customize the content, formatting, or behavior of individual PivotTable cells during the rendering process. It receives contextual information about the cell, such as its row, column, and data value.
    OonColumnRenderA callback function that is invoked whenever a column header cell is rendered in the PivotTable. This function allows you to customize the appearance or behavior of each column header as it is generated during the rendering process.
    OonInitA callback function that is executed during the initialization phase of the PivotTable, allowing custom logic to run before the PivotTable is fully rendered or populated with data. This function receives relevant initialization parameters, enabling developers to modify settings or data sources prior to the PivotTable’s display.
    PpageIndexSets or retrieves the current page index, using a zero-based numbering system (i.e., the first page is index 0). This property is applicable only when paging is enabled, allowing navigation between different pages of content.
    PpageSizeSpecifies or retrieves the number of items displayed per page when paging is enabled. This property determines the page size, allowing you to control how many records are shown on each paginated view.
    PpagingGets or sets a value indicating whether paging functionality is enabled, allowing data to be divided and displayed across multiple pages.
    RrightToLeftSpecifies or retrieves whether the element's text direction and alignment are set to support right-to-left (RTL) languages—such as Arabic or Hebrew—by adapting the layout and text flow accordingly. This property ensures that the element properly displays content for users whose locale requires RTL formatting.
    RrowSortDetermines whether sorting by row is enabled when a row group cell is clicked. If columnTotals is also enabled, sorting will be applied within each "column group" individually. If columnTotals is not enabled, sorting will be applied across all columns together. This property can be used to both retrieve the current sorting behavior and to enable or disable sorting by row group interactions.
    RrowSummaryControls whether row summaries appear in the row headers. When set to true, row headers display summarized information such as "Peterson(40)" (indicating a summary value). When set to false, row headers show only the row label, like "Peterson", without any summary details. Use this option to toggle the visibility of summary data in your row headers.
    RrowTotalsDetermines whether to display row total columns alongside each summary column. When enabled, this option will show an additional column for each summary column, presenting the total value for each row. You can use this property to enable (show) or disable (hide) row total columns as needed.
    RrowTotalsPositionSets or retrieves the position of row total columns within the table. This option determines where the columns displaying the total values for each row will appear when the rowTotals feature is enabled. Adjusting this setting allows you to control whether the row totals are displayed at the beginning, end, or a specific location among the table columns.
    SselectionDetermines whether users can select table rows using checkboxes. When enabled, a checkbox appears next to each row, allowing selection. This property can be used to enable or check the current state of row selection functionality.
    SselectionModeSpecifies or retrieves the selection mode for the component. This property is effective only when the selection feature is enabled. When disabled, changing or accessing the selection mode has no effect.
    SsortModeSpecifies the sorting mode applied to the PivotTable, controlling how data rows or columns are ordered (e.g., ascending, descending, or custom criteria). This setting determines the sequence in which PivotTable items are displayed based on the selected sort option.
    TthemeSpecifies the theme applied to the element. The theme controls the overall appearance, including colors, fonts, and styles, ensuring a consistent look and feel throughout the element.
    TtoolbarControls the visibility of the PivotTable toolbar. When displayed, the toolbar includes two breadcrumb components that enable users to modify the row groups and pivot columns directly. It also features "Conditional Formatting" and "Fields" buttons, each of which opens a dialog for configuring additional PivotTable settings.
    TtooltipDetermines whether a tooltip displaying the full content will appear when hovering over a table cell with truncated (overflowing) content. When enabled, users can view the entire cell content by hovering their mouse over the truncated cell. This property can be set to enable or disable this tooltip behavior and can also be used to check its current status.
    UunlockKeySets or retrieves the unlockKey property, a unique code or token required to access and activate the product’s full functionality.
    columns.align
    columns.allowFilter
    columns.allowPivot
    columns.allowRowGroup
    columns.allowSort
    columns.dataField
    columns.dataType
    columns.formatFunction
    columns.label
    columns.pivot
    columns.rowGroup
    columns.summary
    columns.summarySettings
    conditionalFormatting.column
    conditionalFormatting.condition
    conditionalFormatting.firstValue
    conditionalFormatting.fontFamily
    conditionalFormatting.fontSize
    conditionalFormatting.highlight
    conditionalFormatting.secondValue
    conditionalFormatting.text

    Events

    CcellClickThis event is triggered whenever a user clicks on a cell within the component. It provides details about the clicked cell, such as its row and column indices, allowing developers to handle cell-specific actions in response to user interaction.
    CchangeThis event is triggered whenever the user modifies the current selection, such as highlighting a different portion of text or choosing a new option within a selectable element. It allows you to respond in real time to changes in selection state.
    CcollapseThis event is triggered when a row within the data table is collapsed by the user, indicating that its expanded content or details are now hidden. It allows you to execute custom logic whenever a previously expanded row is closed.
    CcollapseTotalColumnThis event is triggered whenever a total column in the data grid is collapsed by the user, signaling that the column’s aggregated summary view has been hidden from display. This allows you to perform custom actions in response to the collapsing of a total column, such as updating UI elements or recalculating totals.
    CcolumnClickThis event is triggered when a user clicks on the header cell of a summary column. It allows you to handle custom actions or logic in response to the user's interaction with the summary column header.
    EexpandThis event is triggered when a user expands a row, typically to reveal additional details or a nested view associated with that row. It signals that the row has transitioned from a collapsed to an expanded state.
    EexpandTotalColumnThis event is triggered whenever a user expands a total column, typically to reveal underlying details or subrows associated with that column. It allows you to respond to the expansion action, such as loading additional data or updating the user interface accordingly.
    FfilterThis event is triggered whenever a user performs an action that initiates, modifies, or removes any filter within the application. It provides an opportunity to respond to changes in filter settings, such as applying, updating, or clearing filters on displayed data or content.
    SsortThis event is triggered whenever a user clicks on a column header cell within a table or grid. It typically occurs during user interactions such as sorting or selecting columns, making it useful for implementing custom behaviors in response to column header clicks. The event includes relevant details about the column that was clicked, allowing developers to identify and handle specific columns as needed.

    Methods

    AaddFilterApplies a filter to a designated column, enabling users to display only the rows that meet specified criteria within that column. This helps refine and customize the data view according to user-defined conditions.
    CclearFiltersRemoves all currently applied filters from the data set, resetting the view to display unfiltered results.
    CclearSelectionRemoves any currently selected items or text, resetting the selection state to none.
    CclearSortRemoves any applied sorting from the PivotTable, restoring the original item order based on the data source’s default arrangement.
    CcollapseAllRowsCollapses all rows within the table, minimizing the display of all grouped row sections when multiple row groups are present. This action hides the contents of each group, showing only the group headers or summary rows.
    CcollapseRowCollapses a row within a table that has multiple row groups, hiding its detailed content and displaying only the summary or header for that group. This action helps to organize and condense complex tables for easier navigation and viewing.
    EexpandAllRowsExpands all rows in the data grid, including those within multiple row groups, allowing users to view every row regardless of group hierarchy or nesting.
    EexpandRowExpands a specific row within the table, allowing additional content or details to be displayed, when multiple row groups are present. This function helps users view more information for a selected row without collapsing the grouping structure.
    EexportDataExports all data from the PivotTable in a structured format, allowing for further analysis, reporting, or use in external applications.
    GgetDynamicColumnsReturns an array of the currently active dynamic pivot columns, reflecting the fields that have been selected or computed for pivoting in the current view or dataset. This allows developers to access and manipulate the current pivot configuration programmatically.
    GgetSelectionReturns an array representing the current selection within the grid, based on the specified selectionMode:- When selectionMode is set to 'many' or 'extended', the array contains the IDs of all selected rows.- When selectionMode is set to 'cell', the array contains objects with details about each selected cell (such as row and column identifiers).The structure of the returned array adapts dynamically to match the current selection mode.
    RrefreshUpdates the PivotTable data and recalculates all its values, ensuring that any changes in the underlying data source are reflected in the PivotTable’s current view.
    RremoveFilterRemoves all active filters from a specified column, restoring the column to display its full, unfiltered dataset.
    SselectEnables selection of rows or cells within the data grid, depending on the specified selectionMode:- When selectionMode is set to 'many' or 'extended', this function allows for the selection of one or multiple rows.- When selectionMode is set to 'cell' and a second argument is provided, it allows for the selection of a single cell instead of an entire row.Use the appropriate selectionMode and arguments to control whether users can select individual rows, multiple rows, or specific cells within the grid.
    SsetLocaleSets the locale of a component.
    SsortBySorts the data based on the values in a summary or grouping column, allowing you to organize records according to aggregated results or group identifiers.
    UunselectDeselects one or more rows when selectionMode is set to 'many' or 'extended'. Alternatively, if selectionMode is 'cell' and a second argument specifying the target cell is provided, this method will deselect the specified cell. This allows for flexible unselection behavior depending on the current selection mode and provided arguments.

    Properties

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

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

    Allowed Values

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

    Default value

    "advanced"
    Try a demo showcasing the animation property.

    Examples

    Markup and runtime examples for animation:

    HTML:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-pivot-table');
el.animation = "simple";

    Read the current value:

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

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

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

    Default value

    false
    Try a demo showcasing the columnReorder property.

    Examples

    Markup and runtime examples for columnReorder:

    HTML attribute:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-pivot-table');
el.columnReorder = false;

    Read the current value:

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

    columnsProvides detailed metadata for each column in the PivotTable’s underlying tabular data source. These settings define attributes such as column names, data types, and formatting options. Using this configuration and the connected data source, the PivotTable dynamically generates its actual columns, ensuring that the displayed data structure accurately reflects both the source data and the specified settings. Click for more details. Property object's options:
      string[] | { align?: string, allowFilter?: boolean, allowPivot?: boolean, allowRowGroup?: boolean, allowSort?: boolean, dataField?: string, dataType?: string, formatFunction?: { (settings: { value: any, row: string | number, column: string, cell: HTMLTableCellElement, template?: any }): void }, label?: string, pivot?: boolean, rowGroup?: boolean, summary?: string, summarySettings?: { align?: string, prefix?: string, decimalPlaces?: number, thousandsSeparator?: string, decimalSeparator?: string, negativesInBrackets?: boolean } }[]

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

      Properties

      alignSets or gets the header cell alignment for pivot and summary columns and cell alignment for row group columns.
      allowFilterSets or gets whether the column can be filtered.
      allowPivotSets or gets whether the column can be a pivot column.
      allowRowGroupSets or gets whether the column can be a row group column.
      allowSortSets or gets whether summary columns based on the column can be sorted.
      dataFieldSets or gets the column's data source-bound field.
      dataTypeSets or gets the data type of the column's cells.
      formatFunctionA callback function that can be used to modify the contents of a cell and the cell itself.
      labelSets or gets the column's displayed text (for example in summary column headers).
      pivotSets or gets whether the column is a pivot column. Data from pivot columns is represented as column hierarchy in the PivotTable.
      rowGroupSets 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.
      summarySets 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.
      summarySettingsSets or gets an object with settings for cells in summary columns. These settings are not applied if column formatFunction is also implemented. Click for more details. Property object's options:
        Try a demo showcasing the columns property.

        Examples

        Markup and runtime examples for columns:

        HTML:

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

        Vanilla JS — prefer #id if multiple widgets exist on the page:

        const el = document.querySelector('smart-pivot-table');
el.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' }] }];

        Read the current value:

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

        alignSets or gets the header cell alignment for pivot and summary columns and cell alignment for row group columns."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"

        Back to root property: columns

        Try a demo showcasing the align property.

        Read the nested value:

        const el = document.querySelector('smart-pivot-table');
const align = el.columns[0].align;

        allowFilterSets or gets whether the column can be filtered.boolean

        Sets or gets whether the column can be filtered.

        Default value

        true

        Back to root property: columns

        Try a demo showcasing the allowFilter property.

        Read the nested value:

        const el = document.querySelector('smart-pivot-table');
const allowFilter = el.columns[0].allowFilter;

        allowPivotSets or gets whether the column can be a pivot column.boolean

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

        Default value

        false

        Back to root property: columns

        Try a demo showcasing the allowPivot property.

        Read the nested value:

        const el = document.querySelector('smart-pivot-table');
const allowPivot = el.columns[0].allowPivot;

        allowRowGroupSets or gets whether the column can be a row group column.boolean

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

        Default value

        false

        Back to root property: columns

        Try a demo showcasing the allowRowGroup property.

        Read the nested value:

        const el = document.querySelector('smart-pivot-table');
const allowRowGroup = el.columns[0].allowRowGroup;

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

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

        Default value

        true

        Back to root property: columns

        Try a demo showcasing the allowSort property.

        Read the nested value:

        const el = document.querySelector('smart-pivot-table');
const allowSort = el.columns[0].allowSort;

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

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

        Default value

        ""

        Back to root property: columns

        Try a demo showcasing the dataField property.

        Read the nested value:

        const el = document.querySelector('smart-pivot-table');
const dataField = el.columns[0].dataField;

        dataTypeSets or gets the data type of the column's cells."boolean" | "date" | "number" | "string"

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

        Default value

        "string"

        Back to root property: columns

        Try a demo showcasing the dataType property.

        Read the nested value:

        const el = document.querySelector('smart-pivot-table');
const dataType = el.columns[0].dataType;

        formatFunctionA callback function that can be used to modify the contents of a cell and the cell itself.{ (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.

        Back to root property: columns

        Read the nested value:

        const el = document.querySelector('smart-pivot-table');
const formatFunction = el.columns[0].formatFunction;

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

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

        Default value

        ""

        Back to root property: columns

        Try a demo showcasing the label property.

        Read the nested value:

        const el = document.querySelector('smart-pivot-table');
const label = el.columns[0].label;

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

        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

        Back to root property: columns

        Try a demo showcasing the pivot property.

        Read the nested value:

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

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

        Default value

        false

        Back to root property: columns

        Try a demo showcasing the rowGroup property.

        Read the nested value:

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

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

        Back to root property: columns

        Try a demo showcasing the summary property.

        Read the nested value:

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

        summarySettingsSets or gets an object with settings for cells in summary columns. These settings are not applied if column formatFunction is also implemented. Click for more details. Property object's options:
          { 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.

          Back to root property: columns

          Try a demo showcasing the summarySettings property.

          Read the nested value:

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

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

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

          Default value

          false
          Try a demo showcasing the columnTotals property.

          Examples

          Markup and runtime examples for columnTotals:

          HTML attribute:

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

          Vanilla JS — prefer #id if multiple widgets exist on the page:

          const el = document.querySelector('smart-pivot-table');
el.columnTotals = false;

          Read the current value:

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

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

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

          Allowed Values

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

          Default value

          "near"
          Try a demo showcasing the columnTotalsPosition property.

          Examples

          Markup and runtime examples for columnTotalsPosition:

          HTML:

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

          Vanilla JS — prefer #id if multiple widgets exist on the page:

          const el = document.querySelector('smart-pivot-table');
el.columnTotalsPosition = "near";

          Read the current value:

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

          conditionalFormattingGets or sets the conditional formatting rules that determine how the PivotTable's cells are visually styled based on their values or other criteria. This allows you to dynamically highlight, color, or format cells within the PivotTable according to specified conditions. Click for more details. Property object's options:
            { column?: string; condition?: string; firstValue?: number; fontFamily?: string; fontSize?: string; highlight?: string; secondValue?: number; text?: string; }[]

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

            Properties

            columnThe data field of a numeric column to format. Set 'all' to format all numeric columns.
            conditionThe formatting condition.
            firstValueThe value to compare by. When condition is 'between', this is the start (from) value.
            fontFamilyThe fontFamily to apply to formatted cells.
            fontSizeThe fontSize to apply to formatted cells. The fontSize as set in CSS is used by default.
            highlightThe background color to apply to formatted cells.
            secondValueWhen condition is 'between', this is the end (to) value. Otherwise, this value is not used.
            textThe text color to apply to formatted cells.
            Try a demo showcasing the conditionalFormatting property.

            Examples

            Markup and runtime examples for conditionalFormatting:

            HTML:

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

            Vanilla JS — prefer #id if multiple widgets exist on the page:

            const el = document.querySelector('smart-pivot-table');
el.conditionalFormatting = [{ column: 'price', condition: 'between', firstValue: 3, secondValue: 5, fontFamily: 'Courier New', text: '#0000FF' }];

            Read the current value:

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

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

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

            Default value

            "all"

            Back to root property: conditionalFormatting

            Try a demo showcasing the column property.

            Read the nested value:

            const el = document.querySelector('smart-pivot-table');
const column = el.conditionalFormatting.column;

            conditionThe formatting condition."between" | "equal" | "greaterThan" | "lessThan" | "notEqual"

            The formatting condition.

            Default value

            "lessThan"

            Back to root property: conditionalFormatting

            Try a demo showcasing the condition property.

            Read the nested value:

            const el = document.querySelector('smart-pivot-table');
const condition = el.conditionalFormatting.condition;

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

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

            Default value

            0

            Back to root property: conditionalFormatting

            Try a demo showcasing the firstValue property.

            Read the nested value:

            const el = document.querySelector('smart-pivot-table');
const firstValue = el.conditionalFormatting.firstValue;

            fontFamilyThe fontFamily to apply to formatted cells."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"

            Back to root property: conditionalFormatting

            Try a demo showcasing the fontFamily property.

            Read the nested value:

            const el = document.querySelector('smart-pivot-table');
const fontFamily = el.conditionalFormatting.fontFamily;

            fontSizeThe fontSize to apply to formatted cells. The fontSize as set in CSS is used by default."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"

            Back to root property: conditionalFormatting

            Try a demo showcasing the fontSize property.

            Read the nested value:

            const el = document.querySelector('smart-pivot-table');
const fontSize = el.conditionalFormatting.fontSize;

            highlightThe background color to apply to formatted cells.string

            The background color to apply to formatted cells.

            Default value

            "The default backgroundColor as set in CSS"

            Back to root property: conditionalFormatting

            Try a demo showcasing the highlight property.

            Read the nested value:

            const el = document.querySelector('smart-pivot-table');
const highlight = el.conditionalFormatting.highlight;

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

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

            Default value

            1

            Back to root property: conditionalFormatting

            Try a demo showcasing the secondValue property.

            Read the nested value:

            const el = document.querySelector('smart-pivot-table');
const secondValue = el.conditionalFormatting.secondValue;

            textThe text color to apply to formatted cells.string

            The text color to apply to formatted cells.

            Default value

            "The default color as set in CSS"

            Back to root property: conditionalFormatting

            Try a demo showcasing the text property.

            Read the nested value:

            const el = document.querySelector('smart-pivot-table');
const text = el.conditionalFormatting.text;

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

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

            Default value

            ""
            Try a demo showcasing the dataSource property.

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

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

            Default value

            false
            Try a demo showcasing the defaultSortByRowGroups property.

            Examples

            Markup and runtime examples for defaultSortByRowGroups:

            HTML attribute:

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

            Vanilla JS — prefer #id if multiple widgets exist on the page:

            const el = document.querySelector('smart-pivot-table');
el.defaultSortByRowGroups = false;

            Read the current value:

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

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

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

            Default value

            false
            Try a demo showcasing the designer property.

            Examples

            Markup and runtime examples for designer:

            HTML attribute:

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

            Vanilla JS — prefer #id if multiple widgets exist on the page:

            const el = document.querySelector('smart-pivot-table');
el.designer = false;

            Read the current value:

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

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

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

            Allowed Values

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

            Default value

            "far"

            Examples

            Markup and runtime examples for designerPosition:

            HTML:

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

            Vanilla JS — prefer #id if multiple widgets exist on the page:

            const el = document.querySelector('smart-pivot-table');
el.designerPosition = "near";

            Read the current value:

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

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

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

            Default value

            false
            Try a demo showcasing the disabled property.

            Examples

            Markup and runtime examples for disabled:

            HTML attribute:

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

            Vanilla JS — prefer #id if multiple widgets exist on the page:

            const el = document.querySelector('smart-pivot-table');
el.disabled = false;

            Read the current value:

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

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

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

            Default value

            false
            Try a demo showcasing the drillDown property.

            Examples

            Markup and runtime examples for drillDown:

            HTML attribute:

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

            Vanilla JS — prefer #id if multiple widgets exist on the page:

            const el = document.querySelector('smart-pivot-table');
el.drillDown = false;

            Read the current value:

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

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

            Enhancements for clarity and detail:

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

            Examples

            Markup and runtime examples for drillDownCustomAction:

            HTML:

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

            Vanilla JS — prefer #id if multiple widgets exist on the page:

            const el = document.querySelector('smart-pivot-table');
el.drillDownCustomAction = "myExport";

            Read the current value:

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

            drillDownDataExportDisplays an export button within the drill-down dialog when this option is enabled, allowing users to export data directly from the dialog."" | "xlsx" | "pdf" | "html" | "json" | "csv" | "tsv" | "xml"

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

            Default value

            ""
            Try a demo showcasing the drillDownDataExport property.

            Examples

            Markup and runtime examples for drillDownDataExport:

            HTML:

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

            Vanilla JS — prefer #id if multiple widgets exist on the page:

            const el = document.querySelector('smart-pivot-table');
el.drillDownDataExport = "xlsx";

            Read the current value:

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

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

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

            Default value

            ""
            Try a demo showcasing the drillDownDataExportName property.

            Examples

            Markup and runtime examples for drillDownDataExportName:

            HTML:

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

            Vanilla JS — prefer #id if multiple widgets exist on the page:

            const el = document.querySelector('smart-pivot-table');
el.drillDownDataExportName = "myExport";

            Read the current value:

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

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

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

            Examples

            Markup and runtime examples for drillDownTableInit:

            HTML:

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

            Vanilla JS — prefer #id if multiple widgets exist on the page:

            const el = document.querySelector('smart-pivot-table');
el.drillDownTableInit = "myExport";

            Read the current value:

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

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

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

            Default value

            false
            Try a demo showcasing the enableSortByRowGroups property.

            Examples

            Markup and runtime examples for enableSortByRowGroups:

            HTML attribute:

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

            Vanilla JS — prefer #id if multiple widgets exist on the page:

            const el = document.querySelector('smart-pivot-table');
el.enableSortByRowGroups = false;

            Read the current value:

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

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

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

            Default value

            false

            Examples

            Markup and runtime examples for freezeHeader:

            HTML attribute:

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

            Vanilla JS — prefer #id if multiple widgets exist on the page:

            const el = document.querySelector('smart-pivot-table');
el.freezeHeader = false;

            Read the current value:

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

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

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

            Try a demo showcasing the getDefaultSummaryFunction property.

            Examples

            Markup and runtime examples for getDefaultSummaryFunction:

            HTML:

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

            Vanilla JS — prefer #id if multiple widgets exist on the page:

            const el = document.querySelector('smart-pivot-table');
el.getDefaultSummaryFunction = "getDefaultSummaryFunctionCallback";

            Read the current value:

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

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

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

            Default value

            false
            Try a demo showcasing the grandTotal property.

            Examples

            Markup and runtime examples for grandTotal:

            HTML attribute:

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

            Vanilla JS — prefer #id if multiple widgets exist on the page:

            const el = document.querySelector('smart-pivot-table');
el.grandTotal = false;

            Read the current value:

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

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

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

            Allowed Values

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

            Default value

            "default"
            Try a demo showcasing the groupLayout property.

            Examples

            Markup and runtime examples for groupLayout:

            HTML:

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

            Vanilla JS — prefer #id if multiple widgets exist on the page:

            const el = document.querySelector('smart-pivot-table');
el.groupLayout = "default";

            Read the current value:

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

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

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

            Default value

            false
            Try a demo showcasing the hideCellSelectionTooltip property.

            Examples

            Markup and runtime examples for hideCellSelectionTooltip:

            HTML attribute:

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

            Vanilla JS — prefer #id if multiple widgets exist on the page:

            const el = document.querySelector('smart-pivot-table');
el.hideCellSelectionTooltip = false;

            Read the current value:

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

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

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

            Default value

            false
            Try a demo showcasing the hideEmptyRows property.

            Examples

            Markup and runtime examples for hideEmptyRows:

            HTML attribute:

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

            Vanilla JS — prefer #id if multiple widgets exist on the page:

            const el = document.querySelector('smart-pivot-table');
el.hideEmptyRows = false;

            Read the current value:

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

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

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

            Default value

            false

            Examples

            Markup and runtime examples for keyboardNavigation:

            HTML attribute:

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

            Vanilla JS — prefer #id if multiple widgets exist on the page:

            const el = document.querySelector('smart-pivot-table');
el.keyboardNavigation = false;

            Read the current value:

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

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

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

            Default value

            "en"
            Try a demo showcasing the locale property.

            Examples

            Markup and runtime examples for locale:

            HTML:

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

            Vanilla JS — prefer #id if multiple widgets exist on the page:

            const el = document.querySelector('smart-pivot-table');
el.locale = "fr";

            Read the current value:

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

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

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

            Default value




            Try a demo showcasing the messages property.

            Examples

            Markup and runtime examples for messages:

            HTML:

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

            Vanilla JS — prefer #id if multiple widgets exist on the page:

            const el = document.querySelector('smart-pivot-table');
el.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"}};

            Read the current value:

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

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

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

            Try a demo showcasing the nullDefaultValue property.

            Examples

            Markup and runtime examples for nullDefaultValue:

            HTML:

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

            Vanilla JS — prefer #id if multiple widgets exist on the page:

            const el = document.querySelector('smart-pivot-table');
el.nullDefaultValue = null;

            Read the current value:

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

            onCellRenderA callback function that is invoked every time a cell within the PivotTable is rendered. This function allows you to customize the content, formatting, or behavior of individual PivotTable cells during the rendering process. It receives contextual information about the cell, such as its row, column, and data value.{ (data: any, dynamicColumn: any, value: any, cell: HTMLTableCellElement): void }

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

            Try a demo showcasing the onCellRender property.

            Examples

            Markup and runtime examples for onCellRender:

            HTML:

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

            Vanilla JS — prefer #id if multiple widgets exist on the page:

            const el = document.querySelector('smart-pivot-table');
el.onCellRender = "onCellRenderCallback";

            Read the current value:

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

            onColumnRenderA callback function that is invoked whenever a column header cell is rendered in the PivotTable. This function allows you to customize the appearance or behavior of each column header as it is generated during the rendering process.{ (settings: { text: string, cell: HTMLTableCellElement, column: PivotTableColumn, fullDefinition: any }): void }

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

            Try a demo showcasing the onColumnRender property.

            Examples

            Markup and runtime examples for onColumnRender:

            HTML:

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

            Vanilla JS — prefer #id if multiple widgets exist on the page:

            const el = document.querySelector('smart-pivot-table');
el.onColumnRender = "onColumnRenderCallback";

            Read the current value:

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

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

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

            Try a demo showcasing the onInit property.

            Examples

            Markup and runtime examples for onInit:

            HTML:

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

            Vanilla JS — prefer #id if multiple widgets exist on the page:

            const el = document.querySelector('smart-pivot-table');
el.onInit = "onInitCallback";

            Read the current value:

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

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

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

            Default value

            0

            Examples

            Markup and runtime examples for pageIndex:

            HTML:

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

            Vanilla JS — prefer #id if multiple widgets exist on the page:

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

            Read the current value:

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

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

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

            Default value

            10
            Try a demo showcasing the pageSize property.

            Examples

            Markup and runtime examples for pageSize:

            HTML:

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

            Vanilla JS — prefer #id if multiple widgets exist on the page:

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

            Read the current value:

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

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

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

            Default value

            false

            Examples

            Markup and runtime examples for paging:

            HTML attribute:

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

            Vanilla JS — prefer #id if multiple widgets exist on the page:

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

            Read the current value:

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

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

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

            Default value

            false
            Try a demo showcasing the rightToLeft property.

            Examples

            Markup and runtime examples for rightToLeft:

            HTML attribute:

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

            Vanilla JS — prefer #id if multiple widgets exist on the page:

            const el = document.querySelector('smart-pivot-table');
el.rightToLeft = true;

            Read the current value:

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

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

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

            Default value

            false
            Try a demo showcasing the rowSort property.

            Examples

            Markup and runtime examples for rowSort:

            HTML attribute:

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

            Vanilla JS — prefer #id if multiple widgets exist on the page:

            const el = document.querySelector('smart-pivot-table');
el.rowSort = false;

            Read the current value:

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

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

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

            Default value

            true
            Try a demo showcasing the rowSummary property.

            Examples

            Markup and runtime examples for rowSummary:

            HTML attribute:

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

            Vanilla JS — prefer #id if multiple widgets exist on the page:

            const el = document.querySelector('smart-pivot-table');
el.rowSummary = false;

            Read the current value:

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

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

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

            Default value

            false
            Try a demo showcasing the rowTotals property.

            Examples

            Markup and runtime examples for rowTotals:

            HTML attribute:

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

            Vanilla JS — prefer #id if multiple widgets exist on the page:

            const el = document.querySelector('smart-pivot-table');
el.rowTotals = false;

            Read the current value:

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

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

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

            Allowed Values

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

            Default value

            "near"
            Try a demo showcasing the rowTotalsPosition property.

            Examples

            Markup and runtime examples for rowTotalsPosition:

            HTML:

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

            Vanilla JS — prefer #id if multiple widgets exist on the page:

            const el = document.querySelector('smart-pivot-table');
el.rowTotalsPosition = "near";

            Read the current value:

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

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

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

            Default value

            false
            Try a demo showcasing the selection property.

            Examples

            Markup and runtime examples for selection:

            HTML attribute:

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

            Vanilla JS — prefer #id if multiple widgets exist on the page:

            const el = document.querySelector('smart-pivot-table');
el.selection = false;

            Read the current value:

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

            selectionModeSpecifies or retrieves the selection mode for the component. This property is effective only when the selection feature is enabled. When disabled, changing or accessing the selection mode has no effect."many" | "extended" | "cell"

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

            Allowed Values

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

            Default value

            "many"
            Try a demo showcasing the selectionMode property.

            Examples

            Markup and runtime examples for selectionMode:

            HTML:

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

            Vanilla JS — prefer #id if multiple widgets exist on the page:

            const el = document.querySelector('smart-pivot-table');
el.selectionMode = "many";

            Read the current value:

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

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

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

            Default value

            "none"

            Examples

            Markup and runtime examples for sortMode:

            HTML:

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

            Vanilla JS — prefer #id if multiple widgets exist on the page:

            const el = document.querySelector('smart-pivot-table');
el.sortMode = "many";

            Read the current value:

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

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

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

            Default value

            ""

            Examples

            Markup and runtime examples for theme:

            HTML:

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

            Vanilla JS — prefer #id if multiple widgets exist on the page:

            const el = document.querySelector('smart-pivot-table');
el.theme = "red";

            Read the current value:

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

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

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

            Default value

            false
            Try a demo showcasing the toolbar property.

            Examples

            Markup and runtime examples for toolbar:

            HTML attribute:

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

            Vanilla JS — prefer #id if multiple widgets exist on the page:

            const el = document.querySelector('smart-pivot-table');
el.toolbar = false;

            Read the current value:

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

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

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

            Default value

            false

            Examples

            Markup and runtime examples for tooltip:

            HTML attribute:

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

            Vanilla JS — prefer #id if multiple widgets exist on the page:

            const el = document.querySelector('smart-pivot-table');
el.tooltip = false;

            Read the current value:

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

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

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

            Default value

            ""

            Examples

            Markup and runtime examples for unlockKey:

            HTML:

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

            Vanilla JS — prefer #id if multiple widgets exist on the page:

            const el = document.querySelector('smart-pivot-table');
el.unlockKey = "1111-2222-3333-4444-5555";

            Read the current value:

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

            Events

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

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

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

            Arguments

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

            Methods

            isDefaultPrevented

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

            Returns

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

            preventDefault

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

            stopPropagation

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

            Try a demo showcasing the cellClick event.

            Examples

            Listen for cellClick using the pattern that matches your stack.

            DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

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

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

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

            Arguments

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

            Methods

            isDefaultPrevented

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

            Returns

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

            preventDefault

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

            stopPropagation

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

            Try a demo showcasing the change event.

            Examples

            Listen for change using the pattern that matches your stack.

            DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

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

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

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

            Arguments

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

            Methods

            isDefaultPrevented

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

            Returns

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

            preventDefault

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

            stopPropagation

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

            Try a demo showcasing the collapse event.

            Examples

            Listen for collapse using the pattern that matches your stack.

            DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

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

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

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

            Arguments

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

            Methods

            isDefaultPrevented

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

            Returns

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

            preventDefault

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

            stopPropagation

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

            Try a demo showcasing the collapseTotalColumn event.

            Examples

            Listen for collapseTotalColumn using the pattern that matches your stack.

            DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

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

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

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

            Arguments

            evCustomEvent
            ev.detailObject
            ev.detail.columnDefinition - An object detailing the clicked dynamic column.
            ev.detail.dataField - The data field of the cell's original column.

            Methods

            isDefaultPrevented

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

            Returns

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

            preventDefault

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

            stopPropagation

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

            Try a demo showcasing the columnClick event.

            Examples

            Listen for columnClick using the pattern that matches your stack.

            DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

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

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

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

            Arguments

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

            Methods

            isDefaultPrevented

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

            Returns

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

            preventDefault

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

            stopPropagation

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

            Try a demo showcasing the expand event.

            Examples

            Listen for expand using the pattern that matches your stack.

            DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

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

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

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

            Arguments

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

            Methods

            isDefaultPrevented

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

            Returns

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

            preventDefault

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

            stopPropagation

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

            Try a demo showcasing the expandTotalColumn event.

            Examples

            Listen for expandTotalColumn using the pattern that matches your stack.

            DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

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

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

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

            Arguments

            evCustomEvent
            ev.detailObject
            ev.detail.action - The filtering action. Possible actions: 'add', 'remove'.
            ev.detail.filters - The added filters. Only when action is 'add'.

            Methods

            isDefaultPrevented

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

            Returns

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

            preventDefault

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

            stopPropagation

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

            Try a demo showcasing the filter event.

            Examples

            Listen for filter using the pattern that matches your stack.

            DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

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

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

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

            Arguments

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

            Methods

            isDefaultPrevented

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

            Returns

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

            preventDefault

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

            stopPropagation

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

            Try a demo showcasing the sort event.

            Examples

            Listen for sort using the pattern that matches your stack.

            DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

            Methods

            addFilter( dataField: string, filter: any): voidApplies a filter to a designated column, enabling users to display only the rows that meet specified criteria within that column. This helps refine and customize the data view according to user-defined conditions.

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

            Arguments

            dataFieldstring

            The column's data field.

            filterany

            FilterGroup object.

            On the custom element in the DOM (narrow the selector, e.g. to #my-pivottable, if you host multiple widgets):

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

            Try a demo showcasing the addFilter method.

            clearFilters(): voidRemoves all currently applied filters from the data set, resetting the view to display unfiltered results.

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

            On the custom element in the DOM (narrow the selector, e.g. to #my-pivottable, if you host multiple widgets):

            document.querySelector('smart-pivot-table')?.clearFilters();

            Try a demo showcasing the clearFilters method.

            clearSelection(): voidRemoves any currently selected items or text, resetting the selection state to none.

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

            On the custom element in the DOM (narrow the selector, e.g. to #my-pivottable, if you host multiple widgets):

            document.querySelector('smart-pivot-table')?.clearSelection();

            Try a demo showcasing the clearSelection method.

            clearSort(): voidRemoves any applied sorting from the PivotTable, restoring the original item order based on the data source’s default arrangement.

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

            On the custom element in the DOM (narrow the selector, e.g. to #my-pivottable, if you host multiple widgets):

            document.querySelector('smart-pivot-table')?.clearSort();

            Try a demo showcasing the clearSort method.

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

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

            On the custom element in the DOM (narrow the selector, e.g. to #my-pivottable, if you host multiple widgets):

            document.querySelector('smart-pivot-table')?.collapseAllRows();

            Try a demo showcasing the collapseAllRows method.

            collapseRow( rowId: string | number): voidCollapses a row within a table that has multiple row groups, hiding its detailed content and displaying only the summary or header for that group. This action helps to organize and condense complex tables for easier navigation and viewing.

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

            Arguments

            rowIdstring | number

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

            On the custom element in the DOM (narrow the selector, e.g. to #my-pivottable, if you host multiple widgets):

            document.querySelector('smart-pivot-table')?.collapseRow(11);

            Try a demo showcasing the collapseRow method.

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

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

            On the custom element in the DOM (narrow the selector, e.g. to #my-pivottable, if you host multiple widgets):

            document.querySelector('smart-pivot-table')?.expandAllRows();

            Try a demo showcasing the expandAllRows method.

            expandRow( rowId: string | number): voidExpands a specific row within the table, allowing additional content or details to be displayed, when multiple row groups are present. This function helps users view more information for a selected row without collapsing the grouping structure.

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

            Arguments

            rowIdstring | number

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

            On the custom element in the DOM (narrow the selector, e.g. to #my-pivottable, if you host multiple widgets):

            document.querySelector('smart-pivot-table')?.expandRow(8);

            Try a demo showcasing the expandRow method.

            exportData( dataFormat: string, fileName: string, callback?: Function): anyExports all data from the PivotTable in a structured format, allowing for further analysis, reporting, or use in external applications.

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

            Arguments

            dataFormatstring

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

            fileNamestring

            The name of the file to export to

            callback?Function

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

            Returnsany

            On the custom element in the DOM (narrow the selector, e.g. to #my-pivottable, if you host multiple widgets):

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

            Try a demo showcasing the exportData method.

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

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

            Returnsany[]

            On the custom element in the DOM (narrow the selector, e.g. to #my-pivottable, if you host multiple widgets):

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

            Try a demo showcasing the getDynamicColumns method.

            getSelection(): (string | number)[] | { dataField: string, rowId: string | number }[]Returns an array representing the current selection within the grid, based on the specified selectionMode:- When selectionMode is set to 'many' or 'extended', the array contains the IDs of all selected rows.- When selectionMode is set to 'cell', the array contains objects with details about each selected cell (such as row and column identifiers).The structure of the returned array adapts dynamically to match the current selection mode.

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

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

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

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

            On the custom element in the DOM (narrow the selector, e.g. to #my-pivottable, if you host multiple widgets):

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

            Try a demo showcasing the getSelection method.

            refresh(): voidUpdates the PivotTable data and recalculates all its values, ensuring that any changes in the underlying data source are reflected in the PivotTable’s current view.

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

            On the custom element in the DOM (narrow the selector, e.g. to #my-pivottable, if you host multiple widgets):

            document.querySelector('smart-pivot-table')?.refresh();

            Try a demo showcasing the refresh method.

            removeFilter( dataField: string): voidRemoves all active filters from a specified column, restoring the column to display its full, unfiltered dataset.

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

            Arguments

            dataFieldstring

            The column's data field.

            On the custom element in the DOM (narrow the selector, e.g. to #my-pivottable, if you host multiple widgets):

            document.querySelector('smart-pivot-table')?.removeFilter();

            Try a demo showcasing the removeFilter method.

            select( rowId: string | number | (string | number)[], dataField?: string): voidEnables selection of rows or cells within the data grid, depending on the specified selectionMode:- When selectionMode is set to 'many' or 'extended', this function allows for the selection of one or multiple rows.- When selectionMode is set to 'cell' and a second argument is provided, it allows for the selection of a single cell instead of an entire row.Use the appropriate selectionMode and arguments to control whether users can select individual rows, multiple rows, or specific cells within the grid.

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

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

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

            Arguments

            rowIdstring | number | (string | number)[]

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

            dataField?string

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

            On the custom element in the DOM (narrow the selector, e.g. to #my-pivottable, if you host multiple widgets):

            document.querySelector('smart-pivot-table')?.select("Ohno0");

            Try a demo showcasing the select method.

            setLocale( locale: string, messages?: any): voidSets the locale of a component.

            Sets the locale of a component.

            Arguments

            localestring

            The locale abbreviation. For example: 'de'.

            messages?any

            Object containing the locale messages.

            On the custom element in the DOM (narrow the selector, e.g. to #my-pivottable, if you host multiple widgets):

            document.querySelector('smart-pivot-table')?.setLocale("'de'");

            sortBy( columnDefinition: any, sortOrder?: string): voidSorts the data based on the values in a summary or grouping column, allowing you to organize records according to aggregated results or group identifiers.

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

            Arguments

            columnDefinitionany

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

            sortOrder?string

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

            On the custom element in the DOM (narrow the selector, e.g. to #my-pivottable, if you host multiple widgets):

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

            Try a demo showcasing the sortBy method.

            unselect( rowId: string | number | (string | number)[], dataField?: string): voidDeselects one or more rows when selectionMode is set to 'many' or 'extended'. Alternatively, if selectionMode is 'cell' and a second argument specifying the target cell is provided, this method will deselect the specified cell. This allows for flexible unselection behavior depending on the current selection mode and provided arguments.

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

            Arguments

            rowIdstring | number | (string | number)[]

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

            dataField?string

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

            On the custom element in the DOM (narrow the selector, e.g. to #my-pivottable, if you host multiple widgets):

            document.querySelector('smart-pivot-table')?.unselect("Saylor0");

            Try a demo showcasing the unselect method.

            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