Accessibility in React Pivotview component

26 Jul 202424 minutes to read

The pivot table component followed the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.

The accessibility compliance for the pivot table component is outlined below.

Accessibility Criteria Compatibility
WCAG 2.2 Support Intermediate
Section 508 Support Intermediate
Screen Reader Support Yes
Right-To-Left Support Yes
Color Contrast Yes
Mobile Device Support Yes
Keyboard Navigation Support Yes
Accessibility Checker Validation Yes
Axe-core Accessibility Validation Yes
Yes - All features of the component meet the requirement.
Intermediate - Some features of the component do not meet the requirement.
No - The component does not meet the requirement.

WAI-ARIA attributes

WAI-ARIA (Accessibility Initiative – Accessible Rich Internet Applications) defines a way to increase the accessibility of web pages, dynamic content, and user interface components developed with Ajax, HTML, JavaScript,and related technologies. ARIA provides additional semantics to describe the role, state, and functionality of web components. The following ARIA attributes are used in the pivot table component:

Attributes Purpose
role=grid Attribute added to identify the grid component element within the pivot table element.
role=region Attribute added to identify the chart component element within the pivot table element.
role=button This attribute is added to the pager navigation buttons as well as the buttons in the dialog popup such as field list, calculated field, member editor, conditional formatting of pivot table component to indicate that it is a clickable element.
role=table This attribute is added to each conditional formatting style container element to denote it as a table.
role=tableItems This attribute is added to the container element that appears inside the number formatting popup to indicate it as a table.
aria-disabled The buttons within the dialog popups, such as field list, calculated field and member editor, will be disabled based on their usability. To indicate its disabled state, we will add this attribute with the values true. By default, the attribute value is set to false.
aria-label This attribute is added to label elements that are placed inside the pager, member editor popup, and calculated field popup to identify them as label elements.
aria-selected This attribute is added to the selected treeview item in the calculated field popup with the value as true to denote that it is a selected element.
aria-colspan This attribute is added to the th elements in the e-table, which represent the column span value.
aria-rowspan This attribute is added to the th elements in the e-table, which represent the row span value.
data-type This attribute is added to the treeview item in the calculated field popup, as well as the buttons in the grouping bar and field list. It represents the aggregate type for the specified field.
data-caption This attribute is added to the treeview item in the calculated field popup, as well as the buttons in the grouping bar and field list. It represents the caption for the specified field.
data-basefield This attribute is added to the treeview item in the calculated field popup, as well as the buttons in the grouping bar and field list. It denotes the base field for the specified field, which is used to display the values for aggregation types such as DifferenceFrom, PercentageOfDifferenceFrom, and PercentageOfParentTotal.
data-baseitem This attribute is added to the treeview item in the calculated field popup, as well as the buttons in the grouping bar and field list. It denotes the base item for the specified field, which is used to display the values for aggregation types such as DifferenceFrom, PercentageOfDifferenceFrom, and PercentageOfParentTotal.
data-field This attribute is added to the treeview item in the calculated field popup. It denotes the name of the specified field.
data-membertype This attribute is added to the treeview item in the calculated field popup. It denotes the member type of the selected OLAP calculated field.
data-hierarchy This attribute is added to the treeview item in the calculated field popup. It denotes the parent hierarchy unique name of the selected OLAP calculated field.
data-formula This attribute is added to the treeview item in the calculated field popup. It denotes the formula used for the specified calculated field.
data-formatString This attribute is added to the treeview item in the calculated field popup. It denotes the format string used for the specified calculated field.
data-customformatstring This attribute is added to the treeview item in the calculated field popup. It denotes the custom format string used for the specified calculated field.

Keyboard interaction

The pivot table component followed the keyboard interaction guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Message component.

Press To do this
Tab / Shift + Tab To focus the close icon in the message.
Enter / Space Closes the focused close icon’s message.

Pivot Table

