Accessibility in React Pivot Table

The pivot table component follows accessibility guidelines, including ADA, Section 508, WCAG 2.2, and WAI-ARIA 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
Section 508 Support
Screen Reader Support
Right-To-Left Support
Color Contrast
Mobile Device Support
Keyboard Navigation Support
Accessibility Checker Validation
Axe-core Accessibility Validation

- All features of the component meet the requirement.

- Some features of the component do not meet the requirement.

- 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 content. 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. The region must have an accessible name (for example, via aria-label) to be exposed as a landmark.
role=button	Indicates a clickable element. 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.
role=table	Indicates a table-like structure. This attribute is added to each conditional formatting style container element to denote it as a table.
role=rowgroup	Indicates a group of rows. This attribute is added to the container element that appears inside the number formatting popup to indicate it as a row group.
aria-disabled	The buttons within the dialog popups, such as field list, calculated field and member editor, are disabled based on their usability. To indicate the disabled state, this attribute is added with the value 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.

The Syncfusion^® React Pivot Table internally uses the Syncfusion Grid component, which follows a two‑table structure for header and content rendering. This improves screen reader interpretation but may trigger warnings in automated accessibility tools. These issues occur due to the underlying grid rendering. These warnings do not necessarily affect actual assistive-technology usability. The following categories of warnings have been observed in axe-core and accessibility-checker reports:

• aria-required-children (axe-core): Triggered when the grid renders certain feature elements (for example, textarea or toolbar content). It may be reported when toolbar or grouping features are enabled.

• color-contrast (axe-core): Triggered when the toolbar search item or custom styles reduce text contrast below WCAG thresholds.

• Explicit ARIA ‘role’ on <tr>, <th>, and <td> inside role="grid" (accessibility-checker): Per the ARIA in HTML specification, these native elements should not carry an explicit ARIA role when nested inside role="grid".

• button with descendant rowgroup (accessibility-checker): An element with role="button" should not contain descendants with role="rowgroup"; the role is ignored by browsers.

• Content not within a landmark element (axe-core): Major page regions should be wrapped in landmark roles (for example, region with an accessible name).

• Multiple elements with role="search" without unique labels (axe-core): Each search landmark must have a unique accessible name.

• Interactive component with role="grid" missing an accessible name (axe-core): The grid must have a programmatically associated name (for example, via aria-label or aria-labelledby).

• rowgroup not contained in a grid, table, or treegrid (accessibility-checker): A rowgroup must be owned by an element with one of these parent roles.

Keyboard interaction

The pivot table component follows 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 pivot table component.

Pivot Table

Prerequisites: Cell-selection shortcuts (Ctrl + A, Esc, Shift + Arrow) require allowSelection to be enabled. Drill-through requires drill-through to be enabled. Hyperlink activation requires hyperlinkSettings to be configured. The context-menu shortcut requires the context menu to be enabled. By default, the WAI-ARIA grid pattern uses Tab to leave the grid and arrow keys for in-grid navigation; the Syncfusion Pivot Table extends this behavior so Tab and Shift + Tab also move between cells when no cells are focused.

Press	To do this
Tab	Moves the cell focus to the right. If no cells are focused, it moves to the next active element in the browser page.
Shift + Tab	Moves the cell focus to the left. If no cells are focused, it moves to the previous active element in the browser page.
DownArrow	Moves the cell focus downwards. If selection is enabled, it moves to the next row, column, or individual cell.
UpArrow	Moves the cell focus upwards. If selection is enabled, it moves to the previous row, column, or individual cell.
LeftArrow	Moves the cell focus to the left. If selection is enabled, it moves to the previous row, column, or individual cell.
RightArrow	Moves the cell focus to the right. If selection is enabled, it moves to the next row, column, or individual cell.
Shift + DownArrow	Extends the cell selection downwards.
Shift + UpArrow	Extends the cell 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, 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	Performs the action appropriate to the current cell: drill (expand/collapse) on header cells, value sort on a value-axis header, drill-through on a value cell (if enabled), or context-menu activation.
Shift + Enter	Performs value sorting (if enabled) on a value-axis header; otherwise moves to the previous row, column, or individual cell when a cell is in selection state.
Ctrl + Enter	If hyperlink is enabled in the current cell, it performs hyperlink selection.
Shift + F10 or Menu	If the context menu is enabled, the context menu popup will be opened in the current cell.

Field List

Prerequisites: The shortcuts Shift + F, Shift + S, and Shift + E only take effect when the relevant icon (filter, sort, or edit) is visible on the active field’s button. The Delete shortcut removes a field from the report; it does not delete the underlying data.

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 are 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 are 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

Prerequisites: The shortcuts Shift + F, Shift + S, and Shift + E only take effect when the relevant icon (filter, sort, or edit) is visible on the active field’s button. Arrow-key navigation inside a dropdown list only applies when the active element is an open dropdown.

Press	To do this
Tab	Moves to the next active element (field’s button) in the grouping bar. If no active elements are 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 are 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 + Up	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 + Up	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, then 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.

Common keyboard combinations for dialogs

The following shortcuts apply to all Pivot Table dialogs (filter, calculated field, formatting, drill-through, and so on).

Press	To do this
Tab	Moves to the next active element in the dialog. If either no active elements are 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 are 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 a dialog button or any input (other than a text area) is in focus, the click event associated with the primary button or button is triggered. The Enter key has no effect when the dialog content contains a 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 following sample demonstrates the accessibility compliance of the Pivot Table. Open the sample in a new window to evaluate the component with your own accessibility tools.

App.jsx

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": "[email protected]",
        "phone": "[phone]",
        "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": "[email protected]",
        "phone": "[phone]",
        "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": "[email protected]",
        "phone": "[phone]",
        "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": "[email protected]",
        "phone": "[phone]",
        "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": "[email protected]",
        "phone": "[phone]",
        "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": "[email protected]",
        "phone": "[phone]",
        "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": "[email protected]",
        "phone": "[phone]",
        "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": "[email protected]",
        "phone": "[phone]",
        "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": "[email protected]",
        "phone": "[phone]",
        "date": "Wed Jul 14 1982 19:49:29 GMT+0530 (India Standard Time)",
        "product": "Van",
        "state": "Vetaikan",
        "pno": "FEDD2340"
      }
    ]
    return pivotData;
  }
};
export default App;

App.tsx

import {
  FieldList, 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 { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
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: DataSourceSettingsModel = {
    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

• Accessibility in Syncfusion^® React components — Cross-component accessibility guidance that applies to all Syncfusion React controls.
• Globalization and localization in React Pivot Table — Configure RTL, culture, and localization settings, which affect accessibility for non-English users. (last verified: August 2026)