React PivotGrid Props

Default Value: false

A user can click a filter icon in the field chooser or field panel when this option is set to true to invoke a popup menu.

allowSorting

Allows an end-user to change sorting options.

Type:

Default Value: false

With this option enabled, an end user can sort data by clicking the arrow icons in the field chooser or on the field panel.

allowSortingBySummary

Allows an end-user to sort columns by summary values.

Type:

Default Value: false

With this option enabled, an end-user can use the context menu of a column or row header to apply sorting by summary values.

dataFieldArea

Specifies the area to which data field headers must belong.

Type:

Default Value: 'column'

Accepted Values: 'column' | 'row'

Data field headers appear only when more than one data field is visible. See the following image to spot the difference between the two settings of this option. DevExpress DevExtreme HTML5 PivotGrid

Use the PivotGridDataFieldArea enum to specify this option when the widget is used as an ASP.NET MVC Control. This enum accepts the following values: Row and Column.

PivotGridDataSource Configuration

dataSource

Specifies a data source for the pivot grid.

Type:

Array<Object>

|

PivotGridDataSource

|

Default Value: null

To provide data for a pivot grid, use the dataSource option. This option takes on one of the following.

An array of objects
The fields of each object will be used to provide data for corresponding pivot grid fields.
A PivotGridDataSource or its Configuration Object
The DataSource is an object that includes options for data sorting, grouping and filtering. The DataSource's underlying data access logic is isolated in a Store. Unlike the DataSource, a Store is a stateless object implementing a universal interface for reading and modifying data. If the Store type is not XmlaStore, the PivotGridDataSource also describes pivot grid fields.

NOTE

Data field names should not contain the following characters: ., ,, :, [, and ]. Their presence may cause issues in the widget's operation.

For more information on how to implement a data source and bind it to your pivot grid, refer to the Data Binding topic.

disabled

Specifies whether the widget responds to user interaction.

Type:

Default Value: false

elementAttr

Specifies the attributes to be attached to the widget's root element.

Type:

Default Value: {}

jQuery

$(function(){
    $("#pivotGridContainer").dxPivotGrid({
        // ...
        elementAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});

Angular

HTML

TypeScript

<dx-pivot-grid ...
    [elementAttr]="{ id: 'elementId', class: 'class-name' }">
</dx-pivot-grid>

import { DxPivotGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxPivotGridModule
    ],
    // ...
})

ASP.NET MVC Control

Razor C#

Razor VB

@(Html.DevExtreme().PivotGrid()
    .ElementAttr("class", "class-name")
    // ===== or =====
    .ElementAttr(new {
        @id = "elementId",
        @class = "class-name"
    })
    // ===== or =====
    .ElementAttr(new Dictionary<string, object>() {
        { "id", "elementId" },
        { "class", "class-name" }
    })

)

@(Html.DevExtreme().PivotGrid() _
    .ElementAttr("class", "class-name")
    ' ===== or =====
    .ElementAttr(New With {
        .id = "elementId",
        .class = "class-name"
    })
    ' ===== or =====
    .ElementAttr(New Dictionary(Of String, Object) From {
        { "id", "elementId" },
        { "class", "class-name" }
    })
)

export

Configures client-side exporting.

Type:

When exporting is enabled, the new "Export to Excel file" entity is added to the context menu. You can specify exporting options using this object.

NOTE

Client-side exporting requires the JSZip library. Learn where you can get it from topics in the Installation section.

fieldChooser

The Field Chooser configuration options.

Type:

A field chooser is a pivot grid element that allows an end-user to configure data displayed in the pivot grid. To invoke the field chooser, right-click any pivot grid header and select the Show Field Chooser item. You can also display PivotGridFieldChooser as a separate widget.

fieldPanel

Configures the field panel.

Type:

The field panel is a component that displays the fields involved in the calculation of grid summaries. It consists of four field areas: column, row, data and filter. Each area holds fields of the corresponding type.

By default, the field panel is hidden. To make it visible, assign true to the visible property. To control the visibility of an individual field area, change the showColumnFields, showRowFields, showDataFields or showFilterFields property respectively.

The field panel partially covers the functionality provided by the field chooser. For example, the user can reorder fields within a single field area or even between them. This capability is controlled by the value of the allowFieldDragging property.

In addition, if the allowSorting and allowFiltering options are true, the user can apply sorting and filtering to fields directly from the field panel.

headerFilter

Configures the header filter feature.

Type:

A header filter allows a user to filter individual field's values by including or excluding them from the applied filter. Clicking a header filter icon in the field chooser or the field panel invokes a popup menu displaying all the unique field values.

DevExtreme HTML5 JavaScript jQuery Angular Knockout Widget Pivot Grid Header Filter

Assign true to the allowFiltering option to make the icons visible. Specify the fields[].headerFilter object to customize the specific field's header filter.

height

Specifies the widget's height.

