/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { DataResult, SortDescriptor, CompositeFilterDescriptor, GroupDescriptor } from '@progress/kendo-data-query';
import { GridGroupableSettings } from './GridGroupableSettings';
import { GridCellsSettings } from './GridCellsSettings';
import { GridSortChangeEvent, GridFilterChangeEvent, GridPageChangeEvent, GridExpandChangeEvent, GridSelectionChangeEvent, GridHeaderSelectionChangeEvent, GridRowClickEvent, GridItemChangeEvent, GridDataStateChangeEvent, GridColumnResizeEvent, GridColumnReorderEvent, GridGroupChangeEvent, GridCancelEvent, GridSaveEvent, GridRemoveEvent, GridEditEvent, GridNavigationActionEvent, GridKeyDownEvent, GridSearchChangeEvent, GridGroupExpandChangeEvent, GridDetailExpandChangeEvent, GridRowPinChangeEvent, GridContextMenuEvent, GridContextMenuItemClickEvent } from './events';
import { GridContextMenuOptions, GridCellBaseOptions } from '../contextMenu/GridContextMenu';
import { GridCellProps } from './GridCellProps';
import { GridSortSettings } from './GridSortSettings';
import { DetailExpandDescriptor, GridPagerSettings, GroupExpandDescriptor, SearchField, SelectDescriptor } from '@progress/kendo-vue-data-tools';
import { GridColumnProps } from '../interfaces/GridColumnProps';
import { GridFilterOperators } from './GridFilterOperators';
import { PopupAnimation } from '@progress/kendo-vue-popup';
import { SVGIcon } from '@progress/kendo-vue-common';
import { GridColumnState } from './GridColumnState';
import { GridRowSpannableSettings } from './GridRowSpannableSettings';
import { GridRowsSettings } from './GridRowsSettings';
import { GridSelectableSettings } from './GridSelectableSettings';
/**
* Represents the props of the [native Vue Grid component by Kendo UI]({% slug overview_grid %}).
*/
export interface GridProps {
/**
* Sets the `id` property of the top div element of the component.
*
* @example
* ```vue
*
* ```
*/
id?: string;
/**
* Enables data-processing inside the GridComponent based on its state.
* Provides an easy, built-in way to handle data operations like sorting, filtering, grouping, and paging.
*
* @default false
*
* @example
* ```vue
*
* ```
*/
autoProcessData?: boolean | {
filter?: boolean;
search?: boolean;
sort?: boolean;
group?: boolean;
page?: boolean;
};
/**
* Sets the Grid row key prop to the value of this field in the dataItem.
* If not set, the dataItem index will be used for the row key, which
* might lead to row not updated during paging or scrolling.
*/
dataItemKey?: string;
/**
* When set to `true` it sets the alternating of the rows per groups so each group could start
* with the same color row. There is a known limitation when virtual scrolling with groups and
* alternatePerGroup set to `true`- there may be a slight flicker of the alternating rows in
* groups with larger amount of items - in this case we would rather recommend
* using rowTemplates and set the row alternating based on the data or dataItems.
*/
alternatePerGroup?: boolean;
/**
* Sets the properties of the columns that are used by the Grid.
*/
columns?: GridColumnProps[] | null;
/**
* Sets the data of the Grid ([see example]({% slug paging_grid %})). If you use paging,
* the `data` option has to contain only the items for the current page.
*/
dataItems?: any[] | DataResult | null;
/**
* Defines a set of custom cell components that the Grid will render instead of the default cells.
*
* @example
* ```vue
*
* ```
*/
cells?: GridCellsSettings;
/**
* Defines a set of custom row components that the Grid will render instead of the default rows.
*
* @example
* ```vue
*
* ```
*/
rows?: GridRowsSettings;
/**
* Enables the sorting for the columns with their `field` option set
* ([see example]({% slug sorting_grid %})).
*/
sortable?: GridSortSettings;
/**
* Fires when the sorting of the Grid is changed ([see example]({% slug sorting_grid %})).
* You have to handle the event yourself and sort the data.
*/
onSortchange?: (event: GridSortChangeEvent) => void;
/**
* The descriptors by which the data is sorted.
* Applies the sorting styles and buttons to the affected columns.
*/
defaultSort?: SortDescriptor[];
/**
* The descriptors by which the data is sorted.
* Applies the sorting styles and buttons to the affected columns.
*/
sort?: SortDescriptor[];
/**
* Enables the row pinning feature.
* When `false` or omitted, the row pinning feature is inactive.
*
* @example
* ```vue
*
* ```
*/
pinnable?: boolean;
/**
* The array of data items pinned to the top of the Grid.
* Pinned rows remain visible while the body scrolls and are immune to filtering and pagination.
* Requires `pinnable={true}`.
*
* @example
* ```vue
*
* ```
*/
pinnedTopRows?: any[];
/**
* The array of data items pinned to the bottom of the Grid.
* Pinned rows remain visible while the body scrolls and are immune to filtering and pagination.
* Requires `pinnable={true}`.
*
* @example
* ```vue
*
* ```
*/
pinnedBottomRows?: any[];
/**
* The default `pinnedTopRows` state applied to the Grid when using uncontrolled mode.
* Requires `pinnable={true}`.
*
* @example
* ```vue
*
* ```
*/
defaultPinnedTopRows?: any[];
/**
* The default `pinnedBottomRows` state applied to the Grid when using uncontrolled mode.
* Requires `pinnable={true}`.
*
* @example
* ```vue
*
* ```
*/
defaultPinnedBottomRows?: any[];
/**
* Fires when a row is pinned, unpinned, or moved between pinned zones.
* Requires `pinnable={true}`.
*
* @example
* ```vue
*
* ```
*/
onRowpinchange?: (event: GridRowPinChangeEvent) => void;
/**
* Enables the filtering of the columns with their `field` option set
* ([more information and examples]({% slug filtering_grid %})).
*/
filterable?: boolean;
/**
* The descriptor by which the data is searched. Its first FilterDescriptor populates the GridSearchBox.
*
* @example
* ```vue
*
* ```
*/
search?: CompositeFilterDescriptor;
/**
* The descriptor by which the data is searched by default. Its first FilterDescriptor populates the GridSearchBox.
*
* @example
* ```vue
*
* ```
*/
defaultSearch?: CompositeFilterDescriptor;
/**
* Defines the fields of the data that are filtered by the GridSearchBox.
*
* @example
* ```vue
*
* ```
*/
searchFields?: (string | SearchField)[];
/**
* Fires when the search descriptor of the Grid is changed.
* You have to handle the event yourself and search the data.
*/
onSearchchange?: (event: GridSearchChangeEvent) => void;
/**
* The default descriptor by which the data is filtered
* ([more information and examples]({% slug filtering_grid %})).
*/
defaultFilter?: CompositeFilterDescriptor;
/**
* The descriptor by which the data is filtered
* ([more information and examples]({% slug filtering_grid %})).
* Affects the values and buttons in the `FilterRow` of the Grid.
*/
filter?: CompositeFilterDescriptor;
/**
* The filter operators for the Grid filters.
*/
filterOperators?: GridFilterOperators;
/**
* Fires when the Grid filter is modified through the UI
* ([more information and examples]({% slug filtering_grid %})).
* You have to handle the event yourself and filter the data.
*/
onFilterchange?: (event: GridFilterChangeEvent) => void;
/**
* The collection of column states of the grid.
*/
columnsState?: GridColumnState[];
/**
* The default collection of column states of the grid.
*/
defaultColumnsState?: GridColumnState[];
/**
* 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;
/**
* Globally overrides the default(three vertical dots) column menu icon for the whole Grid. If set, the prop can be overridden on column level using the ([menuIcon]({% slug api_grid_gridcolumnprops %}#toc-menuicon)) property.
*/
columnMenuIcon?: SVGIcon;
/**
* Controls the ColumnMenu animation. By default, the opening and closing animations are enabled.
*/
columnMenuAnimate?: boolean | PopupAnimation;
/**
* The descriptor by which the group is expanded.
*
* @example
* ```vue
*
* ```
*/
groupExpand?: GroupExpandDescriptor[];
/**
* The default `groupExpand` state applied to the Grid when using uncontrolled mode.
*
* @example
* ```vue
*
* ```
*/
defaultGroupExpand?: GroupExpandDescriptor[];
/**
* Fires when the user expands or collapses a group.
*/
onGroupexpandchange?: (event: GridGroupExpandChangeEvent) => void;
/**
* The descriptor by which the detail rows are expanded.
*
* @example
* ```vue
*
* ```
*/
detailExpand?: DetailExpandDescriptor;
/**
* The default `detailExpand` state applied to the Grid when using uncontrolled mode.
*
* @example
* ```vue
*
* ```
*/
defaultDetailExpand?: DetailExpandDescriptor;
/**
* Fires when the user expands or collapses a detail row.
*/
onDetailexpandchange?: (event: GridDetailExpandChangeEvent) => void;
/**
* The descriptors by which the data will be grouped
* ([more information and examples]({% slug groupingbasics_grid %})).
*/
group?: GroupDescriptor[];
/**
* The default `group` state applied to the Grid when using uncontrolled mode.
*
* @example
* ```vue
*
* ```
*/
defaultGroup?: GroupDescriptor[];
/**
* Fires when the grouping of the Grid is changed. You have to handle the event yourself and group the data
* ([more information and examples]({% slug groupingbasics_grid %})).
*/
onGroupchange?: (event: GridGroupChangeEvent) => void;
/**
* Configures the pager of the Grid ([see example]({% slug paging_grid %})).
*
* The available options are:
* - `buttonCount: Number`—Sets the maximum numeric buttons count before the buttons are collapsed.
* - `info: Boolean`—Toggles the information about the current page and the total number of records.
* - `type: PagerType`—Accepts the `numeric` (buttons with numbers)
* and `input` (input for typing the page number) values.
* - `pageSizes: Boolean` or `Array`—Shows a menu for selecting the page size.
* - `previousNext: Boolean`—Toggles the **Previous** and **Next** buttons.
*/
pageable?: GridPagerSettings | any;
/**
* Defines the page size that is used by the Grid pager
* ([see example]({% slug paging_grid %})). Required by the paging functionality.
*/
pageSize?: number;
/**
* Alias of the `pageSize` property. If `take` is set, `pageSize` will be ignored.
*/
take?: number;
/**
* The default `take` state applied to the Grid when using uncontrolled mode.
*
* @example
* ```vue
*
* ```
*/
defaultTake?: number;
/**
* Fires when the page of the Grid is changed ([see example]({% slug paging_grid %})).
* You have to handle the event yourself and page the data.
*/
onPagechange?: (event: GridPageChangeEvent) => void;
/**
* Defines the total number of data items in all pages
* ([see example]({% slug paging_grid %})). Required by the paging functionality.
*/
total?: number;
/**
* Defines the number of records that will be skipped by the pager
* ([see example]({% slug paging_grid %})). Required by the paging functionality.
*/
skip?: number;
/**
* The default `skip` state applied to the Grid when using uncontrolled mode.
*
* @example
* ```vue
*
* ```
*/
defaultSkip?: number;
/**
* Deprecated. Use 'onDetailexpandchange' or 'onGroupexpandchange' instead.
*/
onExpandchange?: (event: GridExpandChangeEvent) => void;
/**
* Determines if the scroll position will be updated after a data change.
* If set to `true`, the scroll will remain in the same position.
*/
fixedScroll?: boolean;
/**
*
* `obsolete` Will be removed in the next major release. Set `dataItemKey` property instead.
*
* Specifies the name of the field which will provide a Boolean representation
* of the expanded state of the item ([see example]({% slug detailrow_grid %}).
*/
expandField?: string;
/**
* `obsolete` Will be removed in the next major release. Use `selectable` instead.
*/
selectedField?: string;
/**
* Fires when the user tries to select or deselect a row
* ([see example]({% slug selection_grid %})).
*/
onSelectionchange?: (event: GridSelectionChangeEvent) => void;
/**
* The descriptor by which the highlight state of an item is defined.
* Passing a boolean value will highlight the whole row, while passing an object will highlight individual cells by their field.
*
*/
highlight?: {
[id: string]: boolean | {
[id: string]: boolean;
};
};
/**
* The default `select` state applied to the Grid when using uncontrolled mode.
*
* @example
* ```vue
*
* ```
*/
defaultSelect?: SelectDescriptor;
/**
* The [descriptor](https://www.telerik.com/kendo-vue-ui/components/datatools/api/selectdescriptor) by which the selected state of an item is defined.
* Passing a boolean value will select the whole row, while passing an array of strings will select individual.
*
* @example
* ```vue
*
* ```
*/
select?: SelectDescriptor;
/**
* The Grid selectable settings.
*
* @example
* ```vue
*
* ```
*/
selectable?: boolean | GridSelectableSettings;
/**
* Fires when the user clicks the checkbox of a column header whose `field` matches `selectedField`.
* ([see example]({% slug selection_grid %})).
*/
onHeaderselectionchange?: (event: GridHeaderSelectionChangeEvent) => void;
/**
* Fires when the user clicks a row.
*/
onRowclick?: (event: GridRowClickEvent) => void;
/**
* Fires when the user double clicks a row.
*/
onRowdblclick?: (event: GridRowClickEvent) => void;
/**
* Fires when the user clicks a cell.
*/
onCellclick?: (event: any) => void;
/**
* Fires when Grid is scrolled.
*/
onScroll?: (event: any) => void;
/**
* Fires when the user triggers an edit operation from a cell.
*/
onEdit?: (event: GridEditEvent) => void;
/**
* Fires when the user triggers a removal operation from a cell.
*/
onRemove?: (event: GridRemoveEvent) => void;
/**
* Fires when the user triggers a saving operation from a cell.
*/
onSave?: (event: GridSaveEvent) => void;
/**
* Fires when the user triggers a canceling operation from a cell.
*/
onCancel?: (event: GridCancelEvent) => void;
/**
* Fires when the user changes the values of the item.
* The event is not debounced and fires on every `onChange` event of the input in the current `EditCell`.
* ([more information and examples]({% slug editing_inline_grid %})).
*/
onItemchange?: (event: GridItemChangeEvent) => void;
/**
* Specifies the name of the field which will provide a Boolean representation of the edit state of the current
* item ([more information and examples]({% slug editing_inline_grid %})).
*/
editField?: string;
/**
* Enables the built-in row span feature of the Grid.
*
* @example
* ```vue
*
* ```
*/
rowSpannable?: boolean | GridRowSpannableSettings;
/**
* A function that returns a custom class applied to the row.
*
* @param item - the item for the row.
*/
rowClass?: Function;
/**
* Defines the scroll mode that is used by the Grid ([see example]({% slug scrollmmodes_grid %}).
*
* The available options are:
* - `none`—Renders no scrollbar.
* - `scrollable`—This is the default scroll mode. It requires the setting of the `height` option.
* - `virtual`—Displays no pager and renders a portion of the data (optimized rendering)
* while the user is scrolling the content.
*/
scrollable?: string;
/**
* Configures the `size` of the Grid.
*
* The available options are:
* - small
* - medium
*
* @default `undefined`
*/
size?: 'small' | 'medium' | string;
/**
* Defines the row height and forces an equal height to all rows
* ([see example]({% slug scrollmmodes_grid %})).
*/
rowHeight?: number;
/**
* Defines the height of the detail row and forces an equal height to all detail rows
*/
detailRowHeight?: number;
/**
* Specifies a custom rendering that will be cloned and rendered inside the detail rows
* of the currently expanded items ([see example]({% slug master_detail_grid %}).
* Accepts a Vue component, a `render` function, or a slot name.
* The expand will be active if the `dataItemKey` is set.
*/
detail?: null | any;
/**
* Defines the GridColumnProps of the expand column.
*/
expandColumn?: GridColumnProps;
/**
* Represents the `style` HTML attribute.
*/
style?: any;
/**
* Fires when the data state of the Grid is changed.
*/
onDatastatechange?: (event: GridDataStateChangeEvent) => void;
/**
* If set to `true`, the user can resize columns by dragging the edges (resize handles) of their
* header cells ([see example]({% slug resizing_columns_grid %}).
*/
resizable?: boolean;
/**
* If set to `true`, the user can reorder columns by dragging their
* header cells ([see example]({% slug reordering_columns_grid %}).
*/
reorderable?: boolean;
/**
* Determines if grouping by dragging and dropping the column headers is allowed
* ([more information and examples]({% slug groupingbasics_grid %})).
*/
groupable?: GridGroupableSettings | boolean;
/**
* Fires when a column is resized
*/
onColumnresize?: (event: GridColumnResizeEvent) => void;
/**
* Fires when columns are reordered.
*/
onColumnreorder?: (event: GridColumnReorderEvent) => void;
/**
* `obsolete` Will be removed in the next major release. Use 'rows' prop instead.
*/
rowRender?: string | boolean | ((h: any, defaultRendering: any | null, defaultSlots: any, props: any, listeners: any) => any);
/**
* `obsolete` Will be removed in the next major release. Use 'cells' prop instead.
*/
cellRender?: ((h: any, defaultRendering: any | null, props: GridCellProps, listeners: any) => any) | string | null | boolean;
/**
* `obsolete` Will be removed in the next major release. Use 'cells.filterCell' prop instead.
*/
filterCellRender?: ((h: any, defaultRendering: any | null, props: GridCellProps, listeners: any) => any) | string | any;
/**
* `obsolete` Will be removed in the next major release. Use 'cells.headerCell' prop instead.
*/
headerCellRender?: ((h: any, defaultRendering: any | null, props: GridCellProps, listeners: any) => any) | string | any;
/**
* Specifies whether the loader of the Grid will be displayed.
* Defaults to `false`.
*/
showLoader?: boolean;
/**
*
* The boolean option is `Deprecated`. Use 'showLoader' instead.
*
* Defines if the loader will be shown. Accepts a slot name, a `render` function, or a Vue component.
*/
loader?: Object | Function | string;
/**
* Defines if the group descriptor columns are locked (frozen or sticky).
* Locked columns are the columns that are visible at all times while the user scrolls the component horizontally.
* Defaults to `false`.
*
* @example
* ```vue
*
* ```
*/
lockGroups?: boolean;
/**
* Defines the custom rendering of the pager. Accepts a slot name, a `render` function, or a Vue component.
*/
pager?: Object | Function | string | boolean;
/**
* Enables virtualization of the columns. If virtualization is
* enabled, the columns outside the view are not rendered.
*/
columnVirtualization?: boolean;
/**
* Configures the context menu of the Grid. If set to `true`, the default context menu is rendered.
* Can be a `GridContextMenuOptions` object to configure head/body items separately,
* or a function that returns the configuration based on cell options.
*
* @example
* ```vue
*
* ```
*/
contextMenu?: boolean | GridContextMenuOptions | ((options: GridCellBaseOptions) => boolean | GridContextMenuOptions);
/**
* Fires when the context menu is activated on a cell.
*
* @example
* ```vue
*
* ```
*/
onContextmenu?: (event: GridContextMenuEvent) => void;
/**
* Fires when a context menu item is clicked.
*
* @example
* ```vue
*
* ```
*/
onContextmenuitemclick?: (event: GridContextMenuItemClickEvent) => void;
/**
* If set to `true`, the user can use dedicated shortcuts to interact with the Grid.
* By default, navigation is disabled and the Grid content is accessible in the normal tab sequence.
*/
navigatable?: boolean;
/**
* Deprecated. Not needed any more.
*/
topCacheCount?: number;
/**
* Deprecated. Not needed any more.
*/
totalGroupedHeight?: number;
/**
* Deprecated. Not needed any more.
*/
allGroupedItems?: DataResult | null;
/**
*
*`Deprecated` Use 'groupExpand' instead.
*
* Passes the collection of all collapsed groups for every grouped level.
*/
collapsedGroups?: any[][];
/**
* Deprecated. Not needed any more. Use 'dataItemKey' instead.
*/
uniqueField?: string;
/**
* Fires when Grid keyboard navigation position is changed.
*/
onNavigationaction?: (event: GridNavigationActionEvent) => void;
/**
* Fires when the user press keyboard key.
*/
onKeydown?: (event: GridKeyDownEvent) => void;
}