@progress/kendo-react-grid 10.1.1-develop.1 → 10.2.0-develop.10

package/index.d.ts

@@ -28,7 +28,7 @@ import { GroupState } from '@progress/kendo-react-data-tools';
 import { HeaderCellBaseProps } from '@progress/kendo-react-data-tools';
 import { HeaderThElementProps } from '@progress/kendo-react-data-tools';
 import { IntlService } from '@progress/kendo-react-intl';
-import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { JSX } from 'react/jsx-runtime';
 import { KendoReactComponentBaseProps } from '@progress/kendo-react-common';
 import { LocalizationService } from '@progress/kendo-react-intl';
 import { MenuItemModel } from '@progress/kendo-react-layout';
@@ -302,7 +302,7 @@ export declare const GRID_PREVENT_SELECTION_ELEMENT = "data-prevent-selection";
 /** The attribute required by the Grid selection on Grid `tr` elements. */
 export declare const GRID_ROW_INDEX_ATTRIBUTE = "data-grid-row-index";
 
-export declare const GridCell: (props: GridCellProps) => JSX_2.Element | null;
+export declare const GridCell: (props: GridCellProps) => JSX.Element | null;
 
 /**
  * Represents the `GridCellBaseOptions` object that are passed to the handler.
@@ -318,23 +318,23 @@ export declare interface GridCellBaseOptions {
  */
 export declare interface GridCellProps extends Omit<CellProps, 'onChange' | 'render'> {
     /**
-     * Zero-based index of the dataItem.
+     * The zero-based index of the data item in the data collection.
      */
     dataIndex: number;
     /**
-     * The index of the column in the rendered columns collection.
+     * The index of the column in the rendered columns collection. Optional.
      */
     columnIndex?: number;
     /**
-     * The number of rendered columns in the Grid.
+     * The total number of rendered columns in the Grid. Optional.
      */
     columnsCount?: number;
     /**
-     * Sets a set of cells components that the Grid will render instead of the built-in cell.
+     * Defines a set of custom cell components that the Grid will render instead of the default cell.
      */
     cells?: GridCellsSettings;
     /**
-     * The type of the row.
+     * Specifies the type of the row (e.g., data row, group header, etc.). Optional.
      */
     rowType?: GridRowType;
     /**
@@ -342,13 +342,13 @@ export declare interface GridCellProps extends Omit<CellProps, 'onChange' | 'ren
      */
     level?: number;
     /**
-     * The event that is fired when the cell is selected.
+     * Triggered when the cell is selected. Provides the event object.
      */
     selectionChange?: (event: {
         syntheticEvent: React.SyntheticEvent<any>;
     }) => void;
     /**
-     * The event that is fired when the cell value is changed.
+     * Triggered when the cell value is changed. Provides details about the change event.
      */
     onChange?: (event: {
         dataItem: any;
@@ -362,11 +362,13 @@ export declare interface GridCellProps extends Omit<CellProps, 'onChange' | 'ren
         _group?: GroupState;
     }) => void;
     /**
-     * The type of the editor which will be used when the cell is in edit mode.
+     * Specifies the type of editor to be used when the cell is in edit mode.
+     * Supported values are `text`, `numeric`, `boolean`, and `date`.
      */
     editor?: 'text' | 'numeric' | 'boolean' | 'date';
     /**
-     * A function for overriding the default rendering of the cell.
+     * A function to override the default rendering of the cell.
+     * Accepts the default rendering and props as arguments and returns a React element.
      */
     render?: (defaultRendering: React.ReactElement<HTMLTableCellElement> | null, props: GridCellProps) => React.ReactElement<HTMLTableCellElement> | null;
     /**
@@ -374,7 +376,8 @@ export declare interface GridCellProps extends Omit<CellProps, 'onChange' | 'ren
      */
     locked?: boolean | undefined;
     /**
-     * The event that is fired when the ContextMenu is activated.
+     * Triggered when the ContextMenu is activated on the cell.
+     * Provides the event object, data item, and field name.
      */
     onContextMenu?: (event: React.MouseEvent<HTMLElement>, dataItem: any, field?: string) => void;
     /**
@@ -486,7 +489,7 @@ declare interface GridColumnMenuBaseProps {
     onCloseMenu?: Function;
 }
 
-export declare const GridColumnMenuCheckboxFilter: (props: GridColumnMenuCheckboxFilterProps) => JSX_2.Element;
+export declare const GridColumnMenuCheckboxFilter: (props: GridColumnMenuCheckboxFilterProps) => JSX.Element;
 
 /**
  * The props of the GridColumnMenuFilter component.
@@ -663,7 +666,7 @@ export declare interface GridColumnMenuColumnsListProps {
  * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
-export declare const GridColumnMenuFilter: (props: GridColumnMenuFilterProps) => JSX_2.Element;
+export declare const GridColumnMenuFilter: (props: GridColumnMenuFilterProps) => JSX.Element;
 
 /**
  * The props passed to the ColumnMenu filter component.
@@ -690,7 +693,7 @@ declare interface GridColumnMenuFilterBaseProps extends GridColumnMenuBaseProps
 /**
  * @hidden
  */
-export declare const GridColumnMenuFilterCell: (props: GridColumnMenuFilterCellProps) => JSX_2.Element;
+export declare const GridColumnMenuFilterCell: (props: GridColumnMenuFilterCellProps) => JSX.Element;
 
 /**
  * @hidden
@@ -740,7 +743,7 @@ export declare interface GridColumnMenuFilterProps extends GridColumnMenuFilterB
 /**
  * @hidden
  */
-export declare const GridColumnMenuFilterUI: (props: GridColumnMenuFilterUIProps) => JSX_2.Element;
+export declare const GridColumnMenuFilterUI: (props: GridColumnMenuFilterUIProps) => JSX.Element;
 
 /**
  * The props that will be passed to the UI of the ColumnMenu filter component.
@@ -818,7 +821,7 @@ export declare interface GridColumnMenuFilterUIProps {
  * export default App;
  * ```
  */
-export declare const GridColumnMenuGroup: (props: GridColumnMenuGroupProps) => JSX_2.Element;
+export declare const GridColumnMenuGroup: (props: GridColumnMenuGroupProps) => JSX.Element;
 
 /**
  *  The props passed to the ColumnMenu group component.
@@ -847,12 +850,12 @@ declare interface GridColumnMenuGroupProps extends GridColumnMenuGroupBaseProps
 /**
  * The GridColumnMenuItem component that is used inside the Grid ColumnMenu.
  */
-export declare const GridColumnMenuItem: (props: GridColumnMenuItemProps) => JSX_2.Element;
+export declare const GridColumnMenuItem: (props: GridColumnMenuItemProps) => JSX.Element;
 
 /**
  * The GridColumnMenuItemContent that will be used inside the Grid ColumnMenu.
  */
-export declare const GridColumnMenuItemContent: (props: GridColumnMenuItemContentProps) => JSX_2.Element;
+export declare const GridColumnMenuItemContent: (props: GridColumnMenuItemContentProps) => JSX.Element;
 
 /**
  * The props of the GridColumnMenuItemContent component.
@@ -867,7 +870,7 @@ declare interface GridColumnMenuItemContentProps extends KendoReactComponentBase
 /**
  * The GridColumnMenuItemGroup that will be used inside the Grid ColumnMenu.
  */
-export declare const GridColumnMenuItemGroup: (props: GridColumnMenuItemGroupProps) => JSX_2.Element;
+export declare const GridColumnMenuItemGroup: (props: GridColumnMenuItemGroupProps) => JSX.Element;
 
 /**
  * The props of the GridColumnMenuItemGroup component.
@@ -959,7 +962,7 @@ export declare interface GridColumnMenuProps extends GridColumnMenuFilterBasePro
  * export default App;
  * ```
  */
-export declare const GridColumnMenuSort: (props: GridColumnMenuSortProps) => JSX_2.Element;
+export declare const GridColumnMenuSort: (props: GridColumnMenuSortProps) => JSX.Element;
 
 /**
  *  The props passed to the ColumnMenu sort component.
@@ -988,7 +991,7 @@ declare interface GridColumnMenuSortProps extends GridColumnMenuSortBaseProps {
 /**
  * The GridColumnMenuWrapper component.
  */
-export declare const GridColumnMenuWrapper: (props: GridColumnMenuWrapperProps) => JSX_2.Element;
+export declare const GridColumnMenuWrapper: (props: GridColumnMenuWrapperProps) => JSX.Element;
 
 /**
  * The props of the GridColumnMenuWrapper component.
@@ -1012,6 +1015,10 @@ export declare interface GridColumnProps extends Omit<ColumnBaseProps, 'cell'> {
      * 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;
@@ -1019,94 +1026,177 @@ export declare interface GridColumnProps extends Omit<ColumnBaseProps, 'cell'> {
      * 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]({% slug column_menu_grid %}#toc-basic-usage)).
+     *
+     * @example
+     * ```jsx
+     * <GridColumn columnMenu={CustomColumnMenu} />
+     * ```
      */
     columnMenu?: ComponentType<GridColumnMenuProps>;
     /**
-     * Specifies the contactMenu settings that will be applied to the column.
+     * 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]({% slug editing_inline_grid %})).
+     *
+     * @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]({% slug editing_inline_grid %})).
      *
+     * @example
+     * ```jsx
+     * <GridColumn editor="date" />
+     * ```
      * @default 'text'
      */
     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.
+     * Overrides the default (three vertical dots) column menu icon or the icon set through the ([`columnMenuIcon`]({% slug api_grid_gridprops %}#toc-columnmenuicon)) property.
+     *
+     * @example
+     * ```jsx
+     * <GridColumn menuIcon={CustomIcon} />
+     * ```
      */
     menuIcon?: SVGIcon;
     /**
-     * Sets the colSpan of the column which will make the row content to span over multiple cells.
-     * As arguments it takes either a number or a function that returns a number based on.
+     * 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 Grid's column.
+     * 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;
     /**
      * Defines the component that will be rendered as a cell. If not set, a `GridCell` will be rendered by default.
      *
      * @deprecated This prop is deprecated in favor of the ([cells]({% slug api_grid_gridcolumnprops %}#toc-cells)) prop. We’re removing this prop in version 11.0.0.
+     * @example
+     * ```jsx
+     * <GridColumn cell={CustomCell} />
+     * ```
      */
     cell?: ComponentType<GridCellProps>;
     /**
-     * Sets a set of cells components that the Grid will render instead of the built-in cell.
+     * 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;
     /**
      * Defines the component that will be rendered as a filter cell. If not set, a `GridFilterCell` will be rendered by default.
      *
      * @deprecated This prop is deprecated in favor of the ([cells]({% slug api_grid_gridcolumnprops %}#toc-cells)) prop. We’re removing this prop in version 11.0.0.
+     * @example
+     * ```jsx
+     * <GridColumn filterCell={CustomFilterCell} />
+     * ```
      */
     filterCell?: ComponentType<GridFilterCellProps>;
     /**
      * Defines the component that will be rendered as a header cell. If not set, a `GridHeaderCell` will be rendered by default.
      *
      * @deprecated This prop is deprecated in favor of the ([cells]({% slug api_grid_gridcolumnprops %}#toc-cells)) prop. We’re removing this prop in version 11.0.0.
+     * @example
+     * ```jsx
+     * <GridColumn headerCell={CustomHeaderCell} />
+     * ```
      */
     headerCell?: ComponentType<GridHeaderCellProps>;
     /**
@@ -1128,11 +1218,20 @@ export declare interface GridColumnProps extends Omit<ColumnBaseProps, 'cell'> {
     /**
      * Sets the type of the column and renders a dedicated column for interaction.
      *
+     * @example
+     * ```jsx
+     * <GridColumn columnType="checkbox" />
+     * ```
      * @default "data"
      */
     columnType?: GridColumnType;
     /**
      * Defines if the cells of the column should be spanned when their values are the same.
+     *
+     * @example
+     * ```jsx
+     * <GridColumn rowSpannable={true} />
+     * ```
      */
     rowSpannable?: boolean | GridRowSpannableSettings;
 }
@@ -1267,11 +1366,12 @@ export declare type GridColumnType = 'data' | 'reorder' | 'checkbox';
  * @hidden
  */
 export declare class GridCommonDragLogic {
-    refDragElementClue: React_2.RefObject<DragClue>;
-    refDropElementClue: React_2.RefObject<DropClue>;
+    refDragElementClue: React_2.RefObject<DragClue | null>;
+    refDropElementClue: React_2.RefObject<DropClue | null>;
     columns: ExtendedColumnProps[];
     reorderable: boolean;
     groupable: boolean;
+    dir: string | undefined;
     private startColumn;
     private startGroup;
     private currentColumn;
@@ -1301,7 +1401,7 @@ export declare class GridCommonDragLogic {
 /**
  * @hidden
  */
-export declare const GridContextMenu: (props: GridContextMenuProps) => JSX_2.Element;
+export declare const GridContextMenu: (props: GridContextMenuProps) => JSX.Element;
 
 /**
  * Represents the available types for the `GridContextMenuAnchorPart`.
@@ -1587,7 +1687,7 @@ declare interface GridEditableSettings extends TableEditableSettings {
 /**
  * @hidden
  */
-export declare const GridEditCell: (props: GridCellProps) => JSX_2.Element;
+export declare const GridEditCell: (props: GridCellProps) => JSX.Element;
 
 /**
  * Represents the object of the `onEditChange` Grid event.
@@ -1620,7 +1720,7 @@ export declare interface GridExpandChangeEvent extends GridEvent {
     dataIndex: number;
 }
 
-export declare const GridFilterCell: (props: GridFilterCellProps) => string | number | boolean | Iterable<React_2.ReactNode> | JSX_2.Element | null | undefined;
+export declare const GridFilterCell: (props: GridFilterCellProps) => string | number | bigint | boolean | Iterable<React_2.ReactNode> | Promise<string | number | bigint | boolean | React_2.ReactPortal | React_2.ReactElement<unknown, string | React_2.JSXElementConstructor<any>> | Iterable<React_2.ReactNode> | null | undefined> | JSX.Element | null | undefined;
 
 /**
  * The props of the GridFilterCell component
@@ -1795,7 +1895,7 @@ export declare interface GridGroupableSettings {
 /**
  * @hidden
  */
-export declare const GridGroupCell: (props: GridCellProps) => JSX_2.Element;
+export declare const GridGroupCell: (props: GridCellProps) => JSX.Element;
 
 /**
  * Represents the object of the `onGroupChange` Grid event.
@@ -1914,7 +2014,7 @@ export declare interface GridHandle {
  * export default App;
  * ```
  */
-export declare const GridHeaderCell: (props: GridHeaderCellProps) => string | number | boolean | Iterable<React_2.ReactNode> | JSX_2.Element | null | undefined;
+export declare const GridHeaderCell: (props: GridHeaderCellProps) => string | number | bigint | boolean | Iterable<React_2.ReactNode> | Promise<string | number | bigint | boolean | React_2.ReactPortal | React_2.ReactElement<unknown, string | React_2.JSXElementConstructor<any>> | Iterable<React_2.ReactNode> | null | undefined> | JSX.Element | null | undefined;
 
 /**
  * The props of the GridHeaderCell component
@@ -1960,7 +2060,7 @@ export declare interface GridHeaderSelectionChangeEvent extends GridEvent {
 /**
  * @hidden
  */
-export declare const GridHierarchyCell: (props: GridCellProps) => JSX_2.Element;
+export declare const GridHierarchyCell: (props: GridCellProps) => JSX.Element;
 
 /**
  * Represents the object of the `onItemChange` Grid event.
@@ -2086,7 +2186,7 @@ export declare interface GridNavigationActionEvent extends GridEvent {
  * ```
  */
 export declare const GridNoRecords: {
-    (props: GridNoRecordsProps): JSX_2.Element;
+    (props: GridNoRecordsProps): JSX.Element;
     displayName: string;
 };
 
@@ -2112,7 +2212,7 @@ export declare interface GridPageChangeEvent extends GridEvent {
  * The pager settings of the Grid ([see example]({% slug paging_grid %})).
  *
  * @example
- * ```tsx-no-run
+ * ```jsx-no-run
  *
  * <Grid
  *    pageable="{{
@@ -2166,7 +2266,7 @@ export declare interface GridPagerSettings {
  * * `input`&mdash;Input for typing the page number.
  *
  * @example
- * ```tsx-no-run
+ * ```jsx-no-run
  *
  * <Grid
  *    pageable="{{
@@ -2182,10 +2282,23 @@ declare type GridPagerType = 'numeric' | 'input';
  */
 export declare interface GridProps extends KendoReactComponentBaseProps {
     /**
-     * Enables data-processing inside the GridComponent based on it's state.
+     * 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;
@@ -2196,109 +2309,272 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
     };
     /**
      * 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.
+     * If not set, the dataItem index will be used for the row key, which might lead to rows not updating during paging or scrolling.
+     *
+     * @example
+     * ```jsx
+     * <Grid dataItemKey="id" />
+     * ```
      */
     dataItemKey?: string;
     /**
-     * Sets a class of the Grid DOM element.
+     * Sets a class for the Grid DOM element.
+     *
+     * @example
+     * ```jsx
+     * <Grid className="custom-grid-class" />
+     * ```
      */
     className?: string;
     /**
-     * Sets a set of custom components that the Grid will render instead of the built-in cell.
+     * Defines a set of custom cell components that the Grid will render instead of the default cells.
+     *
+     * @example
+     * ```jsx
+     * import { GridCustomCellProps } from '@progress/kendo-react-grid';
+     *
+     * const CustomCell = (props: GridCustomCellProps) => (
+     *   <td {...props.tdProps}>
+     *     {props.dataItem[props.field]}
+     *   </td>
+     * );
+     *
+     * <Grid
+     *   cells={{
+     *     data: CustomCell
+     *   }}
+     * />
+     * ```
      */
     cells?: GridCellsSettings;
     /**
-     * Sets a set of custom components that the Grid will render instead of the built-in row.
+     *
+     * @example
+     * ```jsx
+     * import { GridCustomRowProps } from '@progress/kendo-react-grid';
+     *
+     * const CustomRow = (props: GridCustomRowProps) => (
+     *   <tr {...props.trProps} style={{ backgroundColor: props.dataItem?.highlight ? 'yellow' : 'white' }}>
+     *     {props.children}
+     *   </tr>
+     * );
+     *
+     * <Grid
+     *   rows={{
+     *     data: CustomRow
+     *   }}
+     * />
+     * ```
      */
     rows?: GridRowsSettings;
     /**
      * 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. It takes values of type null, any or [DataResult]({% slug api_kendo-data-query_dataresult%})
+     * Accepts values of type `null`, `any[]`, or `DataResult`.
+     *
+     * @example
+     * ```jsx
+     * <Grid data={data} />
+     * ```
      */
     data?: any[] | DataResult | null;
     /**
-     * Enables the sorting for the columns with their `field` option set ([see example]({% slug sorting_grid %})).
+     * Enables sorting for the columns with their `field` option set.
+     * ([see example]({% slug sorting_grid %}))
+     *
+     * @example
+     * ```jsx
+     * <Grid sortable={true} />
+     * ```
      */
     sortable?: GridSortSettings;
     /**
-     * When set enables the clipboard copy, cut and paste manipulations. It takes values of type [ClipboardSettings]({% slug api_data-tools_clipboardsettings %}) or boolean.
+     * Enables clipboard copy, cut, and paste manipulations. Accepts `ClipboardSettings` or a boolean value.
+     *
+     * @example
+     * ```jsx
+     * <Grid clipboard={true}  />
+     * ```
      */
     clipboard?: ClipboardSettings | boolean;
     /**
-     * Fires when clipboard support is enabled and the one of the actions 'copy'. The event accepts type [GridClipboardEvent]({% slug api_data-tools_gridclipboardevent %}). Only fired when the Grid is run as a client component.
+     * Fires when clipboard support is enabled, and one of the actions (e.g., copy) is triggered.
+     * Accepts a `GridClipboardEvent` object.
+     *
+     * @example
+     * ```jsx
+     * <Grid
+     *   clipboard={true}
+     *   onClipboard={(event) => console.log('Clipboard action:', event.action)}
+     * />
+     * ```
      */
     onClipboard?: (event: GridClipboardEvent) => void;
     /**
-     * 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.
+     * Fires when the sorting of the Grid is changed. You must handle the event and sort the data.
+     * ([see example]({% slug sorting_grid %}))
+     *
+     * @example
+     * ```jsx
+     * <Grid
+     *   sortable={true}
+     *   onSortChange={(event) => console.log('Sort changed:', event.sort)}
+     * />
+     * ```
      */
     onSortChange?: (event: GridSortChangeEvent) => void;
     /**
      * The ([descriptors]({% slug api_kendo-data-query_sortdescriptor %})) by which the data is sorted. Applies the sorting styles and buttons to the affected columns.
+     *
+     * @example
+     * ```jsx
+     * <Grid sort={[{ field: 'name', dir: 'asc' }]} />
+     * ```
      */
     sort?: SortDescriptor[];
     /**
-     * The default `sort` state that will be applied to the Grid when using uncontrolled mode.
+     * The default `sort` state applied to the Grid when using uncontrolled mode.
+     * ([see example]({% slug sorting_grid %}))
+     *
+     * @example
+     * ```jsx
+     * <Grid defaultSort={[{ field: 'name', dir: 'asc' }]} />
+     * ```
      */
     defaultSort?: SortDescriptor[];
     /**
-     * Enables the filtering of the columns with their `field` option set ([more information and examples]({% slug filtering_grid %})).
+     * Enables filtering for the columns with their `field` option set.
+     *
+     * @example
+     * ```jsx
+     * <Grid filterable={true} />
+     * ```
      */
     filterable?: boolean;
     /**
-     * The [descriptor]({% slug api_kendo-data-query_compositefilterdescriptor %}) by which the data is filtered ([more information and examples]({% slug filtering_grid %})). This affects the values and buttons in the `FilterRow` of the Grid.
+     * The [descriptor]({% slug api_kendo-data-query_compositefilterdescriptor %}) by which
+     * the data is filtered ([more information and examples]({% slug filtering_grid %})). This affects
+     * the values and buttons in the `FilterRow` of the Grid.
+     *
+     * @example
+     * ```jsx
+     * <Grid filter={{ logic: 'and', filters: [{ field: 'name', operator: 'contains', value: 'John' }] }} />
+     * ```
      */
     filter?: CompositeFilterDescriptor;
     /**
-     * The default `filter` state that will be applied to the Grid when using uncontrolled mode.
+     * The default `filter` state applied to the Grid when using uncontrolled mode.
+     *
+     * @example
+     * ```jsx
+     * <Grid defaultFilter={{ logic: 'and', filters: [{ field: 'name', operator: 'contains', value: 'John' }] }} />
+     * ```
      */
     defaultFilter?: CompositeFilterDescriptor;
     /**
      * The filter operators for the Grid filters.
+     *
+     * @example
+     * ```jsx
+     * <Grid filterOperators={{ text: [{ text: 'grid.filterContainsOperator', operator: 'contains' }] }} />
+     * ```
      */
     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.
+     * Fires when the Grid filter is modified through the UI. You must handle the event and filter the data.
+     *
+     * @example
+     * ```jsx
+     * <Grid
+     *   filterable={true}
+     *   onFilterChange={(event) => console.log('Filter changed:', event.filter)}
+     * />
+     * ```
      */
     onFilterChange?: (event: GridFilterChangeEvent) => void;
     /**
-     * Specifies if the loader of the Grid will be displayed.
+     * Specifies whether the loader of the Grid will be displayed.
+     *
+     * @example
+     * ```jsx
+     * <Grid
+     *   showLoader={true}
+     *   loader={<div>Loading...</div>}
+     * />
+     * ```
      */
     showLoader?: boolean;
     /**
      * A custom component that the Grid will render instead of the built-in loader.
+     *
+     * @example
+     * ```jsx
+     * <Grid loader={<div>Custom Loader...</div>} />
+     * ```
      */
     loader?: React.ReactNode;
     /**
      * Fires when the user reorders a row.
+     *
+     * @example
+     * ```jsx
+     * <Grid onRowReorder={(event) => console.log('Row reordered:', event)} />
+     * ```
      */
     onRowReorder?: (event: GridRowReorderEvent) => void;
     /**
-     * Specifies a React element that will be cloned and rendered inside the column menu of the Grid. Can be overridden on column level.
+     * Specifies a React element that will be cloned and rendered inside the column menu of the Grid.
+     *
+     * @example
+     * ```jsx
+     * <Grid columnMenu={() => <div>Custom Column Menu</div>} />
+     * ```
      */
     columnMenu?: null | ComponentType<GridColumnMenuProps>;
     /**
-     * Specifies the contactMenu settings that will be applied to the Grid.
+     * Specifies the context menu settings applied to the Grid.
+     *
+     * @example
+     * ```jsx
+     * <Grid contextMenu={true} />
+     * ```
      */
     contextMenu?: boolean | GridContextMenuOptions | ((options: GridCellBaseOptions) => boolean | GridContextMenuOptions);
     /**
-     * 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.
+     * 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_2;
     /**
      * The [descriptors]({% slug api_kendo-data-query_groupdescriptor %})[] by which the data will be grouped
      * ([more information and examples]({% slug groupingbasics_grid %})).
+     *
+     * @example
+     * ```jsx
+     * <Grid group={[{ field: 'CategoryName' }]} />
+     * ```
      */
     group?: GroupDescriptor[];
     /**
-     * The default `group` state that will be applied to the Grid when using uncontrolled mode.
+     * 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 %})).
+     *
+     * @example
+     * ```jsx
+     * <Grid onGroupChange={(event) => console.log('Group changed:', event.group)} />
+     * ```
      */
     onGroupChange?: (event: GridGroupChangeEvent) => void;
     /**
-     * Configures the pager of the Grid ([see example]({% slug paging_grid %})).
+     * Configures the pager of the Grid. Accepts `GridPagerSettings` or a boolean value.([see example]({% slug paging_grid %}))
      *
      * The available options are:
      * - `buttonCount: Number`&mdash;Sets the maximum numeric buttons count before the buttons are collapsed.
@@ -2307,66 +2583,143 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
      * - `pageSizes: Boolean` or `Array<number>`&mdash;Shows a menu for selecting the page size.
      * - `previousNext: Boolean`&mdash;Toggles the **Previous** and **Next** buttons.
      * - `navigatable: Boolean`&mdash;Defines if the pager will be navigatable.
+     *
+     * @example
+     * ```jsx
+     * <Grid pageable={{ pageSizes: true }} />
+     * ```
      */
     pageable?: GridPagerSettings | boolean;
     /**
-     * Defines the page size that is used by the Grid pager ([see example]({% slug paging_grid %})). Required by the paging functionality.
+     * Defines the page size used by the Grid pager. Required for paging functionality.
+     *
+     * @example
+     * ```jsx
+     * <Grid pageSize={10} />
+     * ```
      */
     pageSize?: number;
     /**
-     * The pager component that the Grid will render instead of the built-in pager. It takes values of type null and ComponentType&lt;[PagerProps]({% slug api_data-tools_pagerprops %})&gt
+     * The pager component that the Grid will render instead of the built-in pager.
+     *  It takes values of type null and ComponentType&lt;[PagerProps]({% slug api_data-tools_pagerprops %})&gt
+     *
+     * @example
+     * ```jsx
+     * <Grid pager={() => <div>Custom Pager</div>} />
+     * ```
      */
     pager?: null | ComponentType<PagerProps>;
     /**
-     * Alias of `pageSize` property. If `take` is set, `pageSize` will be ignored.
+     * Alias for the `pageSize` property. If `take` is set, `pageSize` will be ignored.
+     *
+     * @example
+     * ```jsx
+     * <Grid take={20} />
+     * ```
      */
     take?: number;
     /**
-     * The default `take` state that will be applied to the Grid when using uncontrolled mode.
+     * The default `take` state applied to the Grid when using uncontrolled mode.
+     *
+     * @example
+     * ```jsx
+     * <Grid defaultTake={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.
+     * Fires when the page of the Grid is changed.
+     *
+     * @example
+     * ```jsx
+     * <Grid onPageChange={(event) => console.log('Page changed:', event.page)} />
+     * ```
      */
     onPageChange?: (event: GridPageChangeEvent) => void;
     /**
-     * Defines the total number of data items in all pages ([see example]({% slug paging_grid %})). Required by the paging functionality.
+     * Defines the total number of data items in all pages. Required for paging functionality.
+     *
+     * @example
+     * ```jsx
+     * <Grid total={100} />
+     * ```
      */
     total?: number;
     /**
      * Defines the number of records that will be skipped by the pager ([see example]({% slug paging_grid %})). Required by the paging functionality.
+     *
+     * @example
+     * ```jsx
+     * <Grid skip={10} />
+     * ```
      */
     skip?: number;
     /**
-     * The default `skip` state that will be applied to the Grid when using uncontrolled mode.
+     * The default `skip` state applied to the Grid when using uncontrolled mode.
+     *
+     * @example
+     * ```jsx
+     * <Grid defaultSkip={10} />
+     * ```
      */
     defaultSkip?: number;
     /**
-     * Determines if the scroll position will be updated after data change. If set to `true` the scroll will remain on the same position.
+     * 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;
     /**
-     * The [descriptor]({% slug api_data-tools_detailexpanddescriptor %}) by which the detail-row is expanded.
+     * The descriptor by which the detail row is expanded.
+     *
+     * @example
+     * ```jsx
+     * <Grid detailExpand={{ ['item-data-key-id']: true }} />
+     * ```
      */
     detailExpand?: DetailExpandDescriptor;
     /**
-     * The default `detailExpand` state that will be applied to the Grid when using uncontrolled mode.
+     * The default `detailExpand` state applied to the Grid when using uncontrolled mode.
+     *
+     * @example
+     * ```jsx
+     * <Grid defaultDetailExpand={{ ['item-data-key-id']: true }} />
+     * ```
      */
     defaultDetailExpand?: DetailExpandDescriptor;
     /**
-     * Fires when the user expand or collapse a detail-row.
+     * Fires when the user expands or collapses a detail row.
+     *
+     * @example
+     * ```jsx
+     * <Grid onDetailExpandChange={(event) => console.log('Detail expand changed:', event)} />
+     * ```
      */
     onDetailExpandChange?: (event: GridDetailExpandChangeEvent) => void;
     /**
-     * The [descriptor]({% slug api_data-tools_groupexpanddescriptor %}) by which the group is expanded.
+     * The descriptor by which the group is expanded.
+     *
+     * @example
+     * ```jsx
+     * <Grid groupExpand={[{ field: 'CategoryName', expanded: true }]} />
+     * ```
      */
     groupExpand?: GroupExpandDescriptor[];
     /**
-     * The default `groupExpand` state that will be applied to the Grid when using uncontrolled mode.
+     * The default `groupExpand` state applied to the Grid when using uncontrolled mode.
+     *
+     * @example
+     * ```jsx
+     * <Grid defaultGroupExpand={[{ field: 'CategoryName', expanded: true }]} />
+     * ```
      */
     defaultGroupExpand?: GroupExpandDescriptor[];
     /**
-     * Fires when the user expands or collapse a group.
+     * Fires when the user expands or collapses a group.
+     *
+     * @example
+     * ```jsx
+     * <Grid onGroupExpandChange={(event) => console.log('Group expand changed:', event)} />
+     * ```
      */
     onGroupExpandChange?: (event: GridGroupExpandChangeEvent) => void;
     /**
@@ -2374,26 +2727,45 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
      *
      * @deprecated This prop is deprecated in favor of the [onDetailExpandChange]({% slug api_grid_gridprops %}#toc-ondetailexpandchange) and [onGroupExpandChange]({% slug api_grid_gridprops %}#toc-ongroupexpandchange) props.
      * We’re removing this prop in version 11.0.0.
+     * ```
      */
     onExpandChange?: (event: GridExpandChangeEvent) => void;
     /**
+     * Specifies the name of the field which will provide a Boolean representation of the expanded state of the item.
+     *
      * Specifies the name of the field which will provide a Boolean representation of the expanded state of the item ([see example]({% slug detailrow_grid %})).
      *
      * @deprecated This prop is deprecated in favor of the ([detailExpand]({% slug api_grid_gridprops %}#toc-detailexpand)) and ([groupExpand]({% slug api_grid_gridprops %}#toc-groupexpand)) props.
      * We’re removing this prop in version 11.0.0.
+     * ```
      */
     expandField?: string;
     /**
      * The [descriptor]({% slug api_data-tools_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
+     * ```jsx
+     * <Grid select={{ ['item-data-key-id']: true }} />
+     * ```
      */
     select?: SelectDescriptor;
     /**
-     * The default `select` state that will be applied to the Grid when using uncontrolled mode.
+     * The default `select` state applied to the Grid when using uncontrolled mode.
+     *
+     * @example
+     * ```jsx
+     * <Grid defaultSelect={{ ['item-data-key-id']: true }} />
+     * ```
      */
     defaultSelect?: SelectDescriptor;
     /**
      * The Grid selectable settings.
+     *
+     * @example
+     * ```jsx
+     * <Grid selectable={{ enabled: true, mode: 'single' }} />
+     * ```
      */
     selectable?: boolean | GridSelectableSettings;
     /**
@@ -2403,120 +2775,247 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
      *
      * @deprecated This prop is deprecated in favor of the ([select]({% slug api_grid_gridprops %}#toc-select)) prop.
      * We’re removing this prop in version 11.0.0.
+     * ```
      */
     selectedField?: string;
     /**
      * Fires when the user tries to select or deselect a row or cell.
+     *
+     * @example
+     * ```jsx
+     * <Grid onSelectionChange={(event) => console.log('Selection changed:', event)} />
+     * ```
      */
     onSelectionChange?: (event: GridSelectionChangeEvent) => void;
     /**
-     * Fires when the user clicks the checkbox of a column header whose `field` matches `selectedField` ([more information and example]({% slug selection_grid %})).
+     * Fires when the user clicks the checkbox of a column header whose `field` matches `selectedField`.
+     *
+     * @example
+     * ```jsx
+     * <Grid onHeaderSelectionChange={(event) => console.log('Header selection changed:', event)} />
+     * ```
      */
     onHeaderSelectionChange?: (event: GridHeaderSelectionChangeEvent) => void;
     /**
      * Fires when the user clicks a row.
+     *
+     * @example
+     * ```jsx
+     * <Grid onRowClick={(event) => console.log('Row clicked:', event)} />
+     * ```
      */
     onRowClick?: (event: GridRowClickEvent) => void;
     /**
      * Fires when the user double clicks a row.
+     *
+     * @example
+     * ```jsx
+     * <Grid onRowDoubleClick={(event) => console.log('Row double clicked:', event)} />
+     * ```
      */
     onRowDoubleClick?: (event: GridRowDoubleClickEvent) => 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 %})).
+     * Fires when the user changes the values of the item.
+     *
+     * @example
+     * ```jsx
+     * <Grid onItemChange={(event) => console.log('Item changed:', event)} />
+     * ```
      */
     onItemChange?: (event: GridItemChangeEvent) => void;
     /**
-     * The [descriptor]({% slug api_data-tools_editdescriptor %}) by which the in-edit mode of an item is defined.
+     * The descriptor by which the in-edit mode of an item is defined.
+     *
+     * @example
+     * ```jsx
+     * <Grid edit={{ ['item-data-key-id']: true }} />
+     * ```
      */
     edit?: EditDescriptor;
     /**
-     * The default `edit` state that will be applied to the Grid when using uncontrolled mode.
+     * The default `edit` state applied to the Grid when using uncontrolled mode.
+     *
+     * @example
+     * ```jsx
+     * <Grid defaultEdit={{ ['item-data-key-id']: true }} />
+     * ```
      */
     defaultEdit?: EditDescriptor;
     /**
      * The Grid editable settings.
+     *
+     * @example
+     * ```jsx
+     * <Grid editable={{ enabled: true, mode: 'inline' }} />
+     * ```
      */
     editable?: boolean | GridEditableSettings;
     /**
      * Fires when the user enters or exits an in-edit mode of a row or cell.
+     *
+     * @example
+     * ```jsx
+     * <Grid onEditChange={(event) => console.log('Edit changed:', event)} />
+     * ```
      */
     onEditChange?: (event: GridEditChangeEvent) => 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 %})).
+     * 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 %})).
      *
