Perform cell selection and get selected cells information in React Pivotview component

27 Jun 20245 minutes to read

You can select any cell/row by setting the property gridSettings.allowSelection as true where the selected cells can be highlighted. It can be done through mouse down or arrow keys.

Selection mode

It supports four types of selection mode that can be set by the property gridSettings.selectionSettings.mode. They are,

• Row: The Row value is set by default, and allows you to select only rows.
• Column: Allows you to select only columns.
• Cell: Allows you to select only cells.
• Both: Allows you to select rows and columns at the same time.

Selection type

It supports two types of selection that can be set by the property gridSettings.selectionSettings.type. They are,

• Single: The Single value is set by default, and it only allows selection of a single row or a column or a cell.
• Multiple: Allows you to select multiple rows or cells. To perform the multi-selection, press and hold CTRL key and click the desired rows or columns or cells. To select range of rows or cells, press and hold the SHIFT key and click the rows or columns or cells.

Event

The event cellSelected fires on every cell/row/column on selected/deselected operations and it provides the selected cells information with its corresponding column and row headers.

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 { IDataOptions, IDataSet, PivotViewComponent, GridSettings, PivotCellSelectedEventArgs } from '@syncfusion/ej2-react-pivotview';
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: IDataOptions = {
    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;