DevExtreme React - 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.
jQuery
$(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
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>
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
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;
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, sorting, 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. |
The PivotGridDataSource allows you to specify CustomStore properties in its configuration object, as shown in the following code:
jQuery
var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({ load: function (loadOptions) { // Loading data objects }, byKey: function (key) { // Retrieving a data object by key } });
Angular
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
<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
// ... 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. |
If you have technical questions, please create a support ticket in the DevExpress Support Center.