/** * @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 { /** * 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 * * ``` */ 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; }