GuidesUniver SheetsFeaturesPivot TablePro

Pivot Table

Facade APIPaid VersionUniver ServerUniver on Node.jsPreset
βœ…βœ…-βœ…UniverSheetsAdvancedPreset

Pivot table is a powerful data analysis tool that can quickly summarize, organize and analyze large amounts of data, thereby helping users discover patterns and trends in the data.

This feature includes the following plugin packages:

  • @univerjs-pro/engine-pivot provides the most basic data calculation capabilities for pivot tables. The plugin does not rely on any third-party plug-ins for its work.
  • @univerjs-pro/sheets-pivot assembles engine-pivot into universal sheet plugin to support table rendering, collaboration, formulas and other capabilities
  • @univerjs-pro/sheets-pivot-ui provides a basic drag-and-drop interface & filtering and other dialogs required for interaction

Currently supported functions include:

  • 11 subtotal methods supported like excel
  • Dimension label filtering and sorting (using localCompare method)
  • tabular layout
  • expand / collapse
  • Supports multiple value dimensions, and can customize the area (value position) and position (value index) of the multi-value dimension.
  • rename field & format filed
  • auto refresh when data source range change and dirty formula witch ref the pivot table area

We also plan to support the following features in the near future:

  • Group , the date group & element group & number group
  • Filter & sort, support the value filter and value sort
  • Show data as, support all kind of show data as type in excel
  • Calc field & calc item
  • Enhance the layout ability, support compact & outline layout, merge items and blank rows.

Presets Installation

Please follow the instructions in Print.

Advanced Installation

Plugin Installation and Import

npm install @univerjs-pro/engine-pivot @univerjs-pro/sheets-pivot @univerjs-pro/sheets-pivot-ui
import { LocaleType, Tools } from '@univerjs/core';
import { UniverSheetsPivotTablePlugin } from '@univerjs-pro/sheets-pivot';
import { UniverSheetsPivotTableUIPlugin } from '@univerjs-pro/sheets-pivot-ui';
import SheetsPivotTableEnUS from '@univerjs-pro/sheets-pivot/locale/en-US';
import SheetsPivotTableUIEnUS from '@univerjs-pro/sheets-pivot-ui/locale/en-US';
 
import '@univerjs-pro/sheets-pivot-ui/lib/index.css';
 
import '@univerjs-pro/sheets-pivot/facade';
 
const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: Tools.deepMerge(
      SheetsPivotTableEnUS,
      SheetsPivotTableUIEnUS
    ),
  },
});
 

Plugin Registration

The Pivot Table plugin supports flexible registration for different usage scenarios, offering two modes to suit various computational demands.

Registering in the Main Process Only

The Pivot Table plugin can be registered in the main process only. This mode is suitable for lightweight tasks, offering simplicity with no additional plugin configuration required. Developers only need to import UniverSheetsPivotTablePlugin.

univer.registerPlugin(UniverSheetsPivotTablePlugin);
univer.registerPlugin(UniverSheetsPivotTableUIPlugin);

Registering in Both the Main Process and Worker Process

For high-performance scenarios, the Pivot Table plugin supports registration in both the main process and the worker process. This mode leverages a multi-threaded architecture to enable efficient data distribution and computation, significantly reducing the computational burden on the main process and enhancing overall performance.

In this mode, the main process is primarily responsible for data distribution, synchronization, and rendering, while the worker process handles complex computational tasks. To enable this mode, the plugin must be configured during registration.

// main process file
// Setting notExecuteFormula to true indicates that the main process does not perform calculations. 
// It is only responsible for data distribution, synchronization, and rendering.
univer.registerPlugin(UniverSheetsPivotTablePlugin, { notExecuteFormula: true });
univer.registerPlugin(UniverSheetsPivotTableUIPlugin);
 
// web worker process file
// Setting notExecuteFormula to false indicates that the worker process performs the calculations.
univer.registerPlugin(UniverSheetsPivotTablePlugin, { notExecuteFormula: false });

Installation Univer on Node.js

import { LocaleType, Tools } from '@univerjs/core';
import { UniverSheetsPivotTablePlugin } from '@univerjs-pro/sheets-pivot';
import SheetsPivotTableEnUS from '@univerjs-pro/sheets-pivot/locale/en-US';
 
import '@univerjs-pro/sheets-pivot/facade';
 
const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: Tools.deepMerge(
      SheetsPivotTableEnUS,
    ),
  },
});
 
univer.registerPlugin(UniverSheetsPivotTablePlugin, { notExecuteFormula: false });

Facade API

Add a Pivot Table

import { PositionType } from '@univerjs-pro/sheets-pivot'
 
