@progress/kendo-vue-grid 7.0.3-develop.1 → 7.1.0-develop.2

package/index.d.mts

@@ -5,41 +5,55 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
+import { ColumnBaseProps } from '@progress/kendo-vue-data-tools';
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { CompositeFilterDescriptor } from '@progress/kendo-data-query';
+import { ComputedRef } from 'vue';
 import { DataResult } from '@progress/kendo-data-query';
 import { DefineComponent } from 'vue';
+import { DetailExpandDescriptor } from '@progress/kendo-vue-data-tools';
 import { ExtractPropTypes } from 'vue';
 import { GridCellProps as GridCellProps_2 } from '.';
 import { GridColumnMenuColumnProps } from '../interfaces/GridColumnMenuColumnProps';
-import { GridDataStateChangeEvent as GridDataStateChangeEvent_2 } from './interfaces/events';
+import { GridColumnState as GridColumnState_2 } from '.';
+import { GridDataStateChangeEvent as GridDataStateChangeEvent_2 } from '.';
+import { GridDetailExpandChangeEvent as GridDetailExpandChangeEvent_2 } from '.';
+import { GridExpandChangeEvent as GridExpandChangeEvent_2 } from '.';
 import { GridFilterCellProps as GridFilterCellProps_2 } from '..';
-import { GridFilterChangeEvent as GridFilterChangeEvent_2 } from './interfaces/events';
+import { GridFilterChangeEvent as GridFilterChangeEvent_2 } from '.';
 import { GridFilterOperator as GridFilterOperator_2 } from '../interfaces/GridFilterOperator';
 import { GridFilterOperators as GridFilterOperators_2 } from './interfaces/GridFilterOperators';
 import { GridFilterOperators as GridFilterOperators_3 } from '../interfaces/GridFilterOperators';
 import { GridGroupableSettings as GridGroupableSettings_2 } from '.';
-import { GridGroupChangeEvent as GridGroupChangeEvent_2 } from './interfaces/events';
-import { GridPageChangeEvent as GridPageChangeEvent_2 } from './interfaces/events';
+import { GridGroupChangeEvent as GridGroupChangeEvent_2 } from '.';
+import { GridGroupExpandChangeEvent as GridGroupExpandChangeEvent_2 } from '.';
+import { GridItemChangeEvent as GridItemChangeEvent_2 } from '.';
+import { GridPageChangeEvent as GridPageChangeEvent_2 } from '.';
 import { GridPagerSettings } from '@progress/kendo-vue-data-tools';
-import { GridSortChangeEvent as GridSortChangeEvent_2 } from './interfaces/events';
+import { GridSearchChangeEvent as GridSearchChangeEvent_2 } from '.';
+import { GridSortChangeEvent as GridSortChangeEvent_2 } from '.';
 import { GridSortSettings as GridSortSettings_2 } from '.';
 import { GridSortSettings as GridSortSettings_3 } from '..';
 import { GridSortSettings as GridSortSettings_4 } from '../interfaces/GridSortSettings';
 import { GroupDescriptor } from '@progress/kendo-data-query';
+import { GroupExpandDescriptor } from '@progress/kendo-vue-data-tools';
+import { GroupState } from '@progress/kendo-vue-data-tools';
 import { IntlService } from '@progress/kendo-vue-intl';
 import { JSX } from 'vue/jsx-runtime';
-import { Page } from '@progress/kendo-vue-data-tools';
 import { PopupAnimation } from '@progress/kendo-vue-popup';
 import { PropType } from 'vue';
 import { PublicProps } from 'vue';
 import { Ref } from 'vue';
+import { SearchField } from '@progress/kendo-vue-data-tools';
 import { SortDescriptor } from '@progress/kendo-data-query';
 import { State } from '@progress/kendo-data-query';
 import { SVGIcon } from '@progress/kendo-vue-common';
 import { SVGIcon as SVGIcon_2 } from '@progress/kendo-svg-icons';
 import { SvgIconAll } from '@progress/kendo-vue-common';
+import { TableExpandableSettings } from '@progress/kendo-vue-data-tools';
+import { TextBoxChangeEvent } from '@progress/kendo-vue-inputs';
+import { TextBoxProps } from '@progress/kendo-vue-inputs';
 
 /**
  * @hidden
@@ -49,7 +63,7 @@ export declare function applyExpandedState(sdata: DataResult, collapsed: any[],
 /**
  * @hidden
  */
