/** * @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 } from 'react'; import { HeaderCellProps } from './HeaderCell.js'; import { CellProps } from './CellProps.js'; import { FilterCellProps } from '../filteringCells/FilterCellProps.js'; import { ColumnSortSettings } from './SortSettings.js'; import { ColumnMenuProps } from '../columnmenu/index.js'; export interface ColumnBaseProps { /** * Sets the data field that the column binds to. */ field?: string; /** * Sets the column header text. */ title?: string; /** * Enables header click to emit the `sortChange` event. Handle `sortChange` to sort the data. * * @default true */ sortable?: boolean | ColumnSortSettings; /** * Sets the width of the column (in pixels). */ width?: string | number; /** * Indicates that the header selection checkbox is checked when `true`. */ headerSelectionValue?: boolean; /** * Applies a format to the value before display. * Takes the `{0:format}` form where `format` is a standard number format, a custom number format, * a standard date format, or a custom date format. For more information on supported formats see the * [kendo-intl](https://github.com/telerik/kendo-intl/blob/develop/docs/index.md) documentation. */ format?: string; /** * Sets custom CSS classes on the header cell. */ headerClassName?: string; /** * Sets custom CSS classes on the column cells. */ className?: string; /** * Enables column resizing when `true`. * * @default true */ resizable?: boolean; /** * Enables column reordering when `true`. * * @default true */ reorderable?: boolean; /** * Disables the ability to reorder when another column is dragged over it or tried to be reordered with keyboard. * * @default false */ disableReorder?: boolean; /** * Sets the minimum resize width (in pixels). * * @default 10 */ minResizableWidth?: number; /** * Determines the column position. Smaller `orderIndex` values render first. * * @default 0 */ orderIndex?: number; /** * Sets the column id for distinguishing columns (multi header, resize, or keyboard navigation scenarios). * Also used as the unique key for rendering cells. If not set, a unique id is generated. */ id?: string; /** * Defines the component rendered as a cell. If not set, a `Cell` renders. */ cell?: ComponentType; /** * @hidden */ navigatable?: boolean; /** * @hidden */ locked?: boolean; } /** * @hidden */ export interface TreeColumnBaseProps extends ColumnBaseProps { /** * A collection of child columns. */ children?: TreeColumnBaseProps[]; /** * The column menu component. Pass the [ColumnMenuTextColumn](https://www.telerik.com/kendo-react-ui/components/datatools/api/columnmenutextcolumn), * [ColumnMenuNumericColumn](https://www.telerik.com/kendo-react-ui/components/datatools/api/columnmenunumericcolumn), * [ColumnMenuDateColumn](https://www.telerik.com/kendo-react-ui/components/datatools/api/columnmenudatecolumn), * [ColumnMenuBooleanColumn](https://www.telerik.com/kendo-react-ui/components/datatools/api/columnmenubooleancolumn) * or a custom component base on the type of the column data. */ columnMenu?: React.ComponentType; /** * If set to `true`, the column will render the icons that are used for expanding and collapsing child rows. */ expandable?: boolean; /** * Defines the component that will be rendered as an edit cell. */ editCell?: ComponentType; /** * Defines the component that will be rendered as a header cell. * If not set, a `HeaderCell` will be rendered by default. */ headerCell?: ComponentType; /** * **Deprecated**. Use `filterCell` prop instead. */ filter?: ComponentType; /** * Defines the component that will be rendered as a filter cell. */ filterCell?: ComponentType; } /** * @hidden */ export interface ExtendedColumnProps extends TreeColumnBaseProps { declarationIndex: number; parentIndex: number; colSpan: number; rowSpan: number; depth: number; kFirst?: boolean; index: number; children: ExtendedColumnProps[]; left: number; right: number; rightBorder: boolean; groupable: boolean; ariaColumnIndex: number; isAccessible: boolean; } /** * @hidden */ export declare const ColumnDefaultProps: { filterable: boolean; editable: boolean; sortable: boolean; resizable: boolean; reorderable: boolean; groupable: boolean; };