Type:

|

|

Return Value:

|

The widget's height.

Default Value: undefined

This option accepts a value of one of the following types:

Number
The height in pixels.
String
A CSS-accepted measurement of height. For example, "55px", "80%", "auto", "inherit".
Function
A function returning either of the above. For example:
JavaScript
```
height: function() {
    return window.innerHeight / 1.5;
}
```

hideEmptySummaryCells

Specifies whether or not to hide rows and columns with no data.

Type:

Default Value: true

hint

Specifies text for a hint that appears when a user pauses on the widget.

Type:

Default Value: undefined

loadPanel

Specifies options configuring the load panel.

Type:

When PivotGrid operates with a large number of records or uses a remote storage as a data source, loading data takes time. As data is being prepared, PivotGrid displays a load panel.

The load panel consists of a pane, a loading indicator and a text. You can specify whether the pane or loading indicator must be displayed using the showPane or showIndicator options respectively. The text displayed by the load panel can be specified using the text option. Also, you can change the height or width of the load panel using the corresponding options of the loadPanel configuration object.

Since the grid load panel is practically the DevExtreme LoadPanel widget, you can specify any option belonging to this widget in the loadPanel object.

onCellClick

A function that is executed when a pivot grid cell is clicked or tapped.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
component	PivotGrid	The widget instance.
element	HTMLElement \| jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
model	Object	The model data. Available only if Knockout is used.
area	String	The area to which the clicked cell belongs.
cellElement	HTMLElement \| jQuery	The cell's container. It is an HTML Element or a jQuery Element when you use jQuery.
cell	PivotGrid Cell	The cell properties.
rowIndex	Number	The index of the row to which the clicked cell belongs.
columnIndex	Number	The index of the column to which the clicked cell belongs.
columnFields	Array<PivotGrid Field>	The column area's fields.
rowFields	Array<PivotGrid Field>	The row area's fields.
dataFields	Array<PivotGrid Field>	The data area's fields.
jQueryEvent	jQuery.Event	Use 'event' instead. The jQuery event that caused the handler execution. Deprecated in favor of the event field.
event	Event (jQuery or EventObject)	The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery.
cancel	Boolean	Allows you to cancel field expansion.

Default Value: null

onCellPrepared

A function that is executed after a pivot grid cell is created.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
component	PivotGrid	The widget instance.
element	HTMLElement \| jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
model	Object	The model data. Available only if Knockout is used.
area	String	The area to which the prepared cell belongs.
cellElement	HTMLElement \| jQuery	The prepared cell's container. It is an HTML Element or a jQuery Element when you use jQuery.
cell	PivotGrid Cell	The cell properties.
rowIndex	Number	The position of a cell's row.
columnIndex	Number	The position of a cell's column.

Default Value: null

onContentReady

A function that is executed when the widget's content is ready and each time the content is changed.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name

Type

Description

component

The widget's instance.

element

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

The model data. Available only when using Knockout.

Default Value: null

onContextMenuPreparing

A function that is executed before the context menu is rendered.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
component	PivotGrid	The widget's instance.
element	HTMLElement \| jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
model	Object	The model data. Available only if Knockout is used.
items	Array<Object>	An array of items to be displayed by the context menu. The item objects must have the fields that are used by the ContextMenu default item template.
area	String	The clicked area's type.
cell	PivotGrid Cell	The cell that has been clicked to invoke the context menu. Unavailable for fields in the field panel.
cellElement	HTMLElement \| jQuery	The clicked cell's container. It is an HTML Element or a jQuery Element when you use jQuery. Unavailable for fields in the field panel.
columnIndex	Number	The index of the column to which the clicked cell belongs. Unavailable for fields in the field panel.
rowIndex	Number	The index of the row to which the clicked cell belongs. Unavailable for fields in the field panel.
dataFields	Array<PivotGrid Field>	Fields in the "data" area.
rowFields	Array<PivotGrid Field>	Fields in the "row" area.
columnFields	Array<PivotGrid Field>	Fields in the "column" area.
field	PivotGrid Field	This field's configuration. Available for fields in the field panel only.

Default Value: null

onDisposing

A function that is executed before the widget is disposed of.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name

Type

Description

component

The widget's instance.

element

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

The model data. Available only if you use Knockout.

Default Value: null

onExported

A function that is executed after data is exported.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name

Type

Description

component

The widget's instance.

element

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

The model data. Available only if Knockout is used.

Default Value: null

onExporting

A function that is executed before data is exported.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
component	PivotGrid	The widget's instance.
element	HTMLElement \| jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
model	Object	The model data. Available only if Knockout is used.
fileName	String	The name of the file to which data is about to be exported.
cancel	Boolean	Allows you to cancel exporting.

Default Value: null

onFileSaving

