@progress/kendo-react-grid

/** * @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.js'; import { GridColumnMenuProps } from '../interfaces/GridColumnMenuProps.js'; import { GridColumnSortSettings } from './GridSortSettings.js'; import { ColumnBaseProps } from '@progress/kendo-react-data-tools'; import { FieldProps } from '@progress/kendo-react-form'; import { GridCellsSettings } from './GridCellsSettings.js'; import { SVGIcon } from '@progress/kendo-react-common'; import { GridColSpanProps } from './GridColSpanProps.js'; import { GridCellBaseOptions, GridContextMenuOptions } from '../contextMenu/GridContextMenu.js'; import { GridColumnType } from './ColumnType.js'; import { GridDataType } from './GridDataType.js'; import { GridRowSpannableSettings } from './GridRowSpannableSettings.js'; /** * The props of the GridColumn component. */ export interface GridColumnProps extends Omit<ColumnBaseProps, 'cell' | 'minResizableWidth'> { /** * 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 * <GridColumn sortable={true} /> * ``` * @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 * <GridColumn locked={true} /> * ``` * @default false */ locked?: boolean; /** * A collection of child columns. * * @example * ```jsx * <GridColumn> * <GridColumn field="child1" /> * <GridColumn field="child2" /> * </GridColumn> * ``` */ children?: GridColumnProps[] | ReactElement<GridColumnProps>[] | 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 * <GridColumn columnMenu={CustomColumnMenu} /> * ``` */ columnMenu?: ComponentType<GridColumnMenuProps>; /** * Specifies the context menu settings that will be applied to the column. * * @example * ```jsx * <GridColumn contextMenu={{ enabled: true }} /> * ``` */ contextMenu?: boolean | GridContextMenuOptions | ((options: GridCellBaseOptions) => boolean | GridContextMenuOptions); /** * Determines if the column can be dragged to the group panel. * * @example * ```jsx * <GridColumn groupable={false} /> * ``` * @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 * <GridColumn editable={true} /> * ``` */ editable?: boolean; /** * Defines if a filter UI will be rendered for this column. * * @example * ```jsx * <GridColumn filterable={false} /> * ``` * @default true */ filterable?: boolean; /** * Defines the title which will be set to the input element in the filter cell. * * @example * ```jsx * <GridColumn filterTitle="Custom Filter Title" /> * ``` */ filterTitle?: string; /** * Defines the filter type that will be rendered inside the filter row. * * @example * ```jsx * <GridColumn filter="numeric" /> * ``` * @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 * <GridColumn editor="date" /> * ``` * @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 * <GridColumn menuIcon={CustomIcon} /> * ``` */ 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 * <GridColumn colSpan={2} /> * ``` * @default 1 */ colSpan?: number | ((colSpanProps: GridColSpanProps) => number); /** * Controls the visibility of the Grid's column. * * @example * ```jsx * <GridColumn hidden={true} /> * ``` * @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. * * @example * ```jsx * <GridColumn media="(min-width: 600px)" /> * ``` */ 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 type of the column and renders a dedicated column for interaction. * * @example * ```jsx * <GridColumn columnType="checkbox" /> * ``` * @default "data" */ columnType?: GridColumnType; /** * **Deprecated**: Use the `minWidth` property instead. The `minResizableWidth` property will be removed in a future version. * * @deprecated Use `minWidth` instead. */ minResizableWidth?: number; /** * Sets the minimum width of the column (in pixels). */ minWidth?: number; /** * Sets the maximum width of the column (in pixels). */ maxWidth?: number; /** * Defines if the cells of the column should be spanned when their values are the same. * * @example * ```jsx * <GridColumn rowSpannable={true} /> * ``` */ rowSpannable?: boolean | GridRowSpannableSettings; }