@progress/kendo-vue-grid
Version:
216 lines (215 loc) • 7.61 kB
TypeScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { SVGIcon } from '@progress/kendo-vue-common';
import { GridRowSpannableSettings } from './GridRowSpannableSettings';
import { GridColSpanProps } from './GridColSpanProps';
import { GridDataType } from './GridDataType';
import { GridColumnSortSettings } from './GridSortSettings';
import { ColumnBaseProps } from '@progress/kendo-vue-data-tools';
import { GridColumnType } from './ColumnType';
import { GridHeaderCellProps } from './GridHeaderCellProps';
import { GridCellProps } from './GridCellProps';
import { GridFilterCellProps } from './GridFilterCellProps';
import { GridFooterCellProps } from './GridFooterCellProps';
import { GridCellsSettings } from './GridCellsSettings';
/**
* The props that can be assigned to the Grid column.
*/
export interface GridColumnProps extends Omit<ColumnBaseProps, 'cell'> {
/**
* The field to which the column is bound.
*/
field?: string;
/**
* The title of the column.
*/
title?: string;
/**
* Defines whether the column is editable
* ([more information and examples]({% slug editing_inline_grid %})).
*/
editable?: 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.
*
* @default true
*/
sortable?: GridColumnSortSettings;
/**
* `obsolete` Will be removed in the next major release. Use 'cells' prop instead.
*/
cell?: ((h: any, defaultRendering: any | null, props: GridCellProps, listeners: any) => any) | string | any;
/**
* @hidden
*/
defaultCell?: any;
/**
* @hidden
*/
defaultHeaderCell?: any;
/**
* `obsolete` Will be removed in the next major release. Use 'cells.filterCell' prop instead.
*/
filterCell?: ((h: any, defaultRendering: any | null, props: GridFilterCellProps, listeners: any) => any) | string | any;
/**
* Defines if a filter UI will be rendered for this column.
*
* @default true
*/
filterable?: boolean;
/**
* Defines the title which will be set to the input element in the filter cell.
*
*/
filterTitle?: string;
/**
* Defines the filter type that will be rendered inside the filter row.
*
* @default 'text'
*/
filter?: GridDataType;
/**
* Defines the editor type. Used when the column enters the edit mode ([more information and examples]({% slug editing_inline_grid %})).
*
* @default 'text'
*/
editor?: GridDataType;
/**
* Overrides the default(three vertical dots) column menu icon or the icon set through the ([`columnMenuIcon`]({% slug api_grid_gridprops %}#toc-columnmenuicon)) property.
*/
menuIcon?: SVGIcon;
/**
* The width of the column (in pixels).
*/
width?: string | 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
*/
minResizableWidth?: number;
/**
* `obsolete` Will be removed in the next major release. Use 'cells.headerCell' prop instead.
*/
headerCell?: ((h: any, defaultRendering: any | null, props: GridHeaderCellProps, listeners: any) => any) | string | any;
/**
* `obsolete` Will be removed in the next major release. Use 'cells.footerCell' prop instead.
*/
footerCell?: ((h: any, defaultRendering: any | null, props: GridFooterCellProps, listeners: any) => any) | string | any;
/**
* Sets the custom CSS classes to the column footer cell if there is footer.
*/
footerClassName?: string;
/**
* Defines if the header selection checkbox is checked.
*/
headerSelectionValue?: boolean;
/**
* 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](https://github.com/telerik/kendo-intl/blob/develop/docs/index.md) documentation.
*/
format?: string;
/**
* 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.
*
* @default 1
*/
colSpan?: number | ((colSpanProps: GridColSpanProps) => number);
/**
* Controls the visibility of the Grid's column.
*
* @default false
*/
hidden?: boolean;
/**
* 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.
*
*/
media?: string;
/**
* Specifies a set of cell components that the Grid will render instead of the built-in cell.
*
* @example
* ```jsx
* <GridColumn :cells="{ data: CustomDataCell }" />
* ```
*/
cells?: GridCellsSettings;
/**
* Sets the custom CSS classes to the column header cell.
*/
headerClassName?: string;
/**
* Sets the custom CSS classes to the column cells.
*/
className?: string;
/**
* Indicates whether the column is reorderable.
*/
reorderable?: boolean;
/**
* Indicates whether the column is resizable.
*/
resizable?: boolean;
/**
* Determinates the position of the column. Columns with smaller `orderIndex` will appear
* before columns with bigger `orderIndex`. Defaults to `0`.
*/
orderIndex?: number;
/**
* Determines if the column can be dragged to the group panel. Defaults to `true`.
*/
groupable?: boolean;
/**
* A collection of child columns.
*/
children?: (GridColumnProps)[] | (any)[];
/**
* Defines if the column menu will be shown for the column.
* Accepts Boolean, a Vue component, a `render` function, or a slot name
*/
columnMenu?: boolean | any;
/**
* Defines if the column menu is opened.
*/
columnMenuOpened?: boolean;
/**
* Defines if the column is locked. Locked columns are fixed in place and do not scroll horizontally.
*/
locked?: boolean;
/**
* Sets the type of the column and renders a dedicated column for interaction.
*
* @example
* ```jsx
* { columnType: "checkbox" }
* ```
* @default "data"
*/
columnType?: GridColumnType;
/**
* 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`.
*/
type?: 'string' | 'number' | 'boolean' | 'date';
/**
* Defines if the cells of the column should be spanned when their values are the same.
*
*/
rowSpannable?: boolean | GridRowSpannableSettings;
}