-     * @deprecated This prop is deprecated in favor of the ([edit]({% slug api_grid_gridprops %}#toc-edit)) prop.
-     * We’re removing this prop in version 11.0.0.
+     * @example
+     * ```jsx
+     * <Grid editField="inEdit" />
+     * ```
      */
     editField?: string;
     /**
      * Defines the scroll mode that is used by the Grid ([see example]({% slug scrollmodes_grid %})).
      *
-     * The available options are:
+     *  The available options are:
      *  - `none`&mdash;Renders no scrollbar.
      *  - `scrollable`&mdash;This is the default scroll mode. It requires the setting of the `height` option.
      *  - `virtual`&mdash;Displays no pager and renders a portion of the data (optimized rendering) while the user is scrolling the content.
+     *
+     * @example
+     * ```jsx
+     * <Grid scrollable="virtual" />
+     * ```
      */
     scrollable?: ScrollMode;
     /**
      * Defines the row height and forces an equal height to all rows ([see example]({% slug scrollmodes_grid %})).
+     *
+     * @example
+     * ```jsx
+     * <Grid rowHeight={50} />
+     * ```
      */
     rowHeight?: number;
     /**
      * Defines the detail row height and forces an equal height to all detail rows.
+     *
+     * @example
+     * ```jsx
+     * <Grid detailRowHeight={100} />
+     * ```
      */
     detailRowHeight?: number;
     /**
-     * Specifies a React element that will be cloned and rendered inside the detail rows of the currently expanded items ([see example]({% slug hierarchy_grid %})). An item will be rendered as expanded if the value of its `expandField` is `true`.
+     * Specifies a React element that will be cloned and rendered inside the detail rows of the currently expanded items ([see example]({% slug hierarchy_grid %})).
+     *
+     * @example
+     * ```jsx
+     * <Grid detail={()=>(<div>Detail Content</div>)} />
+     * ```
      */
     detail?: null | ComponentType<GridDetailRowProps>;
     /**
-     * The [descriptor]({% slug api_kendo-data-query_compositefilterdescriptor %}) by which the data is searched. Its first FilterDescriptor populates the GridSearchBox.
+     * The descriptor by which the data is searched. Its first FilterDescriptor populates the GridSearchBox.
+     *
+     * @example
+     * ```jsx
+     * <Grid search={{ logic: 'and', filters: [{ field: 'name', operator: 'contains', value: 'test' }] }} />
+     * ```
      */
     search?: CompositeFilterDescriptor;
     /**
-     * The [descriptor]({% slug api_kendo-data-query_compositefilterdescriptor %}) by which the data is searched by default. Its first FilterDescriptor populates the GridSearchBox.
+     * The descriptor by which the data is searched by default. Its first FilterDescriptor populates the GridSearchBox.
+     *
+     * @example
+     * ```jsx
+     * <Grid defaultSearch={{ logic: 'or', filters: [{ field: 'category', operator: 'eq', value: 'electronics' }] }} />
+     * ```
      */
     defaultSearch?: CompositeFilterDescriptor;
     /**
      * Defines the fields of the data that are filtered by the GridSearchBox.
+     *
+     * @example
+     * ```jsx
+     * <Grid searchFields={['name', 'category']} />
+     * ```
      */
     searchFields?: (string | SearchField)[];
     /**
      * Fires when the search value of the GridSearchBox is changed.
+     *
+     * @example
+     * ```jsx
+     * <Grid onSearchChange={(event) => console.log('Search changed:', event)} />
+     * ```
      */
     onSearchChange?: (event: GridSearchChangeEvent) => void;
     /**
      * Represents the `style` HTML attribute.
+     *
+     * @example
+     * ```jsx
+     * <Grid style={{ backgroundColor: 'lightblue' }} />
+     * ```
      */
     style?: React.CSSProperties;
     /**
      * Fires when the data state of the Grid is changed ([more information]({% slug localoperations_grid %}) and [example]({% slug odataserveroperations_grid %})).
+     *
+     * @example
+     * ```jsx
+     * <Grid onDataStateChange={(event) => console.log('Data state changed:', event)} />
+     * ```
      */
     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 %})).
