DevExtreme Vue - PivotGridDataSource API

The PivotGridDataSource is an object that provides an API for processing data from an underlying store. This object is used in the PivotGrid UI component.

import PivotGridDataSource from "devextreme-vue/data-source"

jQuery

JavaScript

$(function() {
    var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
        store: {
            // ...
            // Underlying store is configured here
            // ...
        },
        fields: [{
            area: "column",
            dataField: "OrderDate",
            dataType: "date"
        }, {
            area: "row",
            dataField: "ShipCity"
        }, {
            area: "data",
            summaryType: "count"
        }]
    });

    $("#pivotGridContainer").dxPivotGrid({
        dataSource: pivotGridDataSource
    });
});

Angular

TypeScript

HTML

import PivotGridDataSource from "devextreme/ui/pivot_grid/data_source";
import { DxPivotGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    pivotGridDataSource: PivotGridDataSource;
    constructor () {
        this.pivotGridDataSource = new PivotGridDataSource({
            store: {
                // ...
                // Underlying store is configured here
                // ...
            },
            fields: [{
                area: "column",
                dataField: "OrderDate",
                dataType: "date"
            }, {
                area: "row",
                dataField: "ShipCity"
            }, {
                area: "data",
                summaryType: "count"
            }]
        });
    }
}

@NgModule({
    imports: [
        // ...
        DxPivotGridModule
    ],
    // ...
})

<dx-pivot-grid
    [dataSource]="pivotGridDataSource">
</dx-pivot-grid>

AngularJS

JavaScript

HTML

angular.module('DemoApp', ['dx'])
    .controller('DemoController', function DemoController($scope) {
        $scope.pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
            store: {
                // ...
                // Underlying store is configured here
                // ...
            },
            fields: [{
                area: "column",
                dataField: "OrderDate",
                dataType: "date"
            }, {
                area: "row",
                dataField: "ShipCity"
            }, {
                area: "data",
                summaryType: "count"
            }]
        });
    });

<div dx-pivot-grid="{
    dataSource: pivotGridDataSource
}"></div>

Knockout

JavaScript

HTML

var viewModel = {
    pivotGridDataSource: new DevExpress.data.PivotGridDataSource({
        store: {
            // ...
            // Underlying store is configured here
            // ...
        },
        fields: [{
            area: "column",
            dataField: "OrderDate",
            dataType: "date"
        }, {
            area: "row",
            dataField: "ShipCity"
        }, {
            area: "data",
            summaryType: "count"
        }]
    })
};

ko.applyBindings(viewModel);

<div data-bind="dxPivotGrid: {
    dataSource: pivotGridDataSource
}"></div>

Vue

App.vue

<template>
    <DxPivotGrid
        :data-source="pivotGridDataSource"
    />
</template>

<script>
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
import DxPivotGrid from 'devextreme-vue/pivot-grid';

const pivotGridDataSource = new PivotGridDataSource({
    store: {
        // ...
        // Underlying store is configured here
        // ...
    },
    fields: [{
        area: 'column',
        dataField: 'OrderDate',
        dataType: 'date'
    }, {
        area: 'row',
        dataField: 'ShipCity'
    }, {
        area: 'data',
        summaryType: 'count'
    }]
});

export default {
    components: {
        DxPivotGrid
    },
    data() {
        return {
            pivotGridDataSource
        }
    }
}
</script>

React

App.js

import React from 'react';

import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
import DxPivotGrid from 'devextreme-react/pivot-grid';

const pivotGridDataSource = new PivotGridDataSource({
    store: {
        // ...
        // Underlying store is configured here
        // ...
    },
    fields: [{
        area: 'column',
        dataField: 'OrderDate',
        dataType: 'date'
    }, {
        area: 'row',
        dataField: 'ShipCity'
    }, {
        area: 'data',
        summaryType: 'count'
    }]
});

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

NOTE

If you create a PivotGridDataSource instance outside the UI component (as shown above), make sure to dispose of it when it is no longer used. If the instance is created inside the UI component, it will be disposed of automatically.

NOTE

The PivotGridDataSource is immutable. You cannot change its configuration at runtime. However, you can use its methods to manipulate it.

View Demo

Props

This section describes properties that configure the PivotGridDataSource.

