@progress/kendo-react-grid 10.2.0-develop.5 → 10.2.0-develop.7

package/index.d.mts

@@ -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;
     /**
@@ -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;
 }
@@ -2112,7 +2211,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 +2265,7 @@ export declare interface GridPagerSettings {
  * * `input`&mdash;Input for typing the page number.
  *
  * @example
- * ```tsx-no-run
+ * ```jsx-no-run
  *
  * <Grid
  *    pageable="{{
@@ -2182,10 +2281,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 +2308,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 +2582,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 +2726,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 +2774,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 +3043,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 +3100,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 +3115,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 +3154,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;
 }
@@ -2894,7 +3471,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}