+     *
+     * @example
+     * ```jsx
+     * <Grid resizable={true} />
+     * ```
      */
     resizable?: boolean;
     /**
      * If set to `true`, the user can reorder columns by dragging their header cells ([see example]({% slug reordering_columns_grid %})).
+     *
+     * @example
+     * ```jsx
+     * <Grid reorderable={true} />
+     * ```
      */
     reorderable?: boolean;
     /**
      * Defines the row reorder settings.
      *
-     * @default false
+     * @example
+     * ```jsx
+     * <Grid rowReorderable={true} />
+     * ```
      */
     rowReorderable?: boolean | GridRowReorderSettings;
     /**
      * Determines if grouping by dragging and dropping the column headers is allowed ([more information and examples]({% slug groupingbasics_grid %})).
+     *
+     * @example
+     * ```jsx
+     * <Grid groupable={true} />
+     * ```
      */
     groupable?: GridGroupableSettings | boolean;
     /**
      * Fires when a column is resized. Only fired when the Grid is run as a client component.
+     *
+     * @example
+     * ```jsx
+     * <Grid onColumnResize={(event) => console.log('Column resized:', event)} />
+     * ```
      */
     onColumnResize?: (event: GridColumnResizeEvent) => void;
     /**
      * Fires when the columns are reordered.
+     *
+     * @example
+     * ```jsx
+     * <Grid onColumnReorder={(event) => console.log('Column reordered:', event)} />
+     * ```
      */
     onColumnReorder?: (event: GridColumnReorderEvent) => void;
     /**
@@ -2545,23 +3044,48 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
     headerCellRender?: (defaultRendering: React.ReactNode | null, props: GridHeaderCellProps) => React.ReactNode;
     /**
      * Fires when Grid is scrolled. Only fired when the Grid is run as a client component.
+     *
+     * @example
+     * ```jsx
+     * <Grid onScroll={(event) => console.log('Grid scrolled:', event)} />
+     * ```
      */
     onScroll?: (event: GridEvent) => void;
     /**
      * Enables virtualization of the columns. If virtualization is enabled, the columns outside the view are not rendered.
+     *
+     * @example
+     * ```jsx
+     * <Grid columnVirtualization={true} />
+     * ```
      */
     columnVirtualization?: boolean;
     /**
      * 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.
+     *
+     * @example
+     * ```jsx
+     * <Grid navigatable={true} />
+     * ```
      */
     navigatable?: boolean | NavigatableSettings;
     /**
      * Fires when Grid keyboard navigation position is changed. Only fired when the Grid is run as a client component.
+     *
+     * @example
+     * ```jsx
+     * <Grid onNavigationAction={(event) => console.log('Navigation action:', event)} />
+     * ```
      */
     onNavigationAction?: (event: GridNavigationActionEvent) => void;
     /**
      * Fires when the user press keyboard key. Only fired when the Grid is run as a client component.
+     *
+     * @example
+     * ```jsx
+     * <Grid onKeyDown={(event) => console.log('Key pressed:', event)} />
+     * ```
      */
     onKeyDown?: (event: GridKeyDownEvent) => void;
     /**
@@ -2577,6 +3101,11 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
      * 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
+     * ```jsx
+     * <Grid lockGroups={true} />
+     * ```
      */
     lockGroups?: boolean;
     /**
@@ -2587,18 +3116,37 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
      * - medium
      *
      * @default `medium`
+     * @example
+     * ```jsx
+     * <Grid size="small" />
+     * ```
      */
     size?: 'small' | 'medium';
     /**
      * The event that is fired when the ContextMenu is activated. Only fired when the Grid is run as a client component.
+     *
+     * @example
+     * ```jsx
+     * <Grid onContextMenu={(event) => console.log('Context menu activated:', event)} />
+     * ```
      */
     onContextMenu?: (event: GridContextMenuEvent) => void;
     /**
      * The event that is fired when the ContextMenu item is clicked. Only fired when the Grid is run as a client component.
+     *
+     * @example
+     * ```jsx
+     * <Grid onContextMenuItemClick={(event) => console.log('Context menu item clicked:', event)} />
+     * ```
      */
     onContextMenuItemClick?: (event: GridContextMenuItemClickEvent) => void;
     /**
      * Sets the `id` property of the top div element of the component.
+     *
+     * @example
+     * ```jsx
+     * <Grid id="custom-grid-id" />
+     * ```
      */
     id?: string;
     /**
@@ -2607,28 +3155,58 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
     unstyled?: GridClassStructure;
     /**
      * Enables the built-in row span feature of the Grid.
+     *
+     * @example
+     * ```jsx
+     * <Grid rowSpannable={true} />
+     * ```
      */
     rowSpannable?: boolean | GridRowSpannableSettings;
     /**
      * The collection of column states of the grid.
+     *
+     * @example
+     * ```jsx
+     * <Grid columnsState={[{ field: 'ProductName', locked: true }]} />
+     * ```
      */
     columnsState?: GridColumnState[];
     /**
      * The default columns state, used only for the initial load.
+     *
+     * @example
+     * ```jsx
+     * <Grid defaultColumnsState={[{ field: 'ProductName', locked: false }]} />
+     * ```
      */
     defaultColumnsState?: GridColumnState[];
     /**
      * Fires when the columns state of the Grid is changed.
+     *
+     * @example
+     * ```jsx
+     * <Grid onColumnsStateChange={(event) => console.log('Columns state changed:', event)} />
+     * ```
      */
     onColumnsStateChange?: (event: GridColumnsStateChangeEvent) => void;
     /**
      * Sets the locale of the Grid when used as a server component.
      * Have not effect when the Grid is used as a client component.
+     *
+     * @example
+     * ```jsx
+     * <Grid locale="en-US" />
+     * ```
      */
     locale?: string;
     /**
      * Sets the language of the Grid when used as a server component.
      * Have not effect when the Grid is used as a client component.
+     *
+     * @example
+     * ```jsx
+     * <Grid language="en" />
+     * ```
      */
     language?: string;
 }