Name	Description
fields	Configures pivot grid fields.
filter	Specifies data filtering conditions. Cannot be used with an XmlaStore.
onChanged	A function that is executed after data is successfully loaded.
onFieldsPrepared	A function that is executed when all fields are loaded from the store and they are ready to be displayed in the PivotGrid.
onLoadError	A function that is executed when data loading fails.
onLoadingChanged	A function that is executed when the data loading status changes.
paginate	Specifies whether the PivotGridDataSource should load data in portions. Can be used only with an XmlaStore.
remoteOperations	Specifies whether the data processing operations (filtering, grouping, summary calculation) should be performed on the server.
retrieveFields	Specifies whether to auto-generate pivot grid fields from the store's data.
store	Configures the DataSource's underlying store.

NOTE

The PivotGridDataSource allows specifying CustomStore properties in its configuration object, as shown in the following code:

jQuery

JavaScript

var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
    load: function (loadOptions) {
        // Loading data objects
    },
    byKey: function (key) {
        // Retrieving a data object by key
    }
});

Angular

TypeScript

import PivotGridDataSource from "devextreme/ui/pivot_grid/data_source";
import CustomStore from "devextreme/data/custom_store";
// ...
export class AppComponent {
    pivotGridDataSource: PivotGridDataSource;
    constructor() {
        this.pivotGridDataSource = new PivotGridDataSource({
            store: new CustomStore({
                load: (loadOptions) => {
                    // Loading data objects
                },
                byKey: (key) => {
                    // Retrieving a data object by key
                }
            })
        });
    }
}

Vue

App.vue

<script>
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
import CustomStore from 'devextreme/data/custom_store';

const pivotGridDataSource = new PivotGridDataSource({
    store: new CustomStore({
        load: (loadOptions) => {
            // Loading data objects
        },
        byKey: (key) => {
            // Retrieving a data object by key
        }
    })
});

export default {
    // ...
    data() {
        return {
            pivotGridDataSource
        }
    }
}
</script>

React

App.js

// ...
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
import CustomStore from 'devextreme/data/custom_store';

const pivotGridDataSource = new PivotGridDataSource({
    store: new CustomStore({
        load: (loadOptions) => {
            // Loading data objects
        },
        byKey: (key) => {
            // Retrieving a data object by key
        }
    })
});

class App extends React.Component {
    // ...
}
export default App;

Methods

This section describes methods that control the PivotGridDataSource.

Name	Description
collapseAll(id)	Collapses all header items of a field with the specified identifier.
collapseHeaderItem(area, path)	Collapses a specific header item.
createDrillDownDataSource(options)	Provides access to the facts that were used to calculate a specific summary value.
dispose()	Disposes of all the resources allocated to the PivotGridDataSource instance.
expandAll(id)	Expands all the header items of a field with the specified identifier.
expandHeaderItem(area, path)	Expands a specific header item.
field(id)	Gets all the properties of a field with the specified identifier.
field(id, options)	Updates field options' values.
fields()	Gets all the fields including those generated automatically.
fields(fields)	Specifies a new fields collection.
filter()	Gets the filter property's value. Does not affect an XmlaStore.
filter(filterExpr)	Sets the filter property's value. Does not affect an XmlaStore.
getAreaFields(area, collectGroups)	Gets all the fields within an area.
getData()	Gets the loaded data. Another data portion is loaded every time a header item is expanded.
isLoading()	Checks whether the PivotGridDataSource is loading data.
load()	Starts loading data.
off(eventName)	Detaches all event handlers from a single event.
off(eventName, eventHandler)	Detaches a particular event handler from a single event.
on(eventName, eventHandler)	Subscribes to an event.
on(events)	Subscribes to events.
reload()	Clears the loaded PivotGridDataSource data and calls the load() method.
state()	Gets the current PivotGridDataSource state. Part of the PivotGrid UI component's state storing feature.
state(state)	Sets the PivotGridDataSource state. Part of the PivotGrid UI component's state storing feature.

Events

This section describes events that the PivotGridDataSource raises.

Name	Description
changed	Raised after data is successfully loaded.
fieldsPrepared	Raised when all fields are loaded from the store and they are ready to be displayed in the PivotGrid.
loadError	Raised when data loading fails.
loadingChanged	Raised when the data loading status changes.