DevExtreme React - OLAP Cube

NOTE
This article describes how to bind a DevExtreme UI component to an OLAP cube in jQuery, Angular, Vue, and React. For information on data binding in ASP.NET MVC Controls, refer to docs.devexpress.com.

An OLAP cube is a multi-dimensional dataset that allows data mining and analysis. DevExtreme provides the PivotGrid UI component to display data from an OLAP cube.

To access an OLAP cube, implement the XmlaStore: specify the OLAP server's url, the catalog that contains the OLAP cube that you access, and the cube.

Wrap the XmlaStore into a PivotGridDataSource. This component enables you to group, sort, filter, and perform other data shaping operations on the store's data. Bind the PivotGrid to this PivotGridDataSource:

jQuery
index.js
$(function() {
    var adventureWorksStore = new DevExpress.data.XmlaStore({
        url: "https://my-web-srv01/OLAP/msmdpump.dll",
        catalog: "AdventureWorksDW2012",
        cube: "Adventure Works"
    });

    var adventureWorksDataSource = new DevExpress.data.PivotGridDataSource({
        store: adventureWorksStore
    });

    $("#pivotGridContainer").dxPivotGrid({
        dataSource: adventureWorksDataSource
    });
});
Angular
app.component.ts
app.module.ts
app.component.html
import { Component } from '@angular/core';
import XmlaStore from 'devextreme/ui/pivot_grid/xmla_store';
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    adventureWorksDataSource: PivotGridDataSource;

    constructor() {
        const adventureWorksStore = new XmlaStore({
            url: 'https://my-web-srv01/OLAP/msmdpump.dll',
            catalog: 'AdventureWorksDW2012',
            cube: 'Adventure Works'
        });

        this.adventureWorksDataSource = new PivotGridDataSource({
            store: adventureWorksStore
        });
    }
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxPivotGridModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxPivotGridModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
<dx-pivot-grid
    [dataSource]="adventureWorksDataSource">
</dx-pivot-grid>
Vue
App.vue
<template>
    <DxPivotGrid
        :data-source="adventureWorksDataSource"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxPivotGrid from 'devextreme-vue/pivot-grid';
import XmlaStore from 'devextreme/ui/pivot_grid/xmla_store';
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';

const adventureWorksStore = new XmlaStore({
    url: 'https://my-web-srv01/OLAP/msmdpump.dll',
    catalog: 'AdventureWorksDW2012',
    cube: 'Adventure Works'
});

const adventureWorksDataSource = new PivotGridDataSource({
    store: adventureWorksStore
});

export default {
    components: {
        DxPivotGrid
    },
    data() {
        return {
            adventureWorksDataSource
        }
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import PivotGrid from 'devextreme-react/pivot-grid';
import XmlaStore from 'devextreme/ui/pivot_grid/xmla_store';
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';

const adventureWorksStore = new XmlaStore({
    url: 'https://my-web-srv01/OLAP/msmdpump.dll',
    catalog: 'AdventureWorksDW2012',
    cube: 'Adventure Works'
});

const adventureWorksDataSource = new PivotGridDataSource({
    store: adventureWorksStore
});

class App extends React.Component {
    render() {
        return (
            <PivotGrid
                dataSource={adventureWorksDataSource}
            />
        );
    }
}
export default App;