GridColumnProps
The props that can be assigned to the Grid column.
Definition
Package:@progress/kendo-vue-grid
Properties
cell?
any
obsolete Will be removed in the next major release. Use 'cells' prop instead.
Specifies a set of cell components that the Grid will render instead of the built-in cell.
children?
any[] | GridColumnProps[]
A collection of child columns.
className?
string
Sets the custom CSS classes to the column cells.
colSpan?
number | (colSpanProps: GridColSpanProps) => number
Sets the colSpan of the column which will make the row content span over multiple cells. As arguments, it takes either a number or a function that returns a number.
1
columnMenu?
any
Defines if the column menu will be shown for the column.
Accepts Boolean, a Vue component, a render function, or a slot name
columnMenuOpened?
boolean
Defines if the column menu is opened.
Sets the type of the column and renders a dedicated column for interaction.
"data"
editable?
boolean
Defines whether the column is editable (more information and examples).
Defines the editor type. Used when the column enters the edit mode (more information and examples).
'text'
field?
string
The field to which the column is bound.
Defines the filter type that will be rendered inside the filter row.
'text'
filterable?
boolean
Defines if a filter UI will be rendered for this column.
true
filterCell?
any
obsolete Will be removed in the next major release. Use 'cells.filterCell' prop instead.
filterTitle?
string
Defines the title which will be set to the input element in the filter cell.
footerCell?
any
obsolete Will be removed in the next major release. Use 'cells.footerCell' prop instead.
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?
any
obsolete Will be removed in the next major release. Use 'cells.headerCell' prop instead.
headerClassName?
string
Sets the custom CSS classes to the column header cell.
headerSelectionValue?
boolean
Defines if the header selection checkbox is checked.
hidden?
boolean
Controls the visibility of the Grid's column.
false
id?
string
The column identifier used to distinguish columns for example in multi column header scenarios with resize and keyboard navigation.
Also used for unique key for rendering the component cells.
If not set, the component will generate unique id automatically.
locked?
boolean
Defines if the column is locked. Locked columns are fixed in place and do not scroll horizontally.
media?
string
Sets the screen size condition that needs to be satisfied for a column to remain visible. If you set the hidden property, the behavior of media is overridden.
menuIcon?
SVGIcon
Overrides the default(three vertical dots) column menu icon or the icon set through the (columnMenuIcon) property.
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.
rowSpannable?
boolean | GridRowSpannableSettings
Defines if the cells of the column should be spanned when their values are the same.
Allows the column headers to be clicked and the sortChange event emitted.
You have to handle the sortChange event yourself and sort the data.
true
title?
string
The title of the column.
type?
"string" | "number" | "boolean" | "date"
The type of the data which will be used when formatting the cell data.
Could be one of the following values 'string' | 'number' | 'boolean' | 'date'.
Defaults to string.
width?
string | number
The width of the column (in pixels).