New to KendoReact? Start a free 30-day trial

GridCellsSettings

Interface

The settings of the cells prop options.

Definition

Package:@progress/kendo-react-grid

Properties

data?

ComponentType<GridCustomCellProps>

Custom component for rendering the data cell in table layout mode.

Example:

tsx

import { MyDataCell } from './MyDataCell';
<Grid cells={{ data: MyDataCell }} />

edit?

{ text?: ComponentType<GridCustomCellProps>; numeric?: ComponentType<GridCustomCellProps>; boolean?: ComponentType<GridCustomCellProps>; date?: ComponentType<GridCustomCellProps> }

Custom cell components for edit columns.

Example:

tsx

import { MyTextEditCell } from './MyTextEditCell';
<Grid cells={{ edit: { text: MyTextEditCell } }} />

filterCell?

ComponentType<GridCustomFilterCellProps>

Custom component for rendering the filter cell.

Example:

tsx

import { MyFilterCell } from './MyFilterCell';
<Grid cells={{ filterCell: MyFilterCell }} />

footerCell?

ComponentType<GridCustomFooterCellProps>

Custom component for rendering the footer cell.

Example:

tsx

import { MyFooterCell } from './MyFooterCell';
<Grid cells={{ footerCell: MyFooterCell }} />

group?

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

Custom cell components for group columns.

Example:

tsx

import { MyGroupDataCell } from './MyGroupDataCell';
<Grid cells={{ group: { data: MyGroupDataCell } }} />

groupFooter?

ComponentType<GridCustomCellProps>

Custom component for rendering the group footer cell.

Example:

tsx

import { MyGroupFooterCell } from './MyGroupFooterCell';
<Grid cells={{ groupFooter: MyGroupFooterCell }} />

groupHeader?

ComponentType<GridCustomCellProps>

Custom component for rendering the group header cell.

Example:

tsx

import { MyGroupHeaderCell } from './MyGroupHeaderCell';
<Grid cells={{ groupHeader: MyGroupHeaderCell }} />

headerCell?

ComponentType<GridCustomHeaderCellProps>

Custom component for rendering the header cell.

Example:

tsx

import { MyHeaderCell } from './MyHeaderCell';
<Grid cells={{ headerCell: MyHeaderCell }} />

hierarchy?

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

Custom cell components for hierarchy columns.

Example:

tsx

import { MyHierarchyDataCell } from './MyHierarchyDataCell';
<Grid cells={{ hierarchy: { data: MyHierarchyDataCell } }} />

pin?

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

Custom cell components for pin columns.

Example:

tsx

import { MyPinDataCell } from './MyPinDataCell';
<Grid cells={{ pin: { data: MyPinDataCell } }} />

select?

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

Custom cell components for selection columns.

Example:

tsx

import { MySelectDataCell } from './MySelectDataCell';
<Grid cells={{ select: { data: MySelectDataCell } }} />

stackedData?

ComponentType<GridStackedCustomCellProps>

Custom component for rendering the data cell in stacked layout mode. When both stackedData and data are provided, stackedData takes precedence in stacked layout.

Example:

tsx

import { MyStackedDataCell } from './MyStackedDataCell';
<Grid
  stackedLayout={{ enabled: true }}
  cells={{ stackedData: MyStackedDataCell }}
/>