Vue PivotGrid API

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

import DxPivotGrid from "devextreme-vue/pivot-grid"

Type: DxPivotGridTypes.default

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the PivotGrid widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery

JavaScript

HTML

$(function () {
    $("#pivotGrid").dxPivotGrid({
        dataSource: {
            store: {
                type: "odata",
                url: "http://url/to/the/service",
                key: "OrderID",
                keyType: "Int32"
            },
            fields: [
                { area: "column", dataField: "OrderDate", dataType: "date" },
                { area: "row", dataField: "ShipCountry" },
                { area: "row", dataField: "ShipCity" },
                { area: "row", dataField: "ShipName" },
                { area: "data", summaryType: "count" }
            ]
        }
    });
});

<div id="pivotGrid"></div>

Angular

HTML

TypeScript

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

import { DxPivotGridModule } from "devextreme-angular";
import PivotGridDataSource from "devextreme/ui/pivot_grid/data_source";
// ...
export class AppComponent {
    pivotGridDataSource: PivotGridDataSource;
    constructor() {
        this.pivotGridDataSource = new PivotGridDataSource({
            store: {
                type: "odata",
                url: "http://url/to/the/service",
                key: "OrderID",
                keyType: "Int32"
            },
            fields: [
                { area: "column", dataField: "OrderDate", dataType: "date" },
                { area: "row", dataField: "ShipCountry" },
                { area: "row", dataField: "ShipCity" },
                { area: "row", dataField: "ShipName" },
                { area: "data", summaryType: "count" }
            ]
        });
    }
}
@NgModule({
    imports: [
        // ...
        DxPivotGridModule
    ],
    // ...
})

AngularJS

HTML

<div dx-pivot-grid="{
    dataSource: {
        store: {
            type: 'odata',
            url: 'http://url/to/the/service',
            key: 'OrderID',
            keyType: 'Int32'
        },
        fields: [
            { area: 'column', dataField: 'OrderDate', dataType: 'date'},
            { area: 'row', dataField: 'ShipCountry' },
            { area: 'row', dataField: 'ShipCity' },
            { area: 'row', dataField: 'ShipName' },
            { area: 'data', summaryType: 'count' }
        ]
    }
}"></div>

Knockout

HTML

<div data-bind="dxPivotGrid: {
    dataSource: {
        store: {
            type: 'odata',
            url: 'http://url/to/the/service',
            key: 'OrderID',
            keyType: 'Int32'
        },
        fields: [
            { area: 'column', dataField: 'OrderDate', dataType: 'date' },
            { area: 'row', dataField: 'ShipCountry' },
            { area: 'row', dataField: 'ShipCity' },
            { area: 'row', dataField: 'ShipName' },
            { area: 'data', summaryType: 'count' }
        ]
    }
}"></div>

ASP.NET MVC Controls

Razor C#

Razor VB

@(Html.DevExtreme().PivotGrid()
    .ID("pivotGrid")
    .DataSource(ds => ds
        .Store(store => store.OData()
            .Url("http://url/to/the/service")
            .Key("OrderID")
            .KeyType(EdmType.Int32)
        )
        .Fields(fields => {
            fields.Add().Area(PivotGridArea.Column)
                .DataField("OrderDate")
                .DataType(PivotGridDataType.Date);
            fields.Add().Area(PivotGridArea.Row).DataField("ShipCountry");
            fields.Add().Area(PivotGridArea.Row).DataField("ShipCity");
            fields.Add().Area(PivotGridArea.Row).DataField("ShipName");
            fields.Add().Area(PivotGridArea.Data).SummaryType(SummaryType.Count);
        })
    )
)

@(Html.DevExtreme().PivotGrid() _
    .ID("pivotGrid") _
    .DataSource(Sub(ds)
        ds.Store(Function(store)
            Return store.OData() _
                .Url("http://url/to/the/service") _
                .Key("OrderID") _
                .KeyType(EdmType.Int32)
            End Function) _
        .Fields(Sub(fields)
            fields.Add().Area(PivotGridArea.Column) _
                .DataField("OrderDate") _
                .DataType(PivotGridDataType.Date)
            fields.Add().Area(PivotGridArea.Row).DataField("ShipCountry")
            fields.Add().Area(PivotGridArea.Row).DataField("ShipCity")
            fields.Add().Area(PivotGridArea.Row).DataField("ShipName")
            fields.Add().Area(PivotGridArea.Data).SummaryType(SummaryType.Count)
        End Sub)
    End Sub)
)

To provide data for the PivotGrid widget, specify a data source. PivotGrid 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

