New to KendoReact? Start a free 30-day trial

GridGroupColumnSettings

Interface

The settings for a synthesized group column produced by every displayMode. Most properties (title, width, columnMenu, etc.) only take effect for 'singleColumn' and 'multipleColumns' — the two modes that render the group column as a real, visible column — see each property's own doc for its exact scope. cells is the exception: it applies universally, including 'default' and 'compact' (see its doc below). Pass as the groupColumn property of GridGroupableSettings either as a static object (same settings for every group column) or via a GridGroupColumnFn callback (per-level customization).

Definition

Package:@progress/kendo-react-grid

Properties

cells?

{ groupHeader?: ComponentType<GridCustomCellProps>; groupFooter?: ComponentType<GridCustomCellProps> }

Custom cell components for the group column. Unlike the other groupColumn settings (title, width, columnMenu, etc. — which only apply to 'singleColumn' and 'multipleColumns', since only those modes render a real, visible group column), cells applies in every displayMode, including 'default' and 'compact' — the synthesized group column always exists internally and is always rendered through these templates, even when it has zero width or is split into per-level indent cells.

groupHeader — Replaces the default "fieldLabel: value" content area of the group header cell. The expand/collapse toggle button is rendered before this component and is not affected.
groupFooter — Replaces the footer cell content of the group column.

Both templates may be invoked for "filler" cell positions that carry no content of their own — ancestor-level spacer columns in 'multipleColumns' mode, per-level indent cells in 'default' mode, and the entire group-footer row in 'default' mode (which renders its aggregates through the data columns instead, see GridCellsSettings.groupFooter). These positions are flagged via isSpacerCell on GridCustomCellProps so the template can render them distinctly (e.g. blank or differently styled) from the real toggle/value content cell.

Example:

tsx

import { GridCustomCellProps } from '@progress/kendo-react-grid';

const MyGroupHeader = (props: GridCustomCellProps) =>
    props.isSpacerCell ? <td {...props.tdProps} /> : <span>{props.dataItem}</span>;

<Grid groupable={{ displayMode: 'singleColumn', groupColumn: { cells: { groupHeader: MyGroupHeader } } }} />

columnMenu?

ComponentType<GridColumnMenuGroupBaseProps>

A custom column menu component rendered in the group column header. The component receives GridColumnMenuGroupBaseProps. Has no effect when displayMode is 'default' or 'compact'.

Example:

tsx

import { GridColumnMenuGroupBaseProps } from '@progress/kendo-react-grid';

const MyGroupColumnMenu = (props: GridColumnMenuGroupBaseProps) => <div>...</div>;

<Grid groupable={{ displayMode: 'multipleColumns', groupColumn: { columnMenu: MyGroupColumnMenu } }} />

locked?

boolean

Locks (freezes) the group column so it remains visible while the Grid is scrolled horizontally. Equivalent to the existing per-column locked behavior. When set, overrides props.lockGroups for this specific group level.

Default:

false

Example:

tsx

<Grid groupable={{ displayMode: 'multipleColumns', groupColumn: { locked: true } }} />

maxWidth?

number

The maximum width of the group column in pixels that the user can resize it to.

Example:

tsx

<Grid groupable={{ displayMode: 'multipleColumns', groupColumn: { maxWidth: 400 } }} />

minWidth?

number

The minimum width of the group column in pixels that the user can resize it to.

Example:

tsx

<Grid groupable={{ displayMode: 'multipleColumns', groupColumn: { minWidth: 80 } }} />

reorderable?

boolean

Allows the group column to be reordered by the user via drag and drop.

Default:

true

Example:

tsx

<Grid groupable={{ displayMode: 'multipleColumns', groupColumn: { reorderable: false } }} />

resizable?

boolean

Allows the group column to be resized by the user.

Default:

true

Example:

tsx

<Grid groupable={{ displayMode: 'singleColumn', groupColumn: { resizable: false } }} />

title?

string

The column header text.

Example:

tsx

<Grid groupable={{ displayMode: 'singleColumn', groupColumn: { title: 'Group' } }} />

width?

number

The initial width of the group column in pixels.

Example:

tsx

<Grid groupable={{ displayMode: 'multipleColumns', groupColumn: { width: 200 } }} />