const univerAPI = FUniver.newAPI(univer)
const fWorkbook = univerAPI.getActiveWorkbook()
const unitId = fWorkbook.getId()
const fSheet = fWorkbook.getActiveSheet()
const subUnitId = fSheet.getSheetId()
const sheetName = fSheet.getSheetName()
const sourceInfo = {
  unitId,
  subUnitId,
  sheetName,
  range: {
    startRow: 0,
    startColumn: 0,
    endRow: 8,
    endColumn: 5,
  },
}
const anchorCellInfo = {
  unitId,
  subUnitId,
  row: 0,
  col: 8,
}
const FPivot = await fWorkbook.addPivotTable(sourceInfo, PositionType.Exiting, anchorCellInfo)

FPivotTable

The getPivotTableByCell method in the F-workbook instance can be used to get the pivot table instance by the anchor cell. It will return the FPivotTable instance if the target cell is in a pivot table.

const fPivotTable =  fWorkbook.getPivotTableByCell(unitId, subUnitId, 0, 8)

There are some methods in the FPivotTable instance, which can be used to operate the pivot table.

MethodDescription
removeremove the pivot table from instance
getConfigreturn the pivot table config, the source range info, anchor cell info and config
addFieldadd a field to pivot table
removeFieldremove a field from pivot table
updateFieldPositionupdate the field position in pivot table
updateValuePositioncontrol the βˆ‘Value postion
setSubtotalTypeset the subtotal type of the field
setLabelSortset the label sort of the field
setLabelFilterset the label filter of the field
renameFieldrename the field
/**
 * @description Get the pivot table config by the pivot table id.
 * @typedef PivotTableConfig
 * @property {TargetInfo} targetCellInfo  The target cell info of the pivot table.
 * @property {SourceInfo} sourceRangeInfo The source data range info of the pivot table.
 * @property {boolean} isEmpty The pivot table is empty or not.
 * @property {object} fieldsConfig The snapshot of the pivot table fields config.
 * @returns {PivotTableConfig|undefined} The pivot table config or undefined.
 */
getConfig():IPivotTableConfig;
/**
 * @description Remove a pivot table from the workbook by pivot table id
 */
async remove():void;
/**
 *@description Add a pivot field to the pivot table.
  * @param {string|number} dataFieldIdOrIndex The data field id.
  * @param {PivotTableFiledAreaEnum} fieldArea The area of the field.
  * @param {number} index The index of the field in the target area.
  * @returns {boolean} Whether the pivot field is added successfully.
  */
async addField(dataFieldIdOrIndex: string | number, fieldArea: PivotTableFiledAreaEnum, index: number): Promise<boolean>;
/**
 * @description Remove a pivot field from the pivot table
 * @param {string[]} fieldIds The deleted field ids.
 * @returns {boolean} Whether the pivot field is removed successfully.
 */
async removeField(fieldIds: string[]): Promise<boolean>;
/**
 * @description Update the pivot table field position.
 * @param {string} fieldId - The moved field id.
 * @param {PivotTableFiledAreaEnum} area - The target area of the field.
 * @param {number} index - The target index of the field, if the index is bigger than the field count in the target area, the field will be moved to the last, if the index is smaller than 0, the field will be moved to the first.
 * @returns {boolean} Whether the pivot field is moved successfully.
 */
async updateFieldPosition(fieldId: string, area: PivotTableFiledAreaEnum, index: number): Promise<boolean>;
/**
 * @description If there are multiple value fields in the pivot table, you can update the position of the value field, which only can be position in row or column.
 * @param {PivotTableValuePositionEnum} position - The position of the value field.
 * @param {number} index - The index of the value field.
 * @returns {boolean} Whether the pivot value field is moved successfully.
 */
async updateValuePosition(position: PivotTableValuePositionEnum, index: number): Promise<boolean>;
/**
 * @description Set the pivot table subtotal type for value field, it only works for the value field.
 * @param {string} fieldId - The field id.
 * @param {PivotSubtotalTypeEnum} subtotalType - The subtotal type of the field.
 * @returns {boolean} Whether the pivot table subtotal type is set successfully.
 */
async setSubtotalType(fieldId: string, subtotalType: PivotSubtotalTypeEnum): Promise<boolean>;
/**
 * @description Set the pivot table sort info.
 * @param {string} tableFieldId - The field id of the sort.
 * @param {PivotTableSortInfo} info - The sort info.
 * @typedef PivotTableSortInfo
 * @property {PivotDataFieldSortOperatorEnum} type The sort operator of the field items.
 * @returns {boolean} Whether the pivot table sort info is set successfully.
 */
async setLabelSort(tableFieldId: string, info: IPivotTableSortInfo): Promise<boolean>;
/**
 * @description Set the pivot table filter.
 * @param {string} tableFieldId - The field id of the filter.
 * @param {string[]} items - The items of the filter.
 * @returns {boolean} Whether the pivot table filter is set successfully.
 */
async setLabelFilter(tableFieldId: string, items: string[], isAll?: boolean): Promise<boolean>;
/**
 * @description Rename the pivot table field.
 * @param {string} fieldId - The field id. 
 * @param {string} name - The new name of the field.
 * @returns {boolean} Whether the pivot table field is renamed successfully.
 */
async renameField(fieldId: string, name: string): Promise<boolean>;