PivotGridProps

Premium

Represents the props of the KendoReact PivotGrid component.

Name	Type	Default	Description
cell?	CustomComponent<PivotGridCellProps>		Overrides the default cell component. The default component is: PivotGridCell. 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. jsx <PivotGrid className="custom-class" />
column?	CustomComponent<PivotGridColumnProps>		Overrides the default column component. The default component is: PivotGridColumn. jsx <PivotGrid column={(props) => <CustomColumn {...props} />} />
columnAxes?	PivotGridAxis[]		The configuration of the column axes. jsx <PivotGrid columnAxes={[{ name: 'Category', expand: true }]} />
columnHeadersCell?	React.ComponentType<PivotGridHeaderCellProps>		Overrides the default column-headers headerCell component. The default component is: PivotGridHeaderCell. jsx <PivotGrid columnHeadersCell={(props) => <CustomHeaderCell {...props} />} />
columnHeadersColumn?	React.ComponentType<PivotGridColumnProps>		Overrides the default column-headers column component. The default component is: PivotGridColumn. jsx <PivotGrid columnHeadersColumn={(props) => <CustomColumn {...props} />} />
columnHeadersRow?	React.ComponentType<PivotGridRowProps>		Overrides the default column-headers row component. The default component is: PivotGridRow. jsx <PivotGrid columnHeadersRow={(props) => <CustomRow {...props} />} />
columns?	Tuple[]		Sets the columns data of the PivotGrid. jsx <PivotGrid columns={[['Category', 'Subcategory']]} />
data?	PivotDataItem[]		Sets the data of the PivotGrid. jsx <PivotGrid data={[{ field: 'value', data: 100 }]} />
dataColumn?	React.ComponentType<PivotGridColumnProps>		Overrides the default data column component. The default component is: PivotGridColumn. jsx <PivotGrid dataColumn={(props) => <CustomColumn {...props} />} />
dataRow?	React.ComponentType<PivotGridRowProps>		Overrides the default data row component. The default component is: PivotGridRow. jsx <PivotGrid dataRow={(props) => <CustomRow {...props} />} />
headerCell?	CustomComponent<PivotGridHeaderCellProps>		Overrides the default headerCell component. The default component is: PivotGridHeaderCell. jsx <PivotGrid headerCell={(props) => <CustomHeaderCell {...props} />} />
id?	string		Sets the id property of the top-most element of the PivotGrid. 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. jsx <PivotGrid navigatable={true} />
onColumnAxesChange?	(event: PivotGridAxesChangeEvent) => void		A callback, fired whenever the columnAxes property should change. jsx <PivotGrid onColumnAxesChange={(event) => console.log(event.value)} />
onRowAxesChange?	(event: PivotGridAxesChangeEvent) => void		A callback, fired whenever the rowAxes property should change. jsx <PivotGrid onRowAxesChange={(event) => console.log(event.value)} />
row?	CustomComponent<PivotGridRowProps>		Overrides the default row component. The default component is: PivotGridRow. jsx <PivotGrid row={(props) => <CustomRow {...props} />} />
rowAxes?	PivotGridAxis[]		The configuration of the row axes. jsx <PivotGrid rowAxes={[{ name: 'Region', expand: true }]} />
rowHeadersCell?	React.ComponentType<PivotGridHeaderCellProps>		Overrides the default row-headers headerCell component. The default component is: PivotGridHeaderCell. jsx <PivotGrid rowHeadersCell={(props) => <CustomHeaderCell {...props} />} />
rowHeadersColumn?	React.ComponentType<PivotGridColumnProps>		Overrides the default row-headers column component. The default component is: PivotGridColumn. jsx <PivotGrid rowHeadersColumn={(props) => <CustomColumn {...props} />} />
rowHeadersRow?	React.ComponentType<PivotGridRowProps>		Overrides the default row-headers row component. The default component is: PivotGridRow. jsx <PivotGrid rowHeadersRow={(props) => <CustomRow {...props} />} />
rows?	Tuple[]		Sets the rows data of the PivotGrid. jsx <PivotGrid rows={[['Region', 'Country']]} />
style?	React.CSSProperties		Sets the style property of the top-most element of the PivotGrid. jsx <PivotGrid style={{ height: '500px' }} />
tabIndex?	number		Sets the tabIndex property of the top-most element of the PivotGrid. jsx <PivotGrid tabIndex={0} />