@@ -2641,7 +3219,7 @@ export declare type GridReorderDropPosition = 'before' | 'after' | 'forbidden';
 /**
  * The component for each of the items in the `data` property which the Grid renders.
  */
-export declare const GridRow: (props: GridRowProps) => string | number | boolean | Iterable<React_2.ReactNode> | JSX_2.Element | null | undefined;
+export declare const GridRow: (props: GridRowProps) => string | number | bigint | boolean | Iterable<React_2.ReactNode> | Promise<string | number | bigint | boolean | React_2.ReactPortal | React_2.ReactElement<unknown, string | React_2.JSXElementConstructor<any>> | Iterable<React_2.ReactNode> | null | undefined> | JSX.Element | null | undefined;
 
 /**
  * Represents the object of the `onRowClick` Grid event.
@@ -2819,7 +3397,7 @@ export declare type GridRowType = 'groupFooter' | 'groupHeader' | 'data';
 /**
  * Represents the properties of the KendoReact GridSearchBox component.
  */
-export declare const GridSearchBox: (props: GridSearchBoxProps) => JSX_2.Element;
+export declare const GridSearchBox: (props: GridSearchBoxProps) => JSX.Element;
 
 export declare interface GridSearchBoxChangeEvent extends TextBoxChangeEvent {
 }
@@ -2860,7 +3438,7 @@ export declare interface GridSelectableSettings extends TableSelectableSettings
 /**
  * @hidden
  */
-export declare const GridSelectionCell: (props: GridCellProps) => JSX_2.Element;
+export declare const GridSelectionCell: (props: GridCellProps) => JSX.Element;
 
 /**
  * Represents the object of the `onSelectionChange` Grid event.
@@ -2894,7 +3472,7 @@ export declare interface GridSortChangeEvent extends GridEvent {
  * The sorting settings of the Grid ([see example]({% slug sorting_grid %})).
  *
  * @example
- * ```tsx-no-run
+ * ```jsx-no-run
  *
  * <Grid
  *    sortable={true}
@@ -2946,7 +3524,7 @@ export declare interface GridThAttributes extends HeaderThElementProps {
  * ```
  */
 export declare const GridToolbar: {
-    (props: GridToolbarProps): JSX_2.Element;
+    (props: GridToolbarProps): JSX.Element;
     displayName: string;
 };