Select cells and get selection info in React Pivotview component

13 Sep 20256 minutes to read

The React Pivot Table component allows users to select cells or rows by enabling the allowSelection property in the gridSettings configuration. Once enabled, users can highlight selected cells using a mouse click or arrow keys. This guide explains how to configure selection modes, types, and handle the cellSelected event to retrieve selected cell information.

Selection modes

The Pivot Table supports four selection modes, which can be set using the mode property in gridSettings.selectionSettings. These modes determine what parts of the table can be selected:

• Row: This is the default mode. It allows users to select entire rows only.
• Column: This mode allows users to select entire columns only.
• Cell: This mode allows users to select individual cells only.
• Both: This mode allows users to select both rows and columns simultaneously.

Selection types

The Pivot Table offers two selection types, configurable through the type property in gridSettings.selectionSettings. These types define how many items can be selected:

• Single: This is the default type. It allows users to select only one row, column, or cell at a time.
• Multiple: This type allows users to select multiple rows, columns, or cells. To select multiple items, hold the Ctrl key and click the desired rows, columns, or cells. To select a range, hold the Shift key and click the start and end rows, columns, or cells.

Handling the cellSelected event

The cellSelected event triggers whenever a cell, row, or column is selected or deselected. This event provides details about the selected cells, including their corresponding row and column headers, through the selectedCellsInfo property. Additionally, the pivotValues property provides access to the Pivot Table’s data structure.

Code example

The following example demonstrates how to enable multiple cell selection in the Pivot Table and handle the cellSelected event to retrieve selected cell information.

App.jsx

import { PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import { pivotData } from './datasource';
function App() {
    let gridSettings = {
        allowSelection: true,
        selectionSettings: { mode: 'Both', type: 'Multiple' }
    };
    let dataSourceSettings = {
        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
        dataSource: pivotData,
        expandAll: false,
        filters: [],
        drilledMembers: [{ name: 'Country', items: ['France'] }],
        formatSettings: [{ name: 'Amount', format: 'C2', useGrouping: false, minimumSignificantDigits: 1, maximumSignificantDigits: 3 }],
        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
        values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
        rows: [{ name: 'Country' }, { name: 'Products' }],
    };
    function onCellSelected(args) {
        //args.selectedCellsInfo -> get selected cells information.
        //args.pivotValues -> get the pivot values of the pivot table.
    }
    let pivotObj;
    return (<PivotViewComponent ref={d => pivotObj = d} id='PivotView' height={350} dataSourceSettings={dataSourceSettings} gridSettings={gridSettings} cellSelected={onCellSelected}></PivotViewComponent>);
};
export default App;

App.tsx

import { IDataSet, PivotViewComponent, GridSettings, PivotCellSelectedEventArgs } from '@syncfusion/ej2-react-pivotview';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
import * as React from 'react';
import { pivotData } from './datasource';

function App() {

  let gridSettings: GridSettings = {
    allowSelection: true,
    selectionSettings: { mode: 'Both', type: 'Multiple' }
  } as GridSettings;

  let dataSourceSettings: DataSourceSettingsModel = {
    columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
    dataSource: pivotData as IDataSet[],
    expandAll: false,
    filters: [],
    drilledMembers: [{ name: 'Country', items: ['France'] }],
    formatSettings: [{ name: 'Amount', format: 'C2', useGrouping: false, minimumSignificantDigits: 1, maximumSignificantDigits: 3 }],
    columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
    values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
    rows: [{ name: 'Country' }, { name: 'Products' }],
  }

  function onCellSelected(args: PivotCellSelectedEventArgs): void {
    //args.selectedCellsInfo -> get selected cells information.
    //args.pivotValues -> get the pivot values of the pivot table.
  }
  let pivotObj: PivotViewComponent;
  
  return (<PivotViewComponent  ref={ (d: PivotViewComponent) => pivotObj = d } id='PivotView' height={350} dataSourceSettings={dataSourceSettings} gridSettings={gridSettings} cellSelected={onCellSelected}></PivotViewComponent>);
};

export default App;