Props

This section describes the configuration options of the PivotGrid widget.

Name	Description
allowExpandAll	Allows an end-user to expand/collapse all header items within a header level.
allowFiltering	Allows a user to filter fields by selecting or deselecting values in the popup menu.
allowSorting	Allows an end-user to change sorting options.
allowSortingBySummary	Allows an end-user to sort columns by summary values.
dataFieldArea	Specifies the area to which data field headers must belong.
dataSource	Binds the widget to data.
disabled	Specifies whether the widget responds to user interaction.
elementAttr	Specifies the attributes to be attached to the widget's root element.
export	Configures client-side exporting.
fieldChooser	The Field Chooser configuration options.
fieldPanel	Configures the field panel.
headerFilter	Configures the header filter feature.
height	Specifies the widget's height.
hideEmptySummaryCells	Specifies whether or not to hide rows and columns with no data.
hint	Specifies text for a hint that appears when a user pauses on the widget.
loadPanel	Specifies options configuring the load panel.
onCellClick	A function that is executed when a pivot grid cell is clicked or tapped.
onCellPrepared	A function that is executed after a pivot grid cell is created.
onContentReady	A function that is executed when the widget's content is ready and each time the content is changed.
onContextMenuPreparing	A function that is executed before the context menu is rendered.
onDisposing	A function that is executed before the widget is disposed of.
onExported	A function that is executed after data is exported.
onExporting	A function that is executed before data is exported.
onFileSaving	A function that is executed before a file with exported data is saved to the user's local storage.
onInitialized	A function used in JavaScript frameworks to save the widget instance.
onOptionChanged	A function that is executed after a widget option is changed.
rowHeaderLayout	Specifies the layout of items in the row header.
rtlEnabled	Switches the widget to a right-to-left representation.
scrolling	A configuration object specifying scrolling options.
showBorders	Specifies whether the outer borders of the grid are visible or not.
showColumnGrandTotals	Specifies whether to display the Grand Total column.
showColumnTotals	Specifies whether to display the Total columns.
showRowGrandTotals	Specifies whether to display the Grand Total row.
showRowTotals	Specifies whether to display the Total rows. Applies only if rowHeaderLayout is "standard".
showTotalsPrior	Specifies where to show the total rows or columns. Applies only if rowHeaderLayout is "standard".
stateStoring	A configuration object specifying options related to state storing.
tabIndex	Specifies the number of the element when the Tab key is used for navigating.
texts	Strings that can be changed or localized in the PivotGrid widget.
visible	Specifies whether the widget is visible.
width	Specifies the widget's width.
wordWrapEnabled	Specifies whether long text in header items should be wrapped.

Methods

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

Name	Description
beginUpdate()	Prevents the widget from refreshing until the endUpdate() method is called.
bindChart(chart, integrationOptions)	Binds a Chart to the PivotGrid.
defaultOptions(rule)	Specifies the device-dependent default configuration options for this component.
dispose()	Disposes of all the resources allocated to the PivotGrid instance.
element()	Gets the root widget element.
endUpdate()	Refreshes the widget after a call of the beginUpdate() method.
exportToExcel()	Exports pivot grid data to the Excel file.
focus()	Sets focus on the widget.
getDataSource()	Gets the PivotGridDataSource instance.
getFieldChooserPopup()	Gets the Popup instance of the field chooser window.
getInstance(element)	Gets the instance of a widget found using its DOM node.
instance()	Gets the widget's instance. Use it to access other methods of the widget.
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.
option()	Gets all widget options.
option(optionName)	Gets the value of a single option.
option(optionName, optionValue)	Updates the value of a single option.
option(options)	Updates the values of several options.
repaint()	Repaints the widget without reloading data. Call it to update the widget's markup.
updateDimensions()	Updates the widget to the size of its content.

Events

This section describes events fired by this widget.

Name	Description
cellClick	Raised when a pivot grid cell is clicked or tapped.
cellPrepared	Raised after a pivot grid cell is created.
contentReady	Raised when the widget's content is ready.
contextMenuPreparing	Raised before the context menu is rendered.
disposing	Raised before the widget is disposed of.
exported	Raised after data is exported.
exporting	Raised before data is exported.
fileSaving	Raised before a file with exported data is saved to the user's local storage.
initialized	Raised only once, after the widget is initialized.
optionChanged	Raised after a widget option is changed.

Summary Cell

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

Type:

Object

Pivot Grid Cell

An object containing information about the pivot grid cell.

Type:

Object

Vue PivotGrid API

See Also