Press To do this
Tab Moves the cell focus right side. If no cells are focused, it moves to the next active element in the browser page.
Shift + Tab Moves the cell focus left side. If no cells are focused, it moves to the previous active element in the browser page.
DownArrow Moves the cell focus downwards. If the selection is enabled in the pivot table, then it will move downwards to select next row or column or individual cell.
UpArrow Moves the cell focus upwards. If the selection is enabled in the pivot table, then it will move upwards to select previous row or column or individual cell.
LeftArrow Moves the cell focus left side. If the selection is enabled in the pivot table, then it will move left side to select previous row or column or individual cell.
RightArrow Moves the cell focus right side. If the selection is enabled in the pivot table, then it will move right side to select next row or column or individual cell.
Shift + DownArrow Extends the cell selection downwards.
Shift + UpArrow Extends the cell selection selection upwards.
Shift + LeftArrow Extends the cell selection to the left side.
Shift + RightArrow Extends the cell selection to the right side.
Ctrl + A Selects all cells.
Esc Deselects all cells. If the current active element is a context menu, then the context menu popup will be closed.
Home Goes to the first cell in the current row.
End Goes to the last cell in the current row.
Ctrl + Home Goes to the first cell in the table.
Ctrl + End Goes to the last cell in the table.
Enter If the current cell is an expand/collapse cell, it performs expand/collapse operation (drill operation). If the current row/column header is in value sort state, it performs value sorting. If the current cell is in selection state, it moves to the next row, column or individual cell. If drill-through or editing is enabled in the pivot table, the drill-through dialog will be opened based on the selected value cell. If the current active element is a context menu popup, menu selection will be performed.
Shift + Enter If value sorting is enabled in the pivot table and the current cell is a header with respect to its value axis, it performs value sorting to either ascending or descending order. If the current cell is in selection state, it moves to the previous row, column or individual cell.
Ctrl + Enter If hyperlink is enabled in the current cell, it performs hyperlink selection.
Shift + F10 or Menu If context menu is enabled in the pivot table, the context menu popup will be opened in the current cell.

Field List

Press To do this
Shift + Ctrl + F If the popup field list is enabled in either the pivot table or the pivot chart, the field list dialog will be opened.
Tab Moves to the next active element in the field list. If no active elements present, it moves to the next active element in the browser page.
Shift + Tab Moves to the previous active element in the field list. If no active elements present, it moves to the previous active element in the browser page.
Shift + F If the current active element is a field’s button and if it has a filter icon, the filter dialog will open to perform filtering.
Shift + S If the current active element is a field’s button and if it has a sort icon, the sorting will be performed to the selected field.
Shift + E If the current active element is a calculated field’s button and if it has an edit icon, the calculated field dialog will be opened to perform editing the selected calculated field.
Enter Performs the selection operation of the current active element. If the current active element is a field’s button and it has a dropdown icon, the aggregation menu will open to perform calculations using aggregation options to the selected value field.
Delete If the current active element is a field’s button, the selected field will be removed from the current report.
DownArrow If the current active element is a tree node, it moves to the next node.
UpArrow If the current active element is a tree node, it moves to the previous node.
LeftArrow If the current active element is a tree node, it collapses the current node.
RightArrow If the current active element is a tree node, it expands the current node.
Home If the current active element is a tree node, it goes to the first node.
End If the current active element is a tree node, it goes to the last node.
Space If the current active element is a tree node or a checkbox element, it will be either checked or unchecked.
Esc or Escape Closes the popup field list dialog.

Grouping Bar

Press To do this
Tab Moves to the next active element (field’s button) in the grouping bar. If no active elements present, it moves to the next active element in the browser page.
Shift + Tab Moves to the previous active element (field’s button) in the grouping bar. If no active elements present, it moves to the previous active element in the browser page.
Shift + F If the current active element is a field’s button and if it has a filter icon, the filter dialog will be opened to perform filtering.
Shift + S If the current active element is a field’s button and if it has a sort icon, the sorting will be performed to the selected field.
Shift + E If the current active element is a calculated field’s button and if it has an edit icon, the calculated field dialog will be opened to perform editing the selected calculated field.
Enter Performs the selection operation of the current active element. If the current active element is a field’s button and if it has a dropdown icon, the aggregation menu will be opened to perform calculations using aggregation options to the selected value field.
Delete If the current active element is a field’s button, the selected field will be removed from the current report.
DownArrow If the current active element is a dropdown list, the next item will be selected.
UpArrow If the current active element is a dropdown list, the previous item will be selected.
Home If the current active element is a dropdown list, the first item will be selected.
End If the current active element is a dropdown list, the last item will be selected.
Alt + Down If the current active element is a dropdown list, the popup will be opened.
Alt + Down If the current active element is a dropdown list, the popup will be closed.
Esc or Escape Closes the dropdown list.

Filter Dialog

