DevExtreme Vue - PivotGridDataSource Props

This section describes options that configure the PivotGridDataSource.

NOTE

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

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 {
  • // ...
  • }
  • </script>

fields[]

Configures pivot grid fields.

Type:

Array<Object>

Default Value: undefined

This option accepts an array of objects where each object configures a single field. Each pivot grid field must be associated with a data field using the dataField option. Fields with the specified area option are displayed in the pivot grid; other fields' headers are displayed in the field chooser.

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({
  • // ...
  • fields: [{
  • dataField: 'region',
  • area: 'row'
  • }, {
  • dataField: 'date',
  • dataType: 'date',
  • area: 'column'
  • }, {
  • dataField: 'sales',
  • summaryType: 'sum',
  • area: 'data'
  • }]
  • });
  •  
  • export default {
  • components: {
  • DxPivotGrid
  • },
  • data() {
  • return {
  • pivotGridDataSource
  • }
  • }
  • }
  • </script>

If the retrieveFields option is true, fields configured in the fields array are accompanied by auto-generated fields that do not belong to any area. However, a user can move them to any area using the field chooser.

See Also

filter

Specifies data filtering conditions. Cannot be used with an XmlaStore.

Possible variants:

  • Binary filter

    • [ "dataField", "=", 3 ]
  • Unary filter

    • [ "!", [ "dataField", "=", 3 ] ]
  • Complex filter

    • [
    • [ "dataField", "=", 10 ],
    • "and",
    • [
    • [ "otherDataField", "<", 3 ],
    • "or",
    • [ "otherDataField", ">", 11 ]
    • ]
    • ]
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({
  • // ...
  • filter: [ 'date', 'startswith', '2014' ]
  • });
  •  
  • export default {
  • components: {
  • DxPivotGrid
  • },
  • data() {
  • return {
  • pivotGridDataSource
  • }
  • }
  • }
  • </script>
See Also

onChanged

A function that is executed after data is successfully loaded.

Type:

Function

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({
  • // ...
  • onChanged: () => {
  • // Your code goes here
  • }
  • });
  •  
  • export default {
  • components: {
  • DxPivotGrid
  • },
  • data() {
  • return {
  • pivotGridDataSource
  • }
  • }
  • }
  • </script>

onFieldsPrepared

A function that is executed when all fields are loaded from the store and they are ready to be displayed in the PivotGrid.

Type:

Function

Function parameters:

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({
  • // ...
  • onFieldsPrepared: (fields) => {
  • // Your code goes here
  • }
  • });
  •  
  • export default {
  • components: {
  • DxPivotGrid
  • },
  • data() {
  • return {
  • pivotGridDataSource
  • }
  • }
  • }
  • </script>

onLoadError

A function that is executed when data loading fails.

Type:

Function

Function parameters:
error:

Object

The error.

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({
  • // ...
  • onLoadError: (error) => {
  • console.log(error.message);
  • }
  • });
  •  
  • export default {
  • components: {
  • DxPivotGrid
  • },
  • data() {
  • return {
  • pivotGridDataSource
  • }
  • }
  • }
  • </script>

onLoadingChanged

A function that is executed when the data loading status changes.

Type:

Function

Function parameters:
isLoading:

Boolean

Indicates whether data is being loaded.

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({
  • // ...
  • onLoadingChanged: (isLoading) => {
  • // Your code goes here
  • }
  • });
  •  
  • export default {
  • components: {
  • DxPivotGrid
  • },
  • data() {
  • return {
  • pivotGridDataSource
  • }
  • }
  • }
  • </script>

paginate

Specifies whether the PivotGridDataSource should load data in portions. Can be used only with an XmlaStore.

Type:

Boolean

Default Value: false

Paging has the following specifics:

remoteOperations

Specifies whether the data processing operations (filtering, grouping, summary calculation) should be performed on the server.

Type:

Boolean

Default Value: false

retrieveFields

Specifies whether to auto-generate pivot grid fields from the store's data.

Type:

Boolean

Default Value: true

If you disable this option, the PivotGrid contains only the fields configured in the fields array. With this option enabled, these fields are accompanied by auto-generated fields, which do not belong to any area by default and are only available in the field chooser.

See Also

store

Configures the DataSource's underlying store.

Type:

Store

|

Store Configuration

|

XmlaStore

|

XmlaStore Configuration

|

Array<Object>

|

Object

This option accepts one of the following:

  • Store instance
    An XmlaStore, ArrayStore, LocalStore, ODataStore, or CustomStore instance.

  • Store configuration object
    An XmlaStore, ArrayStore, LocalStore, or ODataStore configuration object. Make sure to set the type option.

  • Array
    Assigning an array to the store option automatically creates an ArrayStore in the PivotGridDataSource.

See the Use CustomStore topic for information on how to implement custom data access logic.