PivotGrid

The dxPivotGrid is a widget that allows you to display and analyze multi-dimensional data from a local storage or an OLAP cube.

PivotGrid interactive configuration
Copy Code
Copy to Codepen
$("#pivotgrid").dxPivotGrid({
});

You can create the dxPivotGrid widget using one of the following approaches.

  • jQuery
    Use the dxPivotGrid jQuery plug-in.

    HTML
    <div id="pivotGridContainer"></div>
    JavaScript
    $("#pivotGridContainer").dxPivotGrid({
        dataSource: {
            store: orders,
            fields: [
                { area: 'column', dataField: 'OrderDate', dataType: 'date', groupInterval: 'year' },
                { area: 'column', dataField: 'OrderDate', dataType: 'date', groupInterval: 'quarter' },
                { area: 'column', dataField: 'OrderDate', dataType: 'date', groupInterval: 'month' },
                { area: 'row', dataField: 'ShipCountry' },
                { area: 'row', dataField: 'ShipCity' },
                { area: 'row', dataField: 'ShipName' },
                { area: 'data', summaryType: 'count' }
            ]
        }
    });
  • Knockout
    Add a div element and apply the dxPivotGrid binding to this element.

    HTML
    <div data-bind="dxPivotGrid: {
        dataSource: {
            store: orders,
            fields: [
                { area: 'column', dataField: 'OrderDate', dataType: 'date', groupInterval: 'year' },
                { area: 'column', dataField: 'OrderDate', dataType: 'date', groupInterval: 'quarter' },
                { area: 'column', dataField: 'OrderDate', dataType: 'date', groupInterval: 'month' },
                { area: 'row', dataField: 'ShipCountry' },
                { area: 'row', dataField: 'ShipCity' },
                { area: 'row', dataField: 'ShipName' },
                { area: 'data', summaryType: 'count' }
            ]
        }
    }"></div>
  • AngularJS
    Add a div element and apply the dx-pivot-grid directive to this element.

    HTML
    <div dx-pivot-grid="{
        dataSource: {
            store: orders,
            fields: [
                { area: 'column', dataField: 'OrderDate', dataType: 'date', groupInterval: 'year' },
                { area: 'column', dataField: 'OrderDate', dataType: 'date', groupInterval: 'quarter' },
                { area: 'column', dataField: 'OrderDate', dataType: 'date', groupInterval: 'month' },
                { area: 'row', dataField: 'ShipCountry' },
                { area: 'row', dataField: 'ShipCity' },
                { area: 'row', dataField: 'ShipName' },
                { area: 'data', summaryType: 'count' }
            ]
        }
    }"></div>

Note that DevExtreme widgets require you to link the jQuery and Globalize libraries to your application. If you use the Knockout or AngularJS approach, the Knockout or AngularJS library is also required. For detailed information on linking these libraries to your project, refer to the Installation article.

To provide data for the dxPivotGrid widget, specify a data source. dxPivotGrid accepts the PivotGridDataSource data source only. You can pass its configuration to the dataSource field without creating the separate PivotGridDataSource object as shown above.

View Demo

Watch Video

Start Tutorial

Configuration

This section describes the configuration options of the dxPivotGrid widget.

Methods

This section describes the methods that can be used to manipulate the dxPivotGrid widget.

Events

This section describes events fired by this widget.

Summary Cell

An object exposing methods that manipulate a summary cell and provide access to its neighboring cells.

Pivot Grid Cell

An object containing information about the pivot grid cell.