New to KendoReactStart a free 30-day trial

GridCellProps

Interface

Represents the props of the GridCell component (more information).

Definition

Package:@progress/kendo-react-grid

Properties

The index applied to the aria-colindex attribute.

Defines a set of custom cell components that the Grid will render instead of the default cell.

Custom CSS classes for the cell.

colSpan?

number

The column span of the cell.

The index of the column in the rendered columns collection. Optional.

The total number of rendered columns in the Grid. Optional.

dataIndex

number

The zero-based index of the data item in the data collection.

The data item for the current row.

editor?

"boolean" | "text" | "numeric" | "date"

Specifies the type of editor to be used when the cell is in edit mode. Supported values are text, numeric, boolean, and date.

expanded?

boolean

Indicates if the cell is expanded.

field?

string

The data field that the cell binds to.

format?

string

The format applied to the value before display. Takes the {0:format} form where format is a standard number format, a custom number format, a standard date format, or a custom date format.

isAlt?

boolean

Indicates if the cell is alt.

isSelected

boolean

Indicates if the cell is selected.

isSorted?

boolean

Indicates if the cell is sorted.

onChange?

(event: { dataItem: any; dataIndex: number; syntheticEvent: SyntheticEvent​<any, Event>; field?: string; value?: any }) => void

Triggered when the cell value is changed. Provides details about the change event.

Parameters:event{ dataItem: any; dataIndex: number; syntheticEvent: SyntheticEvent​<any, Event>; field?: string; value?: any }

onContextMenu?

(event: MouseEvent​<HTMLElement, MouseEvent>, dataItem: any, field: string) => void

Triggered when the ContextMenu is activated on the cell. Provides the event object, data item, and field name.

Parameters:eventMouseEvent​<HTMLElement, MouseEvent>dataItemanyfield?string

Specifies the type of the row (e.g., data row, group header, etc.). Optional.

selectionChange?

(event: { syntheticEvent: SyntheticEvent​<any, Event> }) => void

Triggered when the cell is selected. Provides the event object.

Parameters:event{ syntheticEvent: SyntheticEvent​<any, Event> }

style?

CSSProperties

Inline styles for the cell.