A function that is executed before a file with exported data is saved to the user's local storage.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
component	PivotGrid	The widget's instance.
element	HTMLElement \| jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
fileName	String	The name of the file to be saved.
format	String	The format of the file to be saved. Equals 'EXCEL' for an Excel file.
data	BLOB	Exported data as a BLOB.
cancel	Boolean	Allows you to cancel file saving.

Default Value: null

onInitialized

A function that is executed only once, after the widget is initialized.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name

Type

Description

component

The widget's instance.

element

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

Default Value: null

You cannot access widget elements in this function because it is executed before they are ready. Use the onContentReady function instead.

onOptionChanged

A function that is executed after a widget option is changed.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
name	String	The option's short name.
model	Object	The model data. Available only if you use Knockout.
element	HTMLElement \| jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
component	PivotGrid	The widget's instance.
fullName	String	The option's full name.
value	any	The option's new value.

Default Value: null

rowHeaderLayout

Specifies the layout of items in the row header.

Type:

Default Value: 'standard'

Accepted Values: 'standard' | 'tree'

Frequently, items in the row header have a hierarchical structure. By default, these items are arranged in a line occupying a significant amount of space. If the area assigned to PivotGrid is limited, use a more compact tree layout. The image below illustrates the difference between standard and tree layouts. DevExpress DevExtreme HTML5 PivotGrid

Use the PivotGridRowHeadersLayout enum to specify this option when the widget is used as an ASP.NET MVC Control. This enum accepts the following values: Standard and Tree.

rtlEnabled

Switches the widget to a right-to-left representation.

Type:

Default Value: false

When this option is set to true, the widget text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.

JavaScript

DevExpress.config({
    rtlEnabled: true
});

scrolling

A configuration object specifying scrolling options.

Type:

The PivotGrid widget enables an end-user to scroll grid records. To specify required scrolling behavior, use the mode property of the scrolling configuration object.

showBorders

Specifies whether the outer borders of the grid are visible or not.

Type:

Default Value: false

showColumnGrandTotals

Specifies whether to display the Grand Total column.

Type:

Default Value: true

Grand Total column displays the summary values of an entire row.

showColumnTotals

Specifies whether to display the Total columns.

Type:

Default Value: true

Total columns show the summary values calculated for all previous hierarchy levels starting with the deepest expanded one.

showRowGrandTotals

Specifies whether to display the Grand Total row.

Type:

Default Value: true

Grand Total row displays the summary values of an entire column.

showRowTotals

Specifies whether to display the Total rows. Applies only if rowHeaderLayout is "standard".

Type:

Default Value: true

Total rows show the summary values calculated for all previous hierarchy levels starting with the deepest expanded one.

showTotalsPrior

Specifies where to show the total rows or columns. Applies only if rowHeaderLayout is "standard".

Type:

Default Value: 'none'

Accepted Values: 'both' | 'columns' | 'none' | 'rows'

By default, total rows and columns are shown after data (columns at the right side, rows at the bottom). You can place total rows, total columns or both before data using this option.

Use the PivotGridTotalsDisplayMode enum to specify this option when the widget is used as an ASP.NET MVC Control. This enum accepts the following values: Rows, Columns, Both, and None.

stateStoring

A configuration object specifying options related to state storing.

Type:

At runtime, end-users may adjust pivot grid settings to their needs. By default, these settings disappear when the pivot grid disposes (for example, on page reload) and the pivot grid appears in its original configuration. If user settings need to be saved and then restored, enable client-side state storing for the grid by setting the stateStoring.enabled option to true. The pivot grid state will be saved under a specified storage key. The saving operation is conducted after a certain amount of time has passed since the last change of the state. To specify the amount of time in milliseconds, use the savingTimeout option.

PivotGrid supports various types of state storing. The type of storage that will suit your needs best depends on the supposed lifetime of user-specified pivot grid settings. For more information about state storing types, refer to the type option description.

The PivotGridDataSource provides the state method. Use it to get or change the pivot grid state at runtime. Call this method without arguments to obtain the pivot grid state. When you need to set the pivot grid state, call this method with the state object as its argument. You can also return the widget to its default state by calling the state method with the empty object or null argument.

tabIndex

Specifies the number of the element when the Tab key is used for navigating.

Type:

Number

Default Value: 0

The value of this option will be passed to the tabindex attribute of the HTML element that underlies the widget.

texts

Strings that can be changed or localized in the PivotGrid widget.

Type:

visible

Specifies whether the widget is visible.

Type:

Default Value: true

width

Specifies the widget's width.

Type:

|

|

Return Value:

|

The widget's width.

Default Value: undefined

This option accepts a value of one of the following types:

Number
The width in pixels.
String
A CSS-accepted measurement of width. For example, "55px", "80%", "auto", "inherit".
Function
A function returning either of the above. For example:
JavaScript
```
width: function() {
    return window.innerWidth / 1.5;
}
```

wordWrapEnabled

Specifies whether long text in header items should be wrapped.

Type: