New to KendoReactStart a free 30-day trial

PivotGridAxisEditorProps
Premium

Updated on Oct 31, 2025

Represents the props of the KendoReact PivotGridAxisEditor component.

NameTypeDefaultDescription

ariaDescribedBy?

string

Identifies the element(s) which describe the component, similar to an HTML aria-describedby attribute. For example, these elements could contain an error or a hint message.

jsx
<Chip ariaDescribedBy="description" />

ariaLabel?

string

Represents the label of the Chip component.

jsx
<Chip ariaLabel="Chip Label" />

avatar?

ChipAvatarProps

Determines if the Chip has an avatar.

jsx
<Chip avatar={{ image: 'avatar.png', imageAlt: 'Avatar' }} />

children?

React.ReactNode

The React elements that will be rendered as custom content inside the Chip.

jsx
<Chip>Custom Content</Chip>

chip?

CustomComponent<ChipProps>

Overrides the default chip component.

The default component is: KendoReactChip.

className?

string

Sets additional classes to the Chip.

jsx
<Chip className="custom-chip" />

columnMenuTextColumn?

CustomComponent<ColumnMenuProps>

Overrides the default columnMenuTextColumn component.

The default component is: KendoReactColumnMenuTextColumn.

dataItem

PivotGridAxis

Represents the dataItem of the AxisEditor.

The dataItem is a single PivotGridAxis object.

dir?

string

The Chip direction 'ltr' as default or 'rtl'.

jsx
<Chip dir="rtl" />

disabled?

boolean

Determines if the Chip is disabled.

jsx
<Chip disabled />

dropClue?

CustomComponent<any>

Overrides the default dropClue component.

The default component is: (props) => <div className="k-grouping-dropclue" style={{ position: 'relative', zIndex: 10000 }} {...props}/>

fillMode?

"null" | "solid" | "outline"

solid

Configures the fillMode of the Chip. The available options are:

  • solid
  • outline
  • null (removes built-in fill mode styles)
jsx
<Chip fillMode="outline" />

filterFieldsEditor?

CustomComponent<PivotGridAxisFilterFieldsEditorProps>

Overrides the default filterFieldsEditor component.

The default component is: PivotGridAxisFilterFieldsEditor.

icon?

string

Determines if the Chip has a font icon.

jsx
<Chip icon="k-i-user" />

id?

string

Sets the id property of the top div element of the Chip.

jsx
<Chip id="chip1" />

onBlur?

(event: ChipFocusEvent) => void

Fires on onBlur event.

jsx
<Chip onBlur={(event) => console.log(event)} />

onClick?

(event: ChipMouseEvent) => void

Fires on onClick event.

jsx
<Chip onClick={(event) => console.log(event)} />

onDoubleClick?

(event: ChipMouseEvent) => void

Fires on onDoubleClick event.

jsx
<Chip onDoubleClick={(event) => console.log(event)} />

onFocus?

(event: ChipFocusEvent) => void

Fires on onFocus event.

jsx
<Chip onFocus={(event) => console.log(event)} />

onKeyDown?

(event: ChipKeyboardEvent) => void

Fires on onKeyDown event.

jsx
<Chip onKeyDown={(event) => console.log(event)} />

onMouseDown?

(event: ChipMouseEvent) => void

Fires on onMouseDown event.

jsx
<Chip onMouseDown={(event) => console.log(event)} />

onMouseEnter?

(event: ChipMouseEvent) => void

Fires on onMouseEnter event.

jsx
<Chip onMouseEnter={(event) => console.log(event)} />

onMouseLeave?

(event: ChipMouseEvent) => void

Fires on onMouseLeave event.

jsx
<Chip onMouseLeave={(event) => console.log(event)} />

onMouseMove?

(event: ChipMouseEvent) => void

Fires on onMouseMove event.

jsx
<Chip onMouseMove={(event) => console.log(event)} />

onMouseOut?

(event: ChipMouseEvent) => void

Fires on onMouseOut event.

jsx
<Chip onMouseOut={(event) => console.log(event)} />

onMouseOver?

(event: ChipMouseEvent) => void

Fires on onMouseOver event.

jsx
<Chip onMouseOver={(event) => console.log(event)} />

onMouseUp?

(event: ChipMouseEvent) => void

Fires on onMouseUp event.

jsx
<Chip onMouseUp={(event) => console.log(event)} />

onRemove?

(event: ChipRemoveEvent) => void

Fires on Chip removing.

jsx
<Chip onRemove={(event) => console.log(event)} />

removable?

boolean

Determines if the Chip could be removed.

jsx
<Chip removable />

removeIcon?

string

Determines if the Chip has custom font removeIcon.

jsx
<Chip removeIcon="k-i-close" />

removeSvgIcon?

SVGIcon

Determines if the Chip has custom SVG removeIcon.

jsx
import { gearIcon } from '@progress/kendo-svg-icons';

<Chip removeSvgIcon={gearIcon} />

rounded?

"null" | "small" | "large" | "medium" | "full"

medium

Configures the roundness of the Chip. The available options are:

  • small
  • medium
  • large
  • full
  • null (removes built-in roundness styles)
jsx
<Chip rounded="full" />

selected?

boolean

Determines if the Chip is selected.

jsx
<Chip selected />

selectedIcon?

string

Determines if the Chip has custom selection font icon.

jsx
<Chip selectedIcon="k-i-check" />

selectedSvgIcon?

SVGIcon

Determines if the Chip has custom selection SVG icon.

jsx
import { gearIcon } from '@progress/kendo-svg-icons';

<Chip selectedSvgIcon={gearIcon} />

size?

"null" | "small" | "large" | "medium"

medium

Configures the size of the Chip. The available options are:

  • small
  • medium
  • large
  • null (removes built-in size styles)
jsx
<Chip size="large" />

style?

React.CSSProperties

Sets additional CSS styles to the Chip.

jsx
<Chip style={{ margin: '10px' }} />

svgIcon?

SVGIcon

Determines if the Chip has an SVG icon.

jsx
import { gearIcon } from '@progress/kendo-svg-icons';

<Chip svgIcon={gearIcon} />

tabIndex?

number

Sets the tabIndex attribute.

jsx
<Chip tabIndex={0} />

text?

string

Sets the label text of the Chip.

jsx
<Chip text="Label" />

themeColor?

"null" | "base" | "info" | "success" | "warning" | "error"

base

Configures the themeColor of the Chip. The available options are:

  • base
  • info
  • success
  • warning
  • error
  • null (removes built-in theme color styles)
jsx
<Chip themeColor="success" />

value?

any

Sets the id value of the Chip.

jsx
<Chip value="chip1" />
Not finding the help you need?
Contact Support