GridColumnProps
The props that can be assigned to the Grid column.
cell?
(h: any, defaultRendering: VNode | null, props: GridCellProps, listeners: any) => VNode | string | any
Defines the custom rendering of the cell. Accepts a Vue component, a render function, or a slot name.
If not set, a GridCell will be rendered by default.
children?
GridColumnProps[] | any[]
A collection of child columns.
className?
string
Sets the custom CSS classes to the column cells.
columnMenu?
boolean | any
Defines if the column menu will be shown for the column.
Accepts Boolean, a Vue component, a render function, or a slot name
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 is displayed inside the filter row.
Defaults to text.
filterCell?
(h: any, defaultRendering: VNode | null, props: GridFilterCellProps, listeners: any) => VNode | string | any
Defines the custom rendering of the filter cell. Accepts a Vue component, a render function, or a slot name.
If not set, a GridFilterCell will be rendered by default.
filterable?
boolean
Defines if a filter UI will be displayed for this column. Defaults to true.
footerCell?
(h: any, defaultRendering: VNode | null, props: GridFooterCellProps, listeners: any) => VNode | string | any
Defines the component that will be rendered inside the footer cell.
The footer cell have to render an HTMLTableCellElement (TD element) and apply its colspan values from the footer component props.
footerClassName?
string
Sets the custom CSS classes to the column footer cell if there is footer.
format?
string
The format that is applied to the value before it is displayed. Takes the {0:format}
form where format is any of the following:
- A standard number format
- A custom number format
- A standard date format
- 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?
(h: any, defaultRendering: VNode | null, props: GridHeaderCellProps, listeners: any) => VNode | string | any
Defines the custom rendering of the header cell. Accepts a Vue component, a render function, or a slot name.
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.
hidden?
boolean
Indicates whether the column is hidden. At least one column should be non-hidden.
locked?
boolean
Indicates whether the column is locked.
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. It is responsible only for the minimal width that is observed after the manual drag and it is not responsible for the width of the columns when the browser is resized
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.
type?
"text" | "numeric" | "boolean" | "date"
The type of the data which will be used when formatting the cell data. Could be one of the following values 'text' | 'numeric' | 'boolean' | 'date'.
title?
string
The title of the column.
width?
string | number
The width of the column (in pixels).
