React Pivot Grid - OLAP Data Source

The PivotGrid component supports OLAP services (Microsoft SQL Server Analysis Services). This demo shows how to use a remote OLAP cube as the PivotGrid's data source.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

TS JS

Backend API

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 = () => ( <React.Fragment> <div className="long-title"> <h3>Sales Statistics</h3> </div> <PivotGrid dataSource={dataSource} allowSortingBySummary={true} allowSorting={true} allowFiltering={true} allowExpandAll={true} height={570} showBorders={true} > <FieldChooser enabled={true} allowSearch={true} /> </PivotGrid> </React.Fragment> ); 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', cube: 'Adventure Works', }), }); export default App;

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 = () => ( <React.Fragment> <div className="long-title"> <h3>Sales Statistics</h3> </div> <PivotGrid dataSource={dataSource} allowSortingBySummary={true} allowSorting={true} allowFiltering={true} allowExpandAll={true} height={570} showBorders={true} > <FieldChooser enabled={true} allowSearch={true} /> </PivotGrid> </React.Fragment> ); 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', cube: 'Adventure Works', }), }); export default App;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.2.3/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>

.long-title h3 { font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-weight: 200; font-size: 28px; text-align: center; margin-bottom: 20px; }

Configure the Store

Use XmlaStore to connect your component to an OLAP storage. Specify the following properties to configure it:

url
The OLAP server's URL.
catalog
The initial catalog that contains the OLAP cube.
cube
The name of the OLAP cube to use from the catalog.

Pass the XmlaStore to the store property of the PivotGridDataSource component. Assign the component to the PivotGrid's dataSource property.

Configure PivotGrid Fields

To display data in the PivotGrid, assign an array to the fields[] property. Each object in this array configures a single pivot grid field. Assign a field name to the dataField property to populate the pivot grid field with data.

You can distribute fields between four different areas: row, column, filter, and data. To specify the area, set the area property. Add measures to the "data" area and dimensions to other areas. Fields that do not belong to any area are displayed in the field chooser.