DevExtreme v24.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

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.

To give you the ability to edit code on the fly, the demo uses SystemJS. For this reason, launching the demo takes some time. We strongly recommend that you do not use this approach in real projects.
Backend API

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.