/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2026 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ import { GroupState } from '@progress/kendo-vue-data-tools'; import { GridColumnType } from './ColumnType'; import { GridCellsSettings } from './GridCellsSettings'; /** * @hidden */ export interface GridCellProps { /** * @hidden */ id: string; /** * The field to which the cell is bound ([see example]({% slug sorting_grid %})). */ key?: number; /** * The field to which the cell is bound ([see example]({% slug sorting_grid %})). */ field: string; /** * The data object that represents the current row. */ dataItem: any; /** * */ dataIndex?: number; /** * The format that is applied to the value before the value 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; /** * The data Item read format. */ readFormat?: string; /** * The custom CSS classes of the cells. */ className?: string; /** * Defines a set of custom cell components that the Grid will render instead of the default cell. */ cells?: GridCellsSettings; /** * The index to be applied to the `aria-colindex` attribute. */ ariaColumnIndex: number; /** * The index of all rendered columns. */ columnIndex?: number; /** * The number of rendered columns in the Grid. */ columnsCount?: number; /** * The type of the row. */ rowType?: string; /** * @hidden */ level?: number; /** * The expanded value of the cell when hierarchy or grouping are used. */ expanded?: boolean; /** * The event that is fired when the cell is selected. */ selectionchange?: (event: any, dataItem: any) => void; /** * @hidden */ style?: any; /** * The column span of the cell. */ colSpan?: number; /** * Indicates if the cell is selected. */ isSelected: boolean; /** * Indicates if the cell is highlighted. */ isHighlighted: boolean; /** * Indicates if the cell is in rtl direction. */ isRtl: boolean; /** * The event that is fired when the cell value is changed. */ onChange?: (event: { dataItem: any; event: any; field?: string; value?: any; }) => void; /** * The event that is fired when the keydown event of the cell is triggered. */ onCellkeydown?: (event: { event: any; dataItem: any; field: string; }) => void; /** * The event that is fired when the cell is clicked. */ onCellclick?: (event: { dataItem: any; field: string; }) => void; /** * The event that is fired when the cell is about to be added. */ onAdd?: (event: { dataItem: any; }) => void; /** * The event that is fired when the cell is about to be edited. */ onEdit?: (event: { dataItem: any; }) => void; /** * The event that is fired when the cell is about to be saved. */ save?: (event: { dataItem: any; }) => void; /** * The event that is fired when the cell is about to be removed. */ remove?: (event: { dataItem: any; }) => void; /** * The event that is fired when the cell is about to be canceled. */ onCancel?: (event: { dataItem: any; }) => void; /** * 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 'text' | 'numeric' | 'boolean' | 'date'. */ type?: string; /** * The type of the editor which will be used when the cell is in edit mode. * Could be one of the following values 'text' | 'numeric' | 'boolean' | 'date'. */ editor?: string; /** * The method for rendering the cell. */ render?: any; /** * @hidden */ locked?: boolean; /** @hidden */ group?: GroupState; /** @hidden */ rowSpan?: { count: number | null; value: any; }; }