/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2026 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ import { ComponentType, ReactElement } from 'react'; import { GridColumnChildrenProps } from './GridColumnChildrenProps'; import { GridColumnMenuProps } from '../interfaces/GridColumnMenuProps'; import { GridColumnSortSettings } from './GridSortSettings'; import { ColumnBaseProps } from '@progress/kendo-react-data-tools'; import { FieldProps } from '@progress/kendo-react-form'; import { GridColumnCellsSettings } from './GridCellsSettings'; import { SVGIcon } from '@progress/kendo-react-common'; import { GridColSpanProps } from './GridColSpanProps'; import { GridCellBaseOptions, GridContextMenuOptions } from '../contextMenu/GridContextMenu.js'; import { GridColumnType } from './ColumnType'; import { GridDataType } from './GridDataType'; import { GridRowSpannableSettings } from './GridRowSpannableSettings'; /** * The props of the GridColumn component. */ export interface GridColumnProps extends Omit { /** * Allows the column headers to be clicked and the `sortChange` event emitted. * You have to handle the `sortChange` event yourself and sort the data. * * @example * ```jsx * * ``` * @default true */ sortable?: boolean | GridColumnSortSettings; /** * Defines if the column is locked (frozen or sticky). * Locked columns are the columns that are visible at all times while the user scrolls the component horizontally. * * @example * ```jsx * * ``` * @default false */ locked?: boolean; /** * A collection of child columns. * * @example * ```jsx * * * * * ``` */ children?: GridColumnProps[] | ReactElement[] | GridColumnChildrenProps[]; /** * Specifies a React element that will be cloned and rendered inside the column menu of the Grid ([see example](https://www.telerik.com/kendo-react-ui/components/grid/columns/column-menu#toc-basic-usage)). * * @example * ```jsx * * ``` */ columnMenu?: ComponentType; /** * Specifies the context menu settings that will be applied to the column. * * @example * ```jsx * * ``` */ contextMenu?: boolean | GridContextMenuOptions | ((options: GridCellBaseOptions) => boolean | GridContextMenuOptions); /** * Determines if the column can be dragged to the group panel. * * @example * ```jsx * * ``` * @default true */ groupable?: boolean; /** * Defines whether the column is editable ([more information and examples](https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-inline)). * * @example * ```jsx * * ``` */ editable?: boolean; /** * Defines if a filter UI will be rendered for this column. * * @example * ```jsx * * ``` * @default true */ filterable?: boolean; /** * Defines the title which will be set to the input element in the filter cell. * * @example * ```jsx * * ``` */ filterTitle?: string; /** * Defines the filter type that will be rendered inside the filter row. * * @example * ```jsx * * ``` * @default 'text' */ filter?: GridDataType; /** * Defines the editor type. Used when the column enters the edit mode ([more information and examples](https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-inline)). * * @example * ```jsx * * ``` * @default 'text' */ editor?: GridDataType; /** * The validation method for the edit field when editting is in mode `dialog`. * * The method arguments are: * * * value - The current value of the field. * * valueGetter - Function which can be used to get other fields value. * Usable when validator depends on more than one field. Supports field paths. * * fieldProps - Props of the Field component. Currently contains only the `name` prop. * Usable when one validator is used across multiple fields. * * Returns `string` to signify error or `undefined` to signify validation success. */ validator?: FieldProps['validator']; /** * Overrides the default (three vertical dots) column menu icon or the icon set through the ([`columnMenuIcon`](https://www.telerik.com/kendo-react-ui/components/grid/api/gridprops#toc-columnmenuicon)) property. * * @example * ```jsx * * ``` */ menuIcon?: SVGIcon; /** * 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. * * @example * ```jsx * * ``` * @default 1 */ colSpan?: number | ((colSpanProps: GridColSpanProps) => number); /** * Controls the visibility of the Grid's column. * * @example * ```jsx *