Press To do this
Shift + F If the current active element is a field’s button and if it has a filter icon in either the field list or grouping bar UI, the filter dialog will be opened to perform filtering.
Tab Moves to the next active element in the filter dialog. If no active elements present, it moves to the next active element in the browser page.
Shift + Tab Moves to the previous active element in the filter dialog. If no active elements present, it moves to the previous active element in the browser page.
DownArrow If the current active element is a tree node, it moves to the next node.
UpArrow If the current active element is a tree node, it moves to the previous node.
LeftArrow If the current active element is a tree node, it collapses the current node. If the current active element is a tab, it moves focus to the previous tab element.
RightArrow If the current active element is a tree node, it expands the current node. If the current active element is a tab, it moves focus to the next tab element.
Home If the current active element is a tree node, it goes to the first node.
End If the current active element is a tree node, it goes to the last node.
Space If the current active element is a tree node or a checkbox element, it will be either checked or unchecked.
Alt + Down If the current active element is a DropDownList or DatePicker or DateTimePicker, the popup will be opened.
Alt + Up If the current active element is a DropDownList or DatePicker or DateTimePicker, the popup will be closed.
Enter Performs the selection operation of the current active element. If the current active element is a tab, the current tab element will be selected. If the current active element is a tree node, the current node will be either checked or unchecked. If the current active element is DropDownList, the focus item will be selected, and the popup list will close when it is open. Otherwise, toggles the popup list.
Esc or Escape Closes the filter dialog.

Calculated Field Dialog

Press To do this
Shift + E If the current active element is a field’s button and if it has an edit icon in either the field list or grouping bar UI, the calculated field dialog will be opened to perform editing the selected calculated field.
Tab Moves to the next active element in the calculated field dialog. If no active elements present, it moves to the next active element in the browser page.
Shift + Tab Moves to the previous active element in the calculated field dialog. If no active elements present, it moves to the previous active element in the browser page.
DownArrow If the current active element is a tree node, it moves to the next node.
UpArrow If the current active element is a tree node, it moves to the previous node.
LeftArrow If the current active element is a tree node, it collapses the current node.
RightArrow If the current active element is a tree node, it expands the current node. If the current active element is a tree node and has a menu icon, the aggregation menu will be opened to select appropriate aggregation type to the selected field.
Home If the current active element is a tree node, it goes to the first node.
End If the current active element is a tree node, it goes to the last node.
Enter Performs the selection operation of the current active element. If the current active element is a tree node, it copies the selected field name/formula to the formula text area to perform calculations.
Esc or Escape Closes the calculated field dialog.

Formatting Dialog

Press To do this
Tab Moves to the next active element in the formatting dialog. If no active elements present, it moves to the next active element in the browser page.
Shift + Tab Moves to the previous active element in the formatting dialog. If no active elements present, it moves to the previous active element in the browser page.
DownArrow If the current active element is a DropDownList, the next item will be selected.
UpArrow If the current active element is a DropDownList, the previous item will be selected.
Home If the current active element is a DropDownList, the first item will be selected.
End If the current active element is a DropDownList, the last item will be selected.
Alt + Down If the current active element is a DropDownList or ColorPicker, the popup will be opened.
Alt + Down If the current active element is a DropDownList or ColorPicker, the popup will be closed.
Enter Performs the selection operation of the current active element.
Esc or Escape Closes the formatting dialog.

Toolbar

Press To do this
Tab Moves to the next active option in the toolbar. If no active elements present, it moves to the next active element in the browser page.
Shift + Tab Moves to the previous active option in the toolbar. If no active elements present, it moves to the previous active element in the browser page.
Enter Performs the selection operation of the current active element.

Drill-Through Dialog

Press To do this
Tab Moves to the next active element in the drill-through dialog. If the current active element is a Grid cell, it moves the cell focus to right side. If no active elements present, then it moves to the next active element in the browser page.
Shift + Tab Moves to the previous active element in the drill-through dialog. If the current active element is a Grid cell, it moves the cell focus to left side, If no active elements present, then it moves to the previous active element in the browser page.
DownArrow Moves the row/cell focus downwards.
UpArrow Moves the row/cell focus upwards.
LeftArrow Moves the cell focus left side.
RightArrow Moves the cell focus right side.
Home Goes to the first cell in the current row.
End Goes to the last cell in the current row.
Ctrl + Home Goes to the first cell in the table.
Ctrl + End Goes to the last cell in the table.
Enter Performs the selection operation of the current active element.
Esc or Escape If the cell is in selected state, the it deselects all rows/cells. If the row/cell is in edit state, it cancels the current entries in the row/cell. If the current active element is not a row/cell, it closes the drill-through dialog.
F2 Initiate editing a row/cell in the data grid.
Insert Adds a new row/cell in the data grid.
Delete Removes the selected row in the data grid.