-export declare function autoGenerateColumns(data: any[] | DataResult | null | undefined, group: GroupDescriptor[] | undefined, expandField: string | undefined, idInfo: {
+export declare function autoGenerateColumns(data: any[] | DataResult | null | undefined, group: GroupDescriptor[] | undefined, expandable: GridDetailExpandableSettings, idInfo: {
     prevId: number;
     idPrefix: string;
 }): ExtendedColumnProps[];
@@ -68,26 +82,32 @@ export declare interface DataItemWrapper {
     level: number;
     expanded: boolean;
     dataIndex: number;
+    group?: GroupState;
 }
 
 /**
  * @hidden
  */
 declare interface ExtendedColumnProps extends GridColumnProps {
-    id: string;
     declarationIndex: number;
     parentIndex: number;
-    colSpan: number;
     rowSpan: number;
     depth: number;
+    colSpan: number;
     kFirst?: boolean;
     index: number;
+    headerColSpan: number;
     children: ExtendedColumnProps[];
     left: number;
     right: number;
     rightBorder: boolean;
     ariaColumnIndex: number;
     isAccessible: boolean;
+    /** @hidden _internal usage only */
+    _type?: 'edit' | 'expand';
+    rowSpannable?: Required<GridRowSpannableSettings>;
+    defaultCell?: any;
+    defaultHeaderCell?: any;
 }
 
 /**
@@ -110,7 +130,7 @@ export declare const firefoxMaxHeight = 17895697;
  */
 export declare function flatData(output: Array<DataItemWrapper>, input: Array<any>, footer: 'always' | 'visible' | 'none', dataIndex: {
     index: number;
-}, groupDefined: boolean, field?: string, level?: number): number;
+}, groupDefined: boolean, expand?: DetailExpandDescriptor, groupExpand?: GroupExpandDescriptor[], defaultGroupExpand?: boolean, dataItemKey?: string, field?: string, level?: number, parentGroup?: GroupState | undefined): number;
 
 /**
  * @hidden
@@ -179,6 +199,26 @@ columns: PropType<ExtendedColumnProps[]>;
 rowIndex: PropType<number>;
 }>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
+/**
+ * @hidden
+ */
+export declare const getColSpan: (column: GridColumnProps, dataItem: any) => number;
+
+/**
+ * @hidden
+ */
+export declare const getColumnWidth: (column: ExtendedColumnProps) => string | undefined;
+
+/**
+ * @hidden
+ */
+export declare const getDataAsArray: (data: any[] | DataResult | null | undefined) => any[];
+
+/**
+ * @hidden
+ */
+export declare const getFlatColumnsState: (state: GridColumnState[]) => GridColumnState[];
+
 /**
  * @hidden
  */
@@ -192,7 +232,26 @@ export declare function getNestedValue(fieldName: string, dataItem: any): any;
 /**
  * @hidden
  */
