GridCellsSettings

Updated on Mar 31, 2026

The settings of the cells prop options.

Name	Type	Default	Description
data?	string | Component<GridCustomCellProps>		Custom component for rendering the data cell in table layout mode. vue <Grid :cells="{ data: MyDataCell }" />
edit?	{ boolean?: string | Component<GridCustomCellProps>; date?: string | Component<GridCustomCellProps>; numeric?: string | Component<GridCustomCellProps>; text?: string | Component<GridCustomCellProps>; }		Custom cell components for edit columns. vue <Grid :cells="{ edit: { text: MyTextEditCell } }" />
filterCell?	string | Component<GridCustomFilterCellProps>		Custom component for rendering the filter cell. vue <Grid :cells="{ filterCell: MyFilterCell }" />
footerCell?	string | Component<GridCustomFooterCellProps>		Custom component for rendering the footer cell. vue <Grid :cells="{ footerCell: MyFooterCell }" />
group?	{ data?: string | Component<GridCustomCellProps>; groupFooter?: string | Component<GridCustomCellProps>; groupHeader?: string | Component<GridCustomCellProps>; }		Custom cell components for group columns. vue <Grid :cells="{ group: { data: MyGroupDataCell } }" />
groupFooter?	string | Component<GridCustomCellProps>		Custom component for rendering the group footer cell. vue <Grid :cells="{ groupFooter: MyGroupFooterCell }" />
groupHeader?	string | Component<GridCustomCellProps>		Custom component for rendering the group header cell. vue <Grid :cells="{ groupHeader: MyGroupHeaderCell }" />
headerCell?	string | Component<GridCustomHeaderCellProps>		Custom component for rendering the header cell. vue <Grid :cells="{ headerCell: MyHeaderCell }" />
hierarchy?	{ data?: string | Component<GridCustomCellProps>; groupFooter?: string | Component<GridCustomCellProps>; groupHeader?: string | Component<GridCustomCellProps>; }		Custom cell components for hierarchy columns. vue <Grid :cells="{ hierarchy: { data: MyHierarchyDataCell } }" />
pin?	{ data?: string | Component<GridCustomCellProps>; groupFooter?: string | Component<GridCustomCellProps>; groupHeader?: string | Component<GridCustomCellProps>; }		Custom cell components for pin columns. tsx import { MyPinDataCell } from './MyPinDataCell'; <Grid cells={{ pin: { data: MyPinDataCell } }} />
select?	{ data?: string | Component<GridCustomCellProps>; groupFooter?: string | Component<GridCustomCellProps>; groupHeader?: string | Component<GridCustomCellProps>; }		Custom cell components for selection columns. vue <Grid :cells="{ select: { data: MySelectDataCell } }" />