New to KendoReact? Start a free 30-day trial

PivotGridProps

Interface

Represents the props of the KendoReact PivotGrid component.

Definition

Package:@progress/kendo-react-pivotgrid

Properties

cell?

CustomComponent<PivotGridCellProps>

Overrides the default cell component.

The default component is: PivotGridCell.

Example:

jsx

<PivotGrid cell={(props) => <CustomCell {...props} />} />

className?

string

Sets the className property of the top-most element of the PivotGrid in addition to the default k-pivotgrid class.

Example:

jsx

<PivotGrid className="custom-class" />

column?

CustomComponent<PivotGridColumnProps>

Overrides the default column component.

The default component is: PivotGridColumn.

Example:

jsx

<PivotGrid column={(props) => <CustomColumn {...props} />} />

columnAxes?

PivotGridAxis[]

The configuration of the column axes.

Example:

jsx

<PivotGrid columnAxes={[{ name: 'Category', expand: true }]} />

columnHeadersCell?

ComponentType<PivotGridHeaderCellProps>

Overrides the default column-headers headerCell component.

The default component is: PivotGridHeaderCell.

Example:

jsx

<PivotGrid columnHeadersCell={(props) => <CustomHeaderCell {...props} />} />

columnHeadersColumn?

ComponentType<PivotGridColumnProps>

Overrides the default column-headers column component.

The default component is: PivotGridColumn.

Example:

jsx

<PivotGrid columnHeadersColumn={(props) => <CustomColumn {...props} />} />

columnHeadersRow?

ComponentType<PivotGridRowProps>

Overrides the default column-headers row component.

The default component is: PivotGridRow.

Example:

jsx

<PivotGrid columnHeadersRow={(props) => <CustomRow {...props} />} />

columns?

Tuple[]

Sets the columns data of the PivotGrid.

Example:

jsx

<PivotGrid columns={[['Category', 'Subcategory']]} />

data?

PivotDataItem[]

Sets the data of the PivotGrid.

Example:

jsx

<PivotGrid data={[{ field: 'value', data: 100 }]} />

dataColumn?

ComponentType<PivotGridColumnProps>

Overrides the default data column component.

The default component is: PivotGridColumn.

Example:

jsx

<PivotGrid dataColumn={(props) => <CustomColumn {...props} />} />

dataRow?

ComponentType<PivotGridRowProps>

Overrides the default data row component.

The default component is: PivotGridRow.

Example:

jsx

<PivotGrid dataRow={(props) => <CustomRow {...props} />} />

headerCell?

CustomComponent<PivotGridHeaderCellProps>

Overrides the default headerCell component.

The default component is: PivotGridHeaderCell.

Example:

jsx

<PivotGrid headerCell={(props) => <CustomHeaderCell {...props} />} />

id?

string

Sets the id property of the top-most element of the PivotGrid.

Example:

jsx

<PivotGrid id="pivotgrid-id" />

navigatable?

boolean

If set to true, the user can use dedicated shortcuts to interact with the PivotGrid. By default, navigation is disabled.

Default:

false

Example:

jsx

<PivotGrid navigatable={true} />

onColumnAxesChange?

(event: PivotGridAxesChangeEvent) => void

A callback, fired whenever the columnAxes property should change.

Parameters:eventPivotGridAxesChangeEvent

Example:

jsx

<PivotGrid onColumnAxesChange={(event) => console.log(event.value)} />

onRowAxesChange?

(event: PivotGridAxesChangeEvent) => void

A callback, fired whenever the rowAxes property should change.

Parameters:eventPivotGridAxesChangeEvent

Example:

jsx

<PivotGrid onRowAxesChange={(event) => console.log(event.value)} />

row?

CustomComponent<PivotGridRowProps>

Overrides the default row component.

The default component is: PivotGridRow.

Example:

jsx

<PivotGrid row={(props) => <CustomRow {...props} />} />

rowAxes?

PivotGridAxis[]

The configuration of the row axes.

Example:

jsx

<PivotGrid rowAxes={[{ name: 'Region', expand: true }]} />

rowHeadersCell?

ComponentType<PivotGridHeaderCellProps>

Overrides the default row-headers headerCell component.

The default component is: PivotGridHeaderCell.

Example:

jsx

<PivotGrid rowHeadersCell={(props) => <CustomHeaderCell {...props} />} />

rowHeadersColumn?

ComponentType<PivotGridColumnProps>

Overrides the default row-headers column component.

The default component is: PivotGridColumn.

Example:

jsx

<PivotGrid rowHeadersColumn={(props) => <CustomColumn {...props} />} />

rowHeadersRow?

ComponentType<PivotGridRowProps>

Overrides the default row-headers row component.

The default component is: PivotGridRow.

Example:

jsx

<PivotGrid rowHeadersRow={(props) => <CustomRow {...props} />} />

rows?

Tuple[]

Sets the rows data of the PivotGrid.

Example:

jsx

<PivotGrid rows={[['Region', 'Country']]} />

style?

CSSProperties

Sets the style property of the top-most element of the PivotGrid.

Example:

jsx

<PivotGrid style={{ height: '500px' }} />

tabIndex?

number

Sets the tabIndex property of the top-most element of the PivotGrid.

Example:

jsx

<PivotGrid tabIndex={0} />

webMcp?

boolean | WebMcpProps

Enables Web MCP tool registration for this component. Requires a parent WebMcpProvider from @progress/kendo-react-webmcp.