Angular

Vue

React

Getting Started with Vue PivotTable Component

Smart UI Vue examples target Vue 3 and Vite; enable TypeScript in create-vue when you want typed SFCs.

Demo source (Smart UI repo): vue/vue-3/src/pivottable/basic/App.vue

Scaffold with Vite (Vue 3)

Run the official scaffolding tool:

npm create vue@latest

You will be prompted for TypeScript, Router, Pinia, and other options. When unsure, accept defaults and enable features later.

cd <your-project-name>
npm install
npm install smart-webcomponents
npm run dev

Vue + TypeScript

If you enabled TypeScript, use vite.config.ts with the same isCustomElement configuration as below so the compiler treats Smart UI tags as native custom elements.

Teach Vue about custom elements

Without this, Vue warns about unknown custom elements. Open vite.config.js or vite.config.ts and configure the Vue plugin so smart-* and legacy jqx-* tags are passed through to the DOM:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: tag => tag.startsWith('smart-') || tag.startsWith('jqx-')
        }
      }
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

App.vue example

Example from Smart UI Vue 3 demos for this widget:

<template>
  <div class="vue-root">
    <div class="demo-description">
      This demo showcases the basic functionality of smart-pivot-table - a table
      of statistics that summarizes tabular data.
    </div>
    <smart-pivot-table id="pivotTable"></smart-pivot-table>
  </div>
</template>

<script>
import { onMounted } from "vue";
import "smart-webcomponents/source/styles/smart.default.css";
import "smart-webcomponents/source/modules/smart.pivottable.js";

export default {
  name: "app",
  setup() {
    onMounted(() => {
      window.Smart(
        "#pivotTable",
        class {
          get properties() {
            return {
              dataSource: new window.Smart.DataAdapter({
                dataSource: window.generateData(50),
                dataFields: [
                  "firstName: string",
                  "lastName: string",
                  "productName: string",
                  "quantity: number",
                  "price: number",
                  "date: date"
                ]
              }),
              freezeHeader: true,
              grandTotal: true,
              keyboardNavigation: true,
              columns: [
                {
                  label: "First Name",
                  dataField: "firstName",
                  dataType: "string"
                },
                {
                  label: "Last Name",
                  dataField: "lastName",
                  dataType: "string",
                  allowRowGroup: true,
                  rowGroup: true
                },
                {
                  label: "Product Name",
                  dataField: "productName",
                  dataType: "string",
                  allowPivot: true,
                  pivot: true
                },
                {
                  label: "Quantity",
                  dataField: "quantity",
                  dataType: "number",
                  summary: "sum"
                },
                {
                  label: "Price",
                  dataField: "price",
                  dataType: "number",
                  summary: "sum",
                  summarySettings: {
                    prefix: "$",
                    decimalPlaces: 2
                  }
                },
                {
                  label: "Date Purchased",
                  dataField: "date",
                  dataType: "date"
                } // column is not rendered, because it is neither "pivot", "rowGroup", nor it has "summary"
              ]
            };
          }
        }
      );
    });
  }
};
</script>

<style>
.smart-pivot-table {
  height: 800px;
}
</style>

You can now use smart-pivot-table in templates; bindings and events follow Vue's normal syntax.

Pivot Table Concepts, Columns, and Column Roles

Smart.PivotTable is a table of statistics that summarizes the data of a more extensive table (such as from a database, spreadsheet, or business intelligence program). This summary might include sums, averages, or other statistics, which the pivot table groups together in a meaningful way. The PivotTable arranges and rearranges (or "pivots") statistics in order to draw attention to useful information.

PivotTable has two types of columns - the original columns, that correspond to the ones from the grid/table/database the data is retrieved from, and the dynamic columns which are the columns visible in the PivotTable after the data has been processed.

Original Columns

The original columns are defined in the PivotTable's settings by setting the columns property. Here is a sample configuration:

columns: [
    { label: 'Last Name', dataField: 'lastName', dataType: 'string', allowRowGroup: true, rowGroup: true },
    { label: 'First Name', dataField: 'firstName', dataType: 'string', allowRowGroup: true, rowGroup: true },
    { label: 'Product Name', dataField: 'productName', dataType: 'string', allowPivot: true, pivot: true },
    { label: 'Quantity', dataField: 'quantity', dataType: 'number', summary: 'sum' },
    { label: 'Price', dataField: 'price', dataType: 'number', summary: 'sum', summarySettings: { prefix: '$', decimalPlaces: 2 } }
]

To be visualized in the PivotTable, a column has to have at least one role, configured by setting one of the properties:

pivot - data from pivot columns is represented as column hierarchy in the PivotTable (see image below - (1)). Whether or not a column can be a pivot column is determined by allowPivot. Pivot columns are optional.
rowGroup - data from row group columns is represented as rows in the PivotTable (see image below - (2)). Whether a column can be a row group column is determined by allowRowGroup. Row group columns are optional.
summary - determines 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 (see image below - (3)). Possible summary functions are:
- 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

Dynamic Columns

Once the PivotTable's data source and original columns array are processed, dynamic columns with summarized data are produced and populated. Here is an image that shows a Smart.PivotTable with dynamic columns based on the columns array from above:

The cell highlighted in red in the image shows the sum of the prices (summary (3)) of all products Green Tea (pivot (1)), purchased by everyone named Antony Winkler (rowGroup (2)).

There can be multiple pivot, row group, and summary columns. The order in which they appear in the PivotTable depends on the order in which they are configured in the columns array. That is why, in this case, rows are first grouped by Last Name, then by First Name and sum(Quantity) is before sum(Price).

Information about all currently displayed dynamic columns can be retrieved by calling the method getDynamicColumns.

Drill Down

Each cell in PivotTable may summarize one or more original data points. If the property drillDown is enabled, the user can double-click a cell to show a Smart.Table in a dialog with all records aggregated in the clicked PivotTable cell.

Pivot Table Operations

A variety of operations can be performed on Smart.PivotTable's aggregated data or dynamic columns. Here is an overview:

Column Reorder

Dynamic columns can be reordered by clicking a summary header and dragging with the mouse. Reorder is enabled by setting the columnReorder property to true.

Data Export

The PivotTable's data can be exported to a wide variety of file formats:

CSV
HTML
JSON (depends on the external free plug-in JSZip)
PDF (depends on the external free plug-in PDFMake)
TSV
XLSX
XML

by calling the element's method exportData, e.g.:

const pivotTable = document.getElementById('pivotTable');
pivotTable.exportData('html', 'pivotTable');

This sample code exports the PivotTable to the file pivotTable.html.

Filtering

The original data bound to Smart.PivotTable can be filtered in order to summarize a more focused set of data points. Filtering can be applied in two ways:

Programmatically by calling the method addFilter. Related methods are removeFilter and clearFilters.
Via the "Filters" panel of the PivotTable's designer. It can be displayed as a stand-alone part of the element by setting designer to true or can be opened in a dialog by clicking the "Fields" button of the PivotTable's toolbar. The designer is described in detail in the help topic Pivot Table Toolbar, Designer, and Settings.

Selection

Checkbox row selection can be enabled in Smart.PivotTable by setting the property selection to true. There are two selection modes available:

selectionMode: 'many' (default) - multiple rows can be selected by clicking the rows or their respective checkboxes.
selectionMode: '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.

Sorting

The PivotTable can be sorted by its dynamic columns (including the Group column). The sorting behavior is controlled by the property sortMode with the following values:

'none' (default) - sorting is disabled.
'one' - sorting by one column only is enabled.
'many' - sorting by multiple columns is enabled.

Users can apply sorting by clicking on a column's summary header. Clicking multiple times toggles between ascending direction, descending direction, and no sorting.

Alternatively, sorting can be modified with the methods sortBy and clearSort.

Classic Layout

When there are row group columns in the PivotTable, an alternative layout, inspired by classic, OLAP, pivot tables can be enabled. In this layout, there is a separate column for each level of nesting (row group applied) as opposed to the default, tree grid-like, style with a separate row for each record in the hierarchy. Moreover, in classic layout, the data shown in a table row depends on whether the row is collapsed ("parent" data) or expanded (first "child" data).

The classic, OLAP, layout can be enabled by setting the property groupLayout to 'classic':

Advanced Features

Additional, advanced, features of Smart.PivotTable are described in the following help topics:

Methods

Smart.PivotTable has the following methods:

addFilter(dataField, filter) - adds a filter to a specific column.
clearFilters() - clears applied filters.
clearSelection() - clears selection.
clearSort() - clears the PivotTable sorting.
collapseAllRows() - collapses all rows (when multiple row groups are applied).
collapseRow(rowId) - collapses a row (when multiple row groups are applied).
expandAllRows() - expands all rows (when multiple row groups are applied).
expandRow(rowId) - expands a row (when multiple row groups are applied).
exportData(dataFormat, fileName, callback) - exports the PivotTable's data.
getDynamicColumns() - returns the current dynamic pivot columns.
getSelection() - returns an array of selected row ids.
refresh() - refreshes the PivotTable.
removeFilter(dataField) - removes filters applied to a specific column.
select(rowId) - selects a row.
sortBy(columnDefinition,sortOrder) - sorts by a summary or group column.
unselect(rowId) - unselects a row.

Live demos

Supported stacks: Smart UI targets Angular 17+, React 18+, Vue 3+, Node 18 LTS, and evergreen browsers; pin exact package versions to your org policy.