Some commonly used applicable key combinations and their relative functionalities in all dialogs are listed below.

Press To do this
Tab Moves to the next active element in the dialog. If either no active elements present in the dialog or an overlay is not present in the dialog, it moves to the next active element in the browser page.
Shift + Tab Moves to the previous active element in the dialog. If either no active elements present in the dialog or an overlay is not present in the dialog, it moves to the previous active element in the browser page.
Space If the current active element is a tree node or a checkbox element, it will be either checked or unchecked.
Enter When the Dialog button or any input (except text area) is in focus state, when pressing the Enter key, the click event associated with the primary button or button will be triggered. The Enter key will not be worked, when the dialog content contains any text area with initial focus.
Esc or Escape Closes the dialog.

Ensuring accessibility

The pivot table component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.

The accessibility compliance of the pivot table component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the pivot table component with accessibility tools.

import {
  FieldList, Inject, PivotViewComponent, CalculatedField, Toolbar, GroupingBar,
  ConditionalFormatting, NumberFormatting, PDFExport, ExcelExport, Grouping,
  FieldList, Inject, PivotViewComponent, CalculatedField, Toolbar,
  ConditionalFormatting, NumberFormatting, PDFExport, ExcelExport
} from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as data from './datasource.json';

function App() {
  let pivotData = data.pivotData;
  var dataSourceSettings = {
    dataSource: pivotData,
    expandAll: true,
    enableSorting: true,
    allowLabelFilter: true,
    allowValueFilter: true,
    sortSettings: [{ name: 'company', order: 'Descending' }],
    formatSettings: [{ name: 'balance', format: 'C' }, { name: 'date', format: 'dd/MM/yyyy-hh:mm', type: 'date' }],
    drilledMembers: [{ name: 'product', items: ['Bike', 'Car'] }, { name: 'gender', items: ['male'] }],
    filterSettings: [
      { name: 'date', type: 'Date', condition: 'Between', value1: new Date('02/16/2000'), value2: new Date('02/16/2002') },
      { name: 'age', type: 'Number', condition: 'Between', value1: '25', value2: '35' },
      { name: 'eyeColor', type: 'Exclude', items: ['blue'] }
    ],
    rows: [{ name: 'state' }, { name: 'eyeColor' }],
    columns: [{ name: 'gender', caption: 'Population' }, { name: 'isActive' }],
    values: [{ name: 'balance' }, { name: 'quantity' }],
    filters: [],
    conditionalFormatSettings: [
      {
        measure: 'balance',
        value1: 100000,
        conditions: 'LessThan',
        style: {
          backgroundColor: '#80cbc4',
          color: 'black',
          fontFamily: 'Tahoma',
          fontSize: '12px'
        }
      },
      {
        value1: 10,
        value2: 20,
        measure: 'quantity',
        conditions: 'Between',
        style: {
          backgroundColor: '#f48fb1',
          color: 'black',
          fontFamily: 'Tahoma',
          fontSize: '12px'
        }
      }
    ]
  }
  var pivotObj;
  var toolbarOptions = [
    'New', 'Save', 'SaveAs', 'Rename', 'Remove', 'Load', 'Grid', 'Chart', 'Export', 'SubTotal', 'GrandTotal',
    'ConditionalFormatting', 'NumberFormatting', 'FieldList'
  ];
  var groupingSettings = {
    showFieldsPanel: true
  };
  var chartSettings = {
    value: 'Amount', enableExport: true, chartSeries: {
      type: 'Column', animation: { enable: false }
    }, enableMultipleAxis: false
  };
  var editSettings = {
    allowAdding: true, allowDeleting: true, allowEditing: true, mode: 'Normal'
  };
  var gridSettings = {
    columnWidth: 140,
    contextMenuItems: [
      'Aggregate', 'CalculatedField', 'Drillthrough', 'Excel Export', 'Pdf Export', 'Csv Export',
      'Expand', 'Collapse', 'Sort Ascending', 'Sort Descending'
    ]
  }
  function saveReport(args) {
    var reports = [];
    var isSaved = false;
    if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") {
      reports = JSON.parse(localStorage.pivotviewReports);
    }
    if (args.report && args.reportName && args.reportName !== '' && args.reportName !== 'Sample Report') {
      reports.map(function (item) {
        if (args.reportName === item.reportName) {
          item.report = args.report; isSaved = true;
        }
      });
      if (!isSaved) {
        reports.push(args);
      }
      localStorage.pivotviewReports = JSON.stringify(reports);
    }
  }
  function fetchReport(args) {
    var reportCollection = [];
    var reeportList = [];
    if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") {
      reportCollection = JSON.parse(localStorage.pivotviewReports);
    }
    reportCollection.map(function (item) { reeportList.push(item.reportName); });
    args.reportName = reeportList;
  }
  function loadReport(args) {
    var reportCollection = [];
    if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") {
      reportCollection = JSON.parse(localStorage.pivotviewReports);
    }
    reportCollection.map(function (item) {
      if (args.reportName === item.reportName) {
        args.report = item.report;
      }
    });
    if (args.report) {
      pivotObj.dataSourceSettings = JSON.parse(args.report).dataSourceSettings;
    }
  }
  function removeReport(args) {
    var reportCollection= [];
    if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") {
      reportCollection = JSON.parse(localStorage.pivotviewReports);
    }
    for (var i = 0; i < reportCollection.length; i++) {
      if (reportCollection[i].reportName === args.reportName) {
        reportCollection.splice(i, 1);
      }
    }
    if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") {
      localStorage.pivotviewReports = JSON.stringify(reportCollection);
    }
  }
  function renameReport(args) {
    var reportCollection= [];
    if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") {
      reportCollection = JSON.parse(localStorage.pivotviewReports);
    }
    if (args.isReportExists) {
      for (var i = 0; i < reportCollection.length; i++) {
        if (reportCollection[i].reportName === args.rename) {
          reportCollection.splice(i, 1);
        }
      }
    }
    reportCollection.map(function (item) {
      if (args.reportName === item.reportName) {
        item.reportName = args.rename;
      }
    });
    if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") {
      localStorage.pivotviewReports = JSON.stringify(reportCollection);
    }
  }
  function newReport() {
    pivotObj.setProperties({ dataSource: { columns: [], rows: [], values: [], filters: [] } }, false);
  }
  function beforeToolbarRender(args) {
    args.customToolbar.splice(6, 0, {
      type: 'Separator'
    });
    args.customToolbar.splice(9, 0, {
      type: 'Separator'
    });
  }

  return (<PivotViewComponent id='PivotView' ref={d => pivotObj = d} dataSourceSettings={dataSourceSettings} width={'100%'}
      height={450} showFieldList={true} gridSettings={gridSettings} allowExcelExport={true}
      allowConditionalFormatting={true} allowNumberFormatting={true} allowPdfExport={true} showToolbar={true}
      allowCalculatedField={true} displayOption= toolbar={toolbarOptions} newReport={newReport.bind(this)}
      renameReport={renameReport.bind(this)} removeReport={removeReport.bind(this)} loadReport={loadReport.bind(this)}
      fetchReport={fetchReport.bind(this)} saveReport={saveReport.bind(this)} toolbarRender={beforeToolbarRender.bind(this)}
      showGroupingBar={true} groupingBarSettings={groupingSettings} chartSettings={chartSettings} editSettings={editSettings}
      allowGrouping={true} allowDeferLayoutUpdate={true}>
      <Inject services={[
        FieldList, CalculatedField, Toolbar, PDFExport, ExcelExport, ConditionalFormatting, NumberFormatting, GroupingBar,
        Grouping
      ]} />
    </PivotViewComponent>
  );

  function pivotData1() {
    var pivotData = [
      {
        "_id": "5a940692c2d185d9fde50e5e",
        "index": 0,
        "guid": "810a1191-81bd-4c18-ac73-d16ad3fc80eb",
        "isActive": false,
        "balance": 2430.87,
        "advance": 7658,
        "quantity": 11,

        "age": 21,
        "eyeColor": "blue",
        "name": "Skinner Ward",
        "gender": "male",
        "company": "GROK",
        "email": "skinnerward@grok.com",
        "phone": "+1 (931) 600-3042",
        "date": "Wed Feb 16 2000 15:01:01 GMT+0530 (India Standard Time)",
        "product": "Flight",
        "state": "New Jercy",
        "pno": "FEDD2340"
      },
      {
        "_id": "5a940692c5752f1ed81bbb3d",
        "index": 1,
        "guid": "41c9986b-ccef-459e-a22d-5458bbdca9c7",
        "isActive": true,
        "balance": 3192.7,
        "advance": 6124,
        "quantity": 15,

        "age": 27,
        "eyeColor": "brown",
        "name": "Gwen Dixon",
        "gender": "female",
        "company": "ICOLOGY",
        "email": "gwendixon@icology.com",
        "phone": "+1 (951) 589-2187",
        "date": "Sun Feb 10 1991 20:28:59 GMT+0530 (India Standard Time)",
        "product": "Jet",
        "state": "Vetaikan",
        "pno": "ERTS4512"
      },
      {
        "_id": "5a9406924c0e7f4c98a82ca7",
        "index": 2,
        "guid": "50d2bf16-9092-4202-84f6-e892721fe5a5",
        "isActive": true,
        "balance": 1663.84,
        "advance": 7631,
        "quantity": 14,

        "age": 28,
        "eyeColor": "green",
        "name": "Deena Gillespie",
        "gender": "female",
        "company": "OVERPLEX",
        "email": "deenagillespie@overplex.com",
        "phone": "+1 (826) 588-3430",
        "date": "Thu Mar 18 1993 17:07:48 GMT+0530 (India Standard Time)",
        "product": "Car",
        "state": "New Jercy",
        "pno": "ERTS4512"
      },
      {
        "_id": "5a940692dd9db638eee09828",
        "index": 3,
        "guid": "b8bdc65e-4338-440f-a731-810186ce0b3a",
        "isActive": true,
        "balance": 1601.82,
        "advance": 6519,
        "quantity": 18,

        "age": 33,
        "eyeColor": "green",
        "name": "Susanne Peterson",
        "gender": "female",
        "company": "KROG",
        "email": "susannepeterson@krog.com",
        "phone": "+1 (868) 499-3292",
        "date": "Sat Feb 09 2002 04:28:45 GMT+0530 (India Standard Time)",
        "product": "Jet",
        "state": "Vetaikan",
        "pno": "CCOP1239"
      },
      {
        "_id": "5a9406926f9971a87eae51af",
        "index": 4,
        "guid": "3f4c79ec-a227-4210-940f-162ca0c293de",
        "isActive": false,
        "balance": 1855.77,
        "advance": 7333,
        "quantity": 20,

        "age": 33,
        "eyeColor": "green",
        "name": "Stokes Hicks",
        "gender": "male",
        "company": "SIGNITY",
        "email": "stokeshicks@signity.com",
        "phone": "+1 (927) 585-2980",
        "date": "Fri Mar 12 2004 11:08:06 GMT+0530 (India Standard Time)",
        "product": "Van",
        "state": "Tamilnadu",
        "pno": "MEWD9812"
      },
      {
        "_id": "5a940692bcbbcdde08fcf7ec",
        "index": 5,
        "guid": "1d0ee387-14d4-403e-9a0c-3a8514a64281",
        "isActive": true,
        "balance": 1372.23,
        "advance": 5668,
        "quantity": 16,

        "age": 39,
        "eyeColor": "green",
        "name": "Sandoval Nicholson",
        "gender": "male",
        "company": "IDEALIS",
        "email": "sandovalnicholson@idealis.com",
        "phone": "+1 (951) 438-3539",
        "date": "Sat Aug 30 1975 22:02:15 GMT+0530 (India Standard Time)",
        "product": "Bike",
        "state": "Tamilnadu",
        "pno": "CCOP1239"
      },
      {
        "_id": "5a940692ff31a6e1cdd10487",
        "index": 6,
        "guid": "58417d45-f279-4e21-ba61-16943d0f11c1",
        "isActive": false,
        "balance": 2008.28,
        "advance": 7107,
        "quantity": 14,

        "age": 20,
        "eyeColor": "brown",
        "name": "Blake Thornton",
        "gender": "male",
        "company": "IMMUNICS",
        "email": "blakethornton@immunics.com",
        "phone": "+1 (852) 462-3571",
        "date": "Mon Oct 03 2005 05:16:53 GMT+0530 (India Standard Time)",
        "product": "Jet",
        "state": "New Jercy",
        "pno": "CCOP1239"
      },
      {
        "_id": "5a9406928f2f2598c7ac7809",
        "index": 7,
        "guid": "d16299e3-e243-4e57-90fb-52446c4c0275",
        "isActive": false,
        "balance": 2052.58,
        "advance": 7431,
        "quantity": 20,

        "age": 22,
        "eyeColor": "blue",
        "name": "Dillard Sharpe",
        "gender": "male",
        "company": "INEAR",
        "email": "dillardsharpe@inear.com",
        "phone": "+1 (963) 473-2308",
        "date": "Thu May 25 1978 04:57:00 GMT+0530 (India Standard Time)",
        "product": "Jet",
        "state": "Rajkot",
        "pno": "ERTS4512"
      },
      {
        "_id": "5a940692195f82585af58362",
        "index": 8,
        "guid": "a8662b61-9d66-4b99-8a47-c0375ffff4ce",
        "isActive": true,
        "balance": 2784.64,
        "advance": 7948,
        "quantity": 18,

        "age": 22,
        "eyeColor": "blue",
        "name": "Davidson Brewer",
        "gender": "male",
        "company": "PROXSOFT",
        "email": "davidsonbrewer@proxsoft.com",
        "phone": "+1 (958) 592-3948",
        "date": "Wed Jul 14 1982 19:49:29 GMT+0530 (India Standard Time)",
        "product": "Van",
        "state": "Vetaikan",
        "pno": "FEDD2340"
      }
    ]
    return pivotData;
  }
};
export default App;
import {
  FieldList, IDataOptions, Inject, PivotViewComponent, CalculatedField, Toolbar, RemoveReportArgs, ToolbarArgs,
  ConditionalFormatting, IDataSet, RenameReportArgs, SaveReportArgs, FetchReportArgs,
  LoadReportArgs, NumberFormatting, PDFExport, ExcelExport, GroupingBar, GroupingBarSettings,
  CellEditSettings, Grouping
} from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import { pivotData } from './datasource';
import { ChartSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/chartSettings';
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';

function App() {
  let dataSourceSettings: IDataOptions = {
    dataSource: pivotData as IDataSet[],
    expandAll: true,
    enableSorting: true,
    allowLabelFilter: true,
    allowValueFilter: true,
    sortSettings: [{ name: 'company', order: 'Descending' }],
    formatSettings: [{ name: 'balance', format: 'C' }, { name: 'date', format: 'dd/MM/yyyy-hh:mm', type: 'date' }],
    drilledMembers: [{ name: 'product', items: ['Bike', 'Car'] }, { name: 'gender', items: ['male'] }],
    filterSettings: [
      { name: 'date', type: 'Date', condition: 'Between', value1: new Date('02/16/2000'), value2: new Date('02/16/2002') },
      { name: 'age', type: 'Number', condition: 'Between', value1: '25', value2: '35' },
      { name: 'eyeColor', type: 'Exclude', items: ['blue'] }
    ],
    rows: [{ name: 'state' }, { name: 'eyeColor' }],
    columns: [{ name: 'gender', caption: 'Population' }, { name: 'isActive' }],
    values: [{ name: 'balance' }, { name: 'quantity' }],
    filters: [],
    conditionalFormatSettings: [
      {
        measure: 'balance',
        value1: 100000,
        conditions: 'LessThan',
        style: {
          backgroundColor: '#80cbc4',
          color: 'black',
          fontFamily: 'Tahoma',
          fontSize: '12px'
        }
      },
      {
        value1: 10,
        value2: 20,
        measure: 'quantity',
        conditions: 'Between',
        style: {
          backgroundColor: '#f48fb1',
          color: 'black',
          fontFamily: 'Tahoma',
          fontSize: '12px'
        }
      }
    ]
  }
  let pivotObj: PivotViewComponent;
  let toolbarOptions: any = ['New', 'Save', 'SaveAs', 'Rename', 'Remove', 'Load',
    'Grid', 'Chart', 'Export', 'SubTotal', 'GrandTotal', 'ConditionalFormatting', 'NumberFormatting', 'FieldList'];
  let groupingSettings: GroupingBarSettings = {
    showFieldsPanel: true
  } as GroupingBarSettings;
  let chartSettings: ChartSettings = {
    value: 'Amount', enableExport: true, chartSeries: {
      type: 'Column', animation: { enable: false }
    }, enableMultipleAxis: false,
  } as ChartSettings;
  let editSettings: CellEditSettings = {
    allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal'
  } as CellEditSettings
  let gridSettings: GridSettings = {
    columnWidth: 140,
    contextMenuItems: [
      'Aggregate', 'CalculatedField', 'Drillthrough', 'Excel Export', 'Pdf Export', 'Csv Export', 'Expand', 'Collapse', 'Sort Ascending', 'Sort Descending'
    ]
  } as GridSettings;
  function saveReport(args: any): void {
    let reports: SaveReportArgs[] = [];
    let isSaved: boolean = false;
    if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") {
      reports = JSON.parse(localStorage.pivotviewReports);
    }
    if (args.report && args.reportName && args.reportName !== '' && args.reportName !== 'Sample Report') {
      reports.map(function (item: any): any {
        if (args.reportName === item.reportName) {
          item.report = args.report; isSaved = true;
        }
      });
      if (!isSaved) {
        reports.push(args);
      }
      localStorage.pivotviewReports = JSON.stringify(reports);
    }
  }
  function fetchReport(args: FetchReportArgs): void {
    let reportCollection: string[] = [];
    let reeportList: string[] = [];
    if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") {
      reportCollection = JSON.parse(localStorage.pivotviewReports);
    }
    reportCollection.map(function (item: any): void { reeportList.push(item.reportName); });
    args.reportName = reeportList;
  }
  function loadReport(args: LoadReportArgs): void {
    let reportCollection: string[] = [];
    if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") {
      reportCollection = JSON.parse(localStorage.pivotviewReports);
    }
    reportCollection.map(function (item: any): void {
      if (args.reportName === item.reportName) {
        args.report = item.report;
      }
    });
    if (args.report) {
      pivotObj.dataSourceSettings = JSON.parse(args.report).dataSourceSettings;
    }
  }
  function removeReport(args: RemoveReportArgs): void {
    let reportCollection: any[] = [];
    if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") {
      reportCollection = JSON.parse(localStorage.pivotviewReports);
    }
    for (let i: number = 0; i < reportCollection.length; i++) {
      if (reportCollection[i].reportName === args.reportName) {
        reportCollection.splice(i, 1);
      }
    }
    if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") {
      localStorage.pivotviewReports = JSON.stringify(reportCollection);
    }
  }
  function renameReport(args: RenameReportArgs): void {
    let reportCollection: any[] = [];
    if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") {
      reportCollection = JSON.parse(localStorage.pivotviewReports);
    }
    if (args.isReportExists) {
      for (let i: number = 0; i < reportCollection.length; i++) {
        if (reportCollection[i].reportName === args.rename) {
          reportCollection.splice(i, 1);
        }
      }
    }
    reportCollection.map(function (item: any): any {
      if (args.reportName === item.reportName) {
        item.reportName = args.rename;
      }
    });
    if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") {
      localStorage.pivotviewReports = JSON.stringify(reportCollection);
    }
  }
  function newReport(): void {
    pivotObj.setProperties({ dataSource: { columns: [], rows: [], values: [], filters: [] } }, false);
  }
  function beforeToolbarRender(args: any): void {
    args.customToolbar.splice(6, 0, {
      type: 'Separator'
    });
    args.customToolbar.splice(9, 0, {
      type: 'Separator'
    });
  }

  return (<PivotViewComponent id='PivotView' ref={ (d: PivotViewComponent) => pivotObj = d } dataSourceSettings={dataSourceSettings} width={'100%'}
    height={350} showFieldList={true} gridSettings={gridSettings} allowExcelExport={true}
    allowConditionalFormatting={true} allowNumberFormatting={true} allowPdfExport={true} showToolbar={true}
    allowCalculatedField={true} displayOption= toolbar={toolbarOptions} newReport={newReport.bind(this)}
    renameReport={renameReport.bind(this)} removeReport={removeReport.bind(this)} loadReport={loadReport.bind(this)}
    fetchReport={fetchReport.bind(this)} saveReport={saveReport.bind(this)} toolbarRender={beforeToolbarRender.bind(this)}
    showGroupingBar={true} groupingBarSettings={groupingSettings} chartSettings={chartSettings} allowGrouping={true}
    allowDeferLayoutUpdate={true} editSettings={editSettings}><Inject services={[
      FieldList, CalculatedField, Toolbar, PDFExport, ExcelExport, ConditionalFormatting, NumberFormatting, GroupingBar, Grouping
    ]} /></PivotViewComponent>
  );

};
export default App;

See Also