+export declare const getRowSpanOptions: (rowSpannable?: boolean | GridRowSpannableSettings) => Required<GridRowSpannableSettings>;
+
+/**
+ * Represents the [KendoVue Grid component]({% slug overview_grid %}).
+ *
+ * @remarks
+ * Supported children components are: {@link GridColumn}, {@link GridToolbar}, {@link GridNoRecords}, {@link StatusBar}.
+ *
+ *
+ * export default App;
+ * ```
+ */
 export declare const Grid: DefineComponent<ExtractPropTypes<    {
+autoProcessData: PropType<boolean | {
+filter?: boolean;
+search?: boolean;
+sort?: boolean;
+group?: boolean;
+page?: boolean;
+}>;
 topCacheCount: {
 type: PropType<number>;
 default: number;
@@ -206,17 +265,34 @@ totalGroupedHeight: PropType<number>;
 allGroupedItems: PropType<DataResult>;
 alternatePerGroup: PropType<boolean>;
 columns: PropType<GridColumnProps[]>;
+columnsState: {
+type: PropType<GridColumnState_2[]>;
+default: () => any;
+};
+defaultColumnsState: {
+type: PropType<GridColumnState_2[]>;
+default: () => any;
+};
 columnVirtualization: PropType<boolean>;
 dataItems: PropType<any[] | DataResult>;
 sortable: PropType<GridSortSettings_2>;
+defaultSort: PropType<SortDescriptor[]>;
 sort: PropType<SortDescriptor[]>;
 filterable: PropType<boolean>;
 filterOperators: PropType<GridFilterOperators_2>;
 filterCellRender: PropType<any>;
 headerCellRender: PropType<any>;
+showLoader: {
+type: PropType<boolean>;
+default: any;
+};
 loader: PropType<string | boolean | Object | Function>;
+defaultFilter: PropType<CompositeFilterDescriptor>;
 filter: PropType<CompositeFilterDescriptor>;
-highlight: PropType<{
+defaultSearch: PropType<CompositeFilterDescriptor>;
+search: PropType<CompositeFilterDescriptor>;
+searchFields: PropType<(string | SearchField)[]>;
+highlight: PropType<    {
 [id: string]: boolean | {
 [id: string]: boolean;
 };
@@ -225,7 +301,9 @@ pageable: PropType<any>;
 pageSize: PropType<number>;
 total: PropType<number>;
 skip: PropType<number>;
+defaultSkip: PropType<number>;
 take: PropType<number>;
+defaultTake: PropType<number>;
 expandField: PropType<string>;
 expandColumn: PropType<GridColumnProps>;
 selectedField: PropType<string>;
@@ -234,7 +312,12 @@ rowRender: PropType<string | boolean | ((h: any, defaultRendering: any, defaultS
 resizable: PropType<boolean>;
 reorderable: PropType<boolean>;
 group: PropType<GroupDescriptor[]>;
+defaultGroup: PropType<GroupDescriptor[]>;
 groupable: PropType<boolean | GridGroupableSettings_2>;
+groupExpand: PropType<GroupExpandDescriptor[]>;
+defaultGroupExpand: PropType<GroupExpandDescriptor[]>;
+detailExpand: PropType<GroupExpandDescriptor>;
+defaultDetailExpand: PropType<GroupExpandDescriptor>;
 editField: PropType<string>;
 rowClass: PropType<Function>;
 scrollable: {
@@ -253,7 +336,7 @@ detail: PropType<any>;
 columnMenu: PropType<any>;
 columnMenuAnimate: {
 type: PropType<boolean | PopupAnimation>;
-default: () => true;
+default: () => boolean;
 };
 columnMenuIcon: DefineComponent<ExtractPropTypes<    {
 name: StringConstructor;
@@ -322,131 +405,26 @@ navigatable: {
 type: PropType<boolean>;
 default: boolean;
 };
-onItemchange: PropType<(event: GridItemChangeEvent) => void>;
-onExpandchange: PropType<(event: GridExpandChangeEvent) => void>;
+onItemchange: PropType<(event: GridItemChangeEvent_2) => void>;
+onExpandchange: PropType<(event: GridExpandChangeEvent_2) => void>;
 onDatastatechange: PropType<(event: GridDataStateChangeEvent_2) => void>;
 onPagechange: PropType<(event: GridPageChangeEvent_2) => void>;
 onSortchange: PropType<(event: GridSortChangeEvent_2) => void>;
 onFilterchange: PropType<(event: GridFilterChangeEvent_2) => void>;
 onGroupchange: PropType<(event: GridGroupChangeEvent_2) => void>;
-}>, {
-groupPanelDivRef: Ref<any, any>;
-dropElementClueRef: Ref<any, any>;
-dragElementClueRef: Ref<any, any>;
-headerRef: Ref<any, any>;
-footerRef: Ref<any, any>;
-gridNavRef: Ref<any, any>;
-colGroupRef: Ref<any, any>;
-scrollContainerRef: Ref<any, any>;
-scrollTableRef: Ref<any, any>;
-scrollTableBodyRef: Ref<any, any>;
-}, {
-isRtl: boolean;
-context: any;
-navigation: any;
-showLicenseWatermark: boolean;
-licenseMessage: any;
-notHiddenColumns: any[];
-}, {
-nonscrollableWrapperClass(): {
-[x: string]: any;
-'k-grid': boolean;
-'k-grid-md': boolean;
-};
-scrollableWrapperClass(): any;
-gridTableClass(): {
-[x: string]: any;
-'k-table': boolean;
-'k-grid-table': boolean;
-'k-grid-md': boolean;
-};
-getCorrectHeight(): any;
-currentGroupable(): any;
-computedCollapsed(): any[];
-getAriaRowCount(): any;
-getAriaColCount(): any;
-}, {
-getColumnsEssentialProps(columns: any[]): string;
-calculateMedia(): void;
-filterHiddenColumns(columns: GridColumnProps[]): GridColumnProps[];
-/**
-* A getter of the current columns. Gets the current column width or current columns,
-* or any other [`GridColumnProps`]({% slug api_grid_gridcolumnprops %}) for each defined column.
-* Can be used on each Grid instance. To obtain the instance of the rendered Grid, use the `ref`
-* callback. The following example demonstrates how to reorder the columns by dragging their handlers
-* and check the properties afterwards. You can check the result in the browser console.
-*/
-getColumns(): GridColumnProps[];
-setRefs(): void;
-gridUnmounted(): void;
-resetVirtual(): void;
-getVirtualScroll(): typeof VirtualScroll;
-isAllData(): boolean;
-initializeVirtualization(total: number): void;
-onSkipChanged(value: number, _oldValue: number): void;
-onTotalChanged(_value: number, _oldValue: number): void;
-onRowHeightChanged(_value: number, _oldValue: number): void;
-scrollHandler(event: any): void;
-rowClick(e: any, item: any): void;
-rowDoubleClick(e: any, item: any): void;
-loopGroupedItems(dataItems: any, func: any, level?: number, item?: any): any;
-updateGroupCollapsed(event: {
-dataItem: any;
-event: any;
-level: number;
-field?: string;
-value?: any;
-}): any;
-itemChange(event: {
-dataItem: any;
-event: any;
-field?: string;
-value?: any;
-}): void;
-cellClickHandler(event: any): void;
-cellKeydownHandler(event: any): void;
-editHandler(dataItem: any): void;
-removeHandler(dataItem: any): void;
-saveHandler(dataItem: any): void;
-cancelHandler(dataItem: any): void;
-selectionChangeHandler(options: {
-event: {
-event: any;
-};
-dataItem: any;
-dataIndex: number;
-columnIndex: number;
-}): void;
-onHeaderSelectionChangeHandler(event: any): void;
-pageChangeHandler(page: Page, event: any): void;
-sortChangeHandler(sort: SortDescriptor[], event: any): void;
-filterChangeHandler(filter: CompositeFilterDescriptor, event: any): void;
-groupChangeHandler(groups: GroupDescriptor[], event: any): void;
-raiseDataEvent(handler: string, data: {}, moreData: State, event: any): void;
-columnReorder(prev: number, next: number, event: any): void;
-groupReorder(prevIndex: number, nextIndex: number, event: any): void;
-columnToGroup(columnIndex: number, groupIndex: number, event: any): void;
-resetTableWidth(): void;
-onResize(index: number, newWidth: number, oldWidth: number, event: any, end: boolean): void;
-initColumns(columnElements: GridColumnProps[] | null | undefined, groupCount: number): void;
-resolveTitle(field: string): string;
-findColumnByField(field: string): any;
-searchColumn(column: any, field: String): any;
-getDataState(): {
-filter: any;
-sort: any;
-skip: any;
-take: any;
-group: any;
-};
-getArguments(event: any): {
-event: any;
-target: any;
-};
-getLeafDataItems(): any;
-totalGroupedRows(gridData: Array<any>): number;
-addSubItems(gridData: Array<any>, allRowsCount: number): number;
-}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
+onSearchchange: PropType<(event: GridSearchChangeEvent_2) => void>;
+onGroupexpandchange: PropType<(event: GridGroupExpandChangeEvent_2) => void>;
+onDetailexpandchange: PropType<(event: GridDetailExpandChangeEvent_2) => void>;
+}>, void, {}, {
+columnsWithTemplates(): any[];
+}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
+autoProcessData: PropType<boolean | {
+filter?: boolean;
+search?: boolean;
+sort?: boolean;
+group?: boolean;
+page?: boolean;
+}>;
 topCacheCount: {
 type: PropType<number>;
 default: number;
@@ -460,17 +438,34 @@ totalGroupedHeight: PropType<number>;
 allGroupedItems: PropType<DataResult>;
 alternatePerGroup: PropType<boolean>;
 columns: PropType<GridColumnProps[]>;
+columnsState: {
+type: PropType<GridColumnState_2[]>;
+default: () => any;
+};
+defaultColumnsState: {
+type: PropType<GridColumnState_2[]>;
+default: () => any;
+};
 columnVirtualization: PropType<boolean>;
 dataItems: PropType<any[] | DataResult>;
 sortable: PropType<GridSortSettings_2>;
+defaultSort: PropType<SortDescriptor[]>;
 sort: PropType<SortDescriptor[]>;
 filterable: PropType<boolean>;
 filterOperators: PropType<GridFilterOperators_2>;
 filterCellRender: PropType<any>;
 headerCellRender: PropType<any>;
+showLoader: {
+type: PropType<boolean>;
+default: any;
+};
 loader: PropType<string | boolean | Object | Function>;
+defaultFilter: PropType<CompositeFilterDescriptor>;
 filter: PropType<CompositeFilterDescriptor>;
-highlight: PropType<{
+defaultSearch: PropType<CompositeFilterDescriptor>;
+search: PropType<CompositeFilterDescriptor>;
+searchFields: PropType<(string | SearchField)[]>;
+highlight: PropType<    {
 [id: string]: boolean | {
 [id: string]: boolean;
 };
@@ -479,7 +474,9 @@ pageable: PropType<any>;
 pageSize: PropType<number>;
 total: PropType<number>;
 skip: PropType<number>;
+defaultSkip: PropType<number>;
 take: PropType<number>;
+defaultTake: PropType<number>;
 expandField: PropType<string>;
 expandColumn: PropType<GridColumnProps>;
 selectedField: PropType<string>;
@@ -488,7 +485,12 @@ rowRender: PropType<string | boolean | ((h: any, defaultRendering: any, defaultS
 resizable: PropType<boolean>;
 reorderable: PropType<boolean>;
 group: PropType<GroupDescriptor[]>;
+defaultGroup: PropType<GroupDescriptor[]>;
 groupable: PropType<boolean | GridGroupableSettings_2>;
+groupExpand: PropType<GroupExpandDescriptor[]>;
+defaultGroupExpand: PropType<GroupExpandDescriptor[]>;
+detailExpand: PropType<GroupExpandDescriptor>;
+defaultDetailExpand: PropType<GroupExpandDescriptor>;
 editField: PropType<string>;
 rowClass: PropType<Function>;
 scrollable: {
@@ -507,7 +509,7 @@ detail: PropType<any>;
 columnMenu: PropType<any>;
 columnMenuAnimate: {
 type: PropType<boolean | PopupAnimation>;
-default: () => true;
+default: () => boolean;
 };
 columnMenuIcon: DefineComponent<ExtractPropTypes<    {
 name: StringConstructor;
@@ -576,20 +578,26 @@ navigatable: {
 type: PropType<boolean>;
 default: boolean;
 };
-onItemchange: PropType<(event: GridItemChangeEvent) => void>;
-onExpandchange: PropType<(event: GridExpandChangeEvent) => void>;
+onItemchange: PropType<(event: GridItemChangeEvent_2) => void>;
+onExpandchange: PropType<(event: GridExpandChangeEvent_2) => void>;
 onDatastatechange: PropType<(event: GridDataStateChangeEvent_2) => void>;
 onPagechange: PropType<(event: GridPageChangeEvent_2) => void>;
 onSortchange: PropType<(event: GridSortChangeEvent_2) => void>;
 onFilterchange: PropType<(event: GridFilterChangeEvent_2) => void>;
 onGroupchange: PropType<(event: GridGroupChangeEvent_2) => void>;
+onSearchchange: PropType<(event: GridSearchChangeEvent_2) => void>;
+onGroupexpandchange: PropType<(event: GridGroupExpandChangeEvent_2) => void>;
+onDetailexpandchange: PropType<(event: GridDetailExpandChangeEvent_2) => void>;
 }>> & Readonly<{}>, {
 size: string;
 scrollable: string;
 navigatable: boolean;
-columnMenuAnimate: true;
+columnMenuAnimate: boolean;
 collapsedGroups: any[][];
 topCacheCount: number;
+columnsState: GridColumnState_2[];
+defaultColumnsState: GridColumnState_2[];
+showLoader: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
 /**
@@ -709,9 +717,6 @@ onCellkeydown?: (...args: any[] | unknown[]) => any;
 onCellclick?: (...args: any[] | unknown[]) => any;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
-/**
- * The props of the GridCell component.
- */
 /**
  * @hidden
  */
@@ -872,8 +877,24 @@ export declare interface GridCellProps {
      * The method for rendering the cell.
      */
     render?: any;
+    /** @hidden */
+    group?: GroupState;
 }
 
+/**
+ * Represents the properties of the callback used when spanning a column.
+ */
+declare type GridColSpanProps = {
+    /**
+     * Represents the properties of the spanned column.
+     */
+    column: GridColumnProps;
+    /**
+     * Represents the current row data item.
+     */
+    dataItem: any;
+};
+
 /**
  * @hidden
  */
@@ -1309,7 +1330,7 @@ declare interface GridColumnMenuSortBaseProps {
 /**
  * The props that can be assigned to the Grid column.
  */
-export declare interface GridColumnProps {
+export declare interface GridColumnProps extends Omit<ColumnBaseProps, 'cell'> {
     /**
      * The field to which the column is bound.
      */
@@ -1326,8 +1347,10 @@ export declare interface GridColumnProps {
     /**
      * Allows the column headers to be clicked and the `sortChange` event emitted.
      * You have to handle the `sortChange` event yourself and sort the data.
+     *
+     * @default true
      */
-    sortable?: boolean;
+    sortable?: GridColumnSortSettings;
     /**
      * Defines the custom rendering of the cell. Accepts a Vue component, a `render` function, or a slot name.
      * If not set, a `GridCell` will be rendered by default.
@@ -1347,20 +1370,28 @@ export declare interface GridColumnProps {
      */
     filterCell?: ((h: any, defaultRendering: any | null, props: GridFilterCellProps, listeners: any) => any) | string | any;
     /**
-     * Defines if a filter UI will be displayed for this column. Defaults to `true`.
+     * Defines if a filter UI will be rendered for this column.
+     *
+     * @default true
      */
     filterable?: boolean;
     /**
-     * Defines the filter type that is displayed inside the filter row.
-     * Defaults to `text`.
+     * Defines the title which will be set to the input element in the filter cell.
+     *
+     */
+    filterTitle?: string;
+    /**
+     * Defines the filter type that will be rendered inside the filter row.
+     *
+     * @default 'text'
      */
-    filter?: 'text' | 'numeric' | 'boolean' | 'date';
+    filter?: GridDataType;
     /**
-     * Defines the editor type. Used when the column enters the edit mode
-     * ([more information and examples]({% slug editing_inline_grid %})).
-     * Defaults to `text`.
+     * Defines the editor type. Used when the column enters the edit mode ([more information and examples]({% slug editing_inline_grid %})).
+     *
+     * @default 'text'
      */
-    editor?: 'text' | 'numeric' | 'boolean' | 'date';
+    editor?: GridDataType;
     /**
      * Overrides the default(three vertical dots) column menu icon or the icon set through the ([`columnMenuIcon`]({% slug api_grid_gridprops %}#toc-columnmenuicon)) property.
      */
@@ -1408,11 +1439,21 @@ export declare interface GridColumnProps {
      */
     format?: string;
     /**
-     * 	Controls the visibility of Grid's column. Defaults to `false`.
+     * 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.
+     *
+     * @default 1
+     */
+    colSpan?: number | ((colSpanProps: GridColSpanProps) => number);
+    /**
+     * Controls the visibility of the Grid's column.
+     *
+     * @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.
+     *
      */
     media?: string;
     /**
@@ -1463,6 +1504,17 @@ export declare interface GridColumnProps {
      * Defaults to `string`.
      */
     type?: 'string' | 'number' | 'boolean' | 'date';
+    /**
+     * Sets the type of the column and renders a dedicated column for interaction.
+     *
+     * @default "data"
+     */
+    columnType?: GridColumnType;
+    /**
+     * Defines if the cells of the column should be spanned when their values are the same.
+     *
+     */
+    rowSpannable?: boolean | GridRowSpannableSettings;
 }
 
 /**
@@ -1472,7 +1524,7 @@ export declare interface GridColumnReorderEvent {
     /**
      * An event target.
      */
-    target: any;
+    target: GridHandle;
     /**
      * A native DOM event.
      */
@@ -1536,6 +1588,65 @@ declare type GridColumnSortSettings = boolean | {
     allowUnsort?: boolean;
 };
 
+/**
+ * Represents the object of the `onColumnsStateChange` Grid event.
+ */
+export declare interface GridColumnsStateChangeEvent {
+    /**
+     * An event target.
+     */
+    target: GridHandle;
+    /**
+     * The columns state collection.
+     */
+    columnsState: GridColumnState[];
+}
+
+/**
+ * The state of the GridColumn
+ */
+export declare interface GridColumnState {
+    /**
+     * The id of the column.
+     */
+    id: string;
+    /**
+     * The field of the column.
+     */
+    field?: string;
+    /**
+     * The title of the column.
+     */
+    title?: string;
+    /**
+     * The value indicating whether a column is visible or not.
+     */
+    hidden?: boolean;
+    /**
+     * The width of the column (in pixels).
+     */
+    width?: string | number;
+    /**
+     * The position of the column.
+     */
+    orderIndex?: number;
+    /**
+     * A collection of child states.
+     */
+    children?: GridColumnState[];
+    /**
+     * Determines if the column is locked to the left or right side of the grid.
+     */
+    locked?: boolean;
+}
+
+/**
+ * Sets the column type.
+ *
+ * @default "data"
+ */
+declare type GridColumnType = 'data' | 'reorder' | 'checkbox';
+
 /**
  * The returned type of the `onDataStateChange` event.
  */
@@ -1546,6 +1657,26 @@ export declare interface GridDataStateChangeEvent extends GridEvent {
     data: State;
 }
 
+/**
+ * Exposes the data types available when setting the [filter](slug:api_grid_gridcolumnprops#toc-filter) or
+ * [editor](slug:api_grid_gridcolumnprops#toc-editor) property of the Grid columns.
+ */
+declare type GridDataType = 'text' | 'numeric' | 'boolean' | 'date';
+
+/** @hidden */
+declare interface GridDetailExpandableSettings extends TableExpandableSettings {
+}
+
+/**
+ * Represents the object of the `onDetailExpandChange` Grid event.
+ */
+export declare interface GridDetailExpandChangeEvent extends GridEvent {
+    /**
+     * The descriptor defining which detail rows are expanded.
+     */
+    detailExpand: DetailExpandDescriptor;
+}
+
 /**
  * @hidden
  */
@@ -1633,9 +1764,9 @@ dataIndex: PropType<number>;
 onCancel?: (...args: any[] | unknown[]) => any;
 onChange?: (...args: any[] | unknown[]) => any;
 onAdd?: (...args: any[] | unknown[]) => any;
+onEdit?: (...args: any[] | unknown[]) => any;
 onRemove?: (...args: any[] | unknown[]) => any;
 onCellkeydown?: (...args: any[] | unknown[]) => any;
-onEdit?: (...args: any[] | unknown[]) => any;
 onSave?: (...args: any[] | unknown[]) => any;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
@@ -1929,6 +2060,7 @@ dataIndex: PropType<number>;
 isSelected: PropType<boolean>;
 isRtl: PropType<boolean>;
 ariaColumnIndex: PropType<number>;
+group: PropType<GroupState>;
 render: PropType<any>;
 }>, {}, {}, {
 tdClass(): {
@@ -1936,6 +2068,7 @@ tdClass(): {
 'k-table-td': boolean;
 };
 }, {
+triggerStateChange(): void;
 triggerKeydown(event: any, expanded: boolean | undefined): void;
 clickHandler(e: any, dataItem: any, expanded: boolean | undefined): void;
 }, ComponentOptionsMixin, ComponentOptionsMixin, {
@@ -1959,6 +2092,7 @@ dataIndex: PropType<number>;
 isSelected: PropType<boolean>;
 isRtl: PropType<boolean>;
 ariaColumnIndex: PropType<number>;
+group: PropType<GroupState>;
 render: PropType<any>;
 }>> & Readonly<{
 onChange?: (...args: any[] | unknown[]) => any;
@@ -1975,6 +2109,54 @@ export declare interface GridGroupChangeEvent extends GridEvent {
     group: GroupDescriptor[];
 }
 
+/**
+ * Represents the object of the `onGroupExpandChange` Grid event.
+ */
+export declare interface GridGroupExpandChangeEvent extends GridEvent {
+    /**
+     * The descriptors defining which groups are expanded.
+     */
+    groupExpand: GroupExpandDescriptor[];
+}
+
+/**
+ * Represent the `ref` of the Grid component.
+ */
+declare interface GridHandle {
+    /**
+     * Returns the HTML element of the Grid component.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * The props values of the Grid.
+     */
+    props: GridProps;
+    /**
+     * A getter of the current columns. Gets the current column width or current columns, or any other [`GridColumnProps`]({% slug api_grid_gridcolumnprops %}) for each defined column. Can be used on each Grid instance. To obtain the instance of the rendered Grid, use the `ref` callback. The following example demonstrates how to reorder the columns by dragging their handlers and check the properties afterwards. You can check the result in the browser console.
+     *
+     */
+    columns: GridColumnProps[];
+    /**
+     * Method to allow the scroll to be set to a specific row index when the Grid is scrollable. It is zero based.
+     *
+     * @param options - Object, containing the rowIndex to which is going to be scrolled.
+     */
+    scrollIntoView: (options: {
+        rowIndex: number;
+    }) => void;
+    /**
+     * Method to fit columns according to their content.
+     *
+     * @param columnIds - Array of column ids to be fitted.
+     */
+    fitColumns: (columnIds: string[]) => void;
+    /**
+     * Method to trigger a PDF export of the Grid.
+     * The 'pdf' prop of the Grid should be set to true or object of setting that will be applied the exported Grid.
+     */
+    exportAsPdf: () => void;
+}
+
 /**
  * @hidden
  */
@@ -2077,6 +2259,7 @@ wrapperClass(): {
 'k-hierarchy-cell': boolean;
 };
 }, {
+triggerStateChange(): void;
 triggerKeydown(event: any, expanded: boolean | undefined): void;
 clickHandler(e: any, dataItem: any, expanded: boolean | undefined): void;
 }, ComponentOptionsMixin, ComponentOptionsMixin, {
@@ -2195,6 +2378,32 @@ export { GridPagerSettings }
  * Represents the props of the [native Vue Grid component by Kendo UI]({% slug overview_grid %}).
  */
 export declare interface GridProps {
+    /**
+     * 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
+     * ```jsx
+     * <Grid
+     *   autoProcessData={{
+     *     filter: true,
+     *     search: true,
+     *     sort: true,
+     *     group: true,
+     *     page: true
+     *   }}
+     * />
+     * ```
+     */
+    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
@@ -2228,6 +2437,11 @@ export declare interface GridProps {
      * 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.
@@ -2238,6 +2452,43 @@ export declare interface GridProps {
      * ([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
+     * <Grid :search="{ logic: 'and', filters: [{ field: 'name', operator: 'contains', value: 'test' }] }" />
+     * ```
+     */
+    search?: CompositeFilterDescriptor;
+    /**
+     * The descriptor by which the data is searched by default. Its first FilterDescriptor populates the GridSearchBox.
+     *
+     * @example
+     * ```vue
+     * <Grid :default-search="{ logic: 'or', filters: [{ field: 'category', operator: 'eq', value: 'electronics' }] }" />
+     * ```
+     */
+    defaultSearch?: CompositeFilterDescriptor;
+    /**
+     * Defines the fields of the data that are filtered by the GridSearchBox.
+     *
+     * @example
+     * ```vue
+     * <Grid :search-fields="['name', 'category']" />
+     * ```
+     */
+    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 %})).
@@ -2254,6 +2505,14 @@ export declare interface GridProps {
      * 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
@@ -2267,11 +2526,64 @@ export declare interface GridProps {
      * 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
+     * ```jsx
+     * <Grid :group-expand="[{ field: 'CategoryName', expanded: true }]" />
+     * ```
+     */
+    groupExpand?: GroupExpandDescriptor[];
+    /**
+     * The default `groupExpand` state applied to the Grid when using uncontrolled mode.
+     *
+     * @example
+     * ```jsx
+     * <Grid :default-group-expand="[{ field: 'CategoryName', expanded: true }]" />
+     * ```
+     */
+    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
+     * ```jsx
+     * <Grid :detail-expand="{ 1: true, 3: true }" />
+     * ```
+     */
+    detailExpand?: GroupExpandDescriptor;
+    /**
+     * The default `detailExpand` state applied to the Grid when using uncontrolled mode.
+     *
+     * @example
+     * ```jsx
+     * <Grid :default-detail-expand="{ 2: true, 4: true }" />
+     * ```
+     */
+    defaultDetailExpand?: GroupExpandDescriptor;
+    /**
+     * 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
+     * ```jsx
+     * <Grid defaultGroup={[{ field: 'CategoryName' }]} />
+     * ```
+     */
+    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 %})).
@@ -2298,6 +2610,15 @@ export declare interface GridProps {
      * 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
+     * ```jsx
+     * <Grid :default-take="20" />
+     * ```
+     */
+    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.
@@ -2313,11 +2634,23 @@ export declare interface GridProps {
      * ([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
+     * <Grid :default-skip="10" />
+     * ```
+     */
+    defaultSkip?: number;
     /**
      * Fires when the user tries to expand or collapse a row.
      */
     onExpandchange?: (event: GridExpandChangeEvent) => void;
     /**
+     *
+     * `obsolete` Will be removed in the next major release. Use `expandable` 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 %}).
      */
@@ -2484,6 +2817,11 @@ export declare interface GridProps {
      * Defines the custom rendering of the header cell. Accepts a Vue component, a `render` function, or a slot name.
      */
     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;
     /**
      * Defines if the loader will be shown. Defaults to `false`. Accepts a slot name, a `render` function, or a Vue component.
      */
@@ -2515,6 +2853,9 @@ export declare interface GridProps {
      */
     allGroupedItems?: DataResult | null;
     /**
+     *
+     *`obsolete` Will be removed in the next major release. Use 'groupExpand' instead.
+     *
      * Passes the collection of all collapsed groups for every grouped level.
      */
     collapsedGroups?: any[][];
@@ -2664,6 +3005,21 @@ export declare interface GridRowProps {
     dataIndex?: Number;
 }
 
+/**
+ * Represents the settings for the row-spanning functionality of the Grid.
+ */
+declare type GridRowSpannableSettings = {
+    /**
+     * Determines if the row-spanning functionality is enabled or disabled
+     */
+    enabled?: boolean;
+    /**
+     * A function that returns the value of the cell that should span the row.
+     * The value could be combined from multiple fields of the dataItem to create a unique identifier and prevent the cell from being row-spanned.
+     */
+    valueGetter?: (dataItem: any, field: string) => any;
+};
+
 /**
  * The type of the GridRow component.
  *
@@ -2684,6 +3040,53 @@ export declare interface GridSaveEvent {
     dataItem: any;
 }
 
+/**
+ * Represents the properties of the KendoVue GridSearchBox component.
+ */
+export declare const GridSearchBox: DefineComponent<ExtractPropTypes<    {
+onChange: FunctionConstructor;
+className: StringConstructor;
+placeholder: StringConstructor;
+}>, {
+handleChange: (event: TextBoxChangeEvent) => void;
+value: ComputedRef<string>;
+rootClassName: ComputedRef<    {
+'k-grid-search': boolean;
+'k-searchbox': boolean;
+}>;
+placeholder: ComputedRef<any>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
+onChange: FunctionConstructor;
+className: StringConstructor;
+placeholder: StringConstructor;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
+/**
+ * Represents the event object of the GridSearchBox `onChange` event.
+ */
+declare interface GridSearchBoxChangeEvent extends TextBoxChangeEvent {
+}
+
+/**
+ * Represents the props of the GridSearchBox component.
+ */
+export declare interface GridSearchBoxProps extends TextBoxProps {
+    /**
+     * Fires when the value of the search box is changed.
+     */
+    onChange?: (event: GridSearchBoxChangeEvent) => void;
+}
+
+/**
+ * Represents the object of the `onSearchChange` Grid event.
+ */
+export declare interface GridSearchChangeEvent extends GridEvent {
+    /**
+     * The new search based on the user action.
+     */
+    search: CompositeFilterDescriptor;
+}
+
 /**
  * Represents the object of the `onSelectionChange` event.
  */
@@ -2772,23 +3175,29 @@ export declare function groupedFirstItemValue(item: any, field: string): any;
  */
 export declare function isRtl(element: Element | null): boolean;
 
+/**
+ * @hidden
+ */
+export declare const isSorted: (field: string | undefined, sort?: SortDescriptor[]) => boolean;
+
 /**
  * @hidden
  */
 export declare function mapColumns(columns: Array<{
     parentIndex: number;
-    colSpan: number;
     rowSpan: number;
     depth: number;
     kFirst?: boolean;
     children: any[];
+    headerColSpan: number;
     width?: string | number;
     locked?: boolean;
     index: number;
     left: number;
     right: number;
     rightBorder: boolean;
-}>): number[][];
+    ariaColumnIndex: number;
+}>, changedColumnLength?: boolean): number[][];
 
 /**
  * @hidden
@@ -2804,96 +3213,19 @@ export declare const parsers: {
 /**
  * @hidden
  */
-export declare function readColumns(newColumns: GridColumnProps[] | null | undefined, oldColumns: GridColumnProps[], idInfo: {
+export declare function readColumns(elements: (GridColumnProps)[], columnsState: GridColumnState[], idInfo: {
     prevId: number;
     idPrefix: string;
-}, depth?: number): ExtendedColumnProps[];
+}, depth?: number, parentHidden?: boolean): ExtendedColumnProps[];
 
 /**
  * @hidden
  */
-declare class RowHeightService {
-    private total;
-    private offsets;
-    private heights;
-    constructor(total: number, rowHeight: number, detailRowHeight: number, data?: DataItemWrapper[]);
-    height(rowIndex: number): number;
-    index(position: number): number | undefined;
-    offset(rowIndex: number): number;
-    totalHeight(): number;
-}
+export declare const sanitizeColumns: (columns: ExtendedColumnProps[]) => GridColumnProps[];
 
 /**
  * Can be used to check if sorting is applied to a specific field ([see example]({% slug column_menu_grid %}#toc-styling-the-column-menu-icon)). Useful for creating active sort indicators.
  */
 export declare const sortGroupByField: (field: string, sort?: SortDescriptor[]) => boolean;
 
-/**
- * @hidden
- */
-declare class VirtualScroll implements VirtualScrollInterface {
-    table: HTMLTableElement | null;
-    containerHeight: number;
-    topCacheCount: number;
-    attendedSkip: number;
-    propsSkip: number;
-    total: number;
-    scrollableVirtual: boolean;
-    realSkip: number;
-    pageSize: number;
-    PageChange: (page: Page, event: any) => void;
-    tableBodyRef: any;
-    fixedScroll: boolean;
-    askedSkip: number | undefined;
-    containerRef: any;
-    tableTransform: string;
-    rowHeightService?: RowHeightService;
-    get container(): HTMLDivElement | null;
-    private prevScrollPos;
-    private tableTranslate;
-    private scrollSyncing;
-    constructor(cached: boolean, topCacheCount: number);
-    /**
-     * @return - The row heights in an array.
-     */
-    get rowHeights(): Array<{
-        line: number;
-        acc: number;
-    }>;
-    changePage(skip: number, e: any): void;
-    translate(dY: number): void;
-    reset(): void;
-    localScrollUp(e: any): void;
-    localScrollDown(e: any): void;
-    scrollNonStrict(e: any): void;
-    scrollHandler(e: any): void;
-    private topItems;
-    private horizontalScrollbarHeight;
-}
-
-/**
- * @hidden
- */
-declare interface VirtualScrollInterface {
-    PageChange: ((page: Page, e: any) => void) | null;
-    reset: () => void;
-    askedSkip: number | undefined;
-    total: number;
-    table: HTMLTableElement | null;
-    tableBodyRef: any;
-    fixedScroll: boolean;
-    realSkip: number;
-    pageSize: number;
-    scrollableVirtual: boolean;
-    propsSkip: number;
-    topCacheCount: number;
-    attendedSkip: number;
-    containerHeight: number;
-    containerRef: any;
-    tableTransform: string;
-    rowHeightService?: RowHeightService;
-    get container(): HTMLDivElement | null;
-    scrollHandler(e: any): void;
-}
-
 export { }