GridColumnProps

The props of the GridColumn component.

cell? ComponentType<GridCellProps>

Defines the component that will be rendered as a cell. If not set, a GridCell will be rendered by default.

children? undefined[] | ReactElement<GridColumnProps>

A collection of child columns.

className? string

Sets the custom CSS classes to the column cells.

columnMenu? null | ComponentType<GridColumnMenuProps>

Specifies a React element that will be cloned and rendered inside the column menu of the Grid (see example).

editable? boolean

Defines whether the column is editable (more information and examples).

editor? "text" | "numeric" | "boolean" | "date"

Defines the editor type. Used when the column enters the edit mode (more information and examples). Defaults to text.

field? string

The field to which the column is bound.

filter? "text" | "numeric" | "boolean" | "date"

Defines the filter type that will be rendered inside the filter row. Defaults to text.

filterCell? ComponentType<GridFilterCellProps>

Defines the component that will be rendered as a filter cell. If not set, a GridFilterCell will be rendered by default.

filterable? boolean

Defines if a filter UI will be rendered for this column. Defaults to true.

footerCell? ComponentType<GridFooterCellProps>

Defines the component that will be rendered as a footer cell. The footer has to render an HTML <td> element and applies the style and colspan values from its props.

Copy Code<GridColumn
 footerCell={props => (
   <td colSpan={props.colSpan} style={props.style}>Sum: 50</td>
 )}
/>

format? string

The format that is applied to the value before it is displayed. 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. For more information on the supported date and number formats, refer to the kendo-intl documentation.

groupable? boolean

Determines if the column can be dragged to the group panel. Defaults to true.

headerCell? ComponentType<GridHeaderCellProps>

Defines the component that will be rendered as a header cell. If not set, a GridHeaderCell will be rendered by default.

headerClassName? string

Sets the custom CSS classes to the column header cell.

headerSelectionValue? boolean

Defines if the header selection checkbox is checked.

locked? boolean

minResizableWidth? number

The width of the column (in pixels) below which the user is not able to resize the column through the UI. Defaults to 10.

orderIndex? number

Determinates the position of the column. Columns with smaller orderIndex will appear before columns with bigger orderIndex. Defaults to 0.

reorderable? boolean

Indicates whether the column is reorderable.

resizable? boolean

Indicates whether the column is resizable.

sortable? boolean

Allows the column headers to be clicked and the sortChange event emitted. You have to handle the sortChange event yourself and sort the data.

title? string

The title of the column.

width? string | number

The width of the column (in pixels).