App.js

import React from 'react';
import PivotGrid, { FieldChooser } from 'devextreme-react/pivot-grid';
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
import XmlaStore from 'devextreme/ui/pivot_grid/xmla_store';

const App = () => (
  <>
    <div className="long-title">
      <h2>Sales Statistics</h2>
    </div>
    <PivotGrid
      dataSource={dataSource}
      allowSortingBySummary={true}
      allowSorting={true}
      allowFiltering={true}
      allowExpandAll={true}
      height={570}
      showBorders={true}
    >
      <FieldChooser
        enabled={true}
        allowSearch={true}
      />
    </PivotGrid>
  </>
);
const dataSource = new PivotGridDataSource({
  fields: [
    { dataField: '[Product].[Category]', area: 'row' },
    {
      dataField: '[Product].[Subcategory]',
      area: 'row',
      headerFilter: {
        search: {
          enabled: true,
        },
      },
    },
    { dataField: '[Ship Date].[Calendar Year]', area: 'column' },
    { dataField: '[Ship Date].[Month of Year]', area: 'column' },
    { dataField: '[Measures].[Reseller Freight Cost]', area: 'data', format: 'currency' },
  ],
  store: new XmlaStore({
    url: 'https://demos.devexpress.com/Services/OLAP/msmdpump.dll',
    catalog: 'Adventure Works DW Standard Edition 2026',
    cube: 'Adventure Works',
  }),
});
export default App;