@progress/kendo-react-grid 13.3.0-develop.2 → 13.3.0-develop.4

package/index.d.mts

@@ -315,7 +315,7 @@ export { getSelectedStateFromKeyDown }
 export declare const getStatusData: (args: StatusDataArgs) => StatusItem[];
 
 /**
- * Represents the [KendoReact Grid component]({% slug overview_grid %}).
+ * Represents the [KendoReact Grid component](https://www.telerik.com/kendo-react-ui/components/grid).
  *
  * @remarks
  * Supported children components are: {@link GridColumn}, {@link GridToolbar}, {@link GridNoRecords}, {@link StatusBar}.
@@ -775,7 +775,7 @@ export declare interface GridCellBaseOptions {
 
 /**
  * Represents the props of the GridCell component
- * ([more information]({% slug cells_grid %}#toc-grid-cells)).
+ * ([more information](https://www.telerik.com/kendo-react-ui/components/grid/cells#toc-grid-cells)).
  */
 export declare interface GridCellProps extends Omit<CellProps, 'onChange' | 'render'> {
     /**
@@ -918,7 +918,7 @@ export declare interface GridCellsSettings {
      */
     groupHeader?: ComponentType<GridCustomCellProps>;
     /**
-     * Custom component for rendering the data cell.
+     * Custom component for rendering the data cell in table layout mode.
      *
      * @example
      * ```tsx
@@ -927,6 +927,20 @@ export declare interface GridCellsSettings {
      * ```
      */
     data?: ComponentType<GridCustomCellProps>;
+    /**
+     * Custom component for rendering the data cell in stacked layout mode.
+     * When both `stackedData` and `data` are provided, `stackedData` takes precedence in stacked layout.
+     *
+     * @example
+     * ```tsx
+     * import { MyStackedDataCell } from './MyStackedDataCell';
+     * <Grid
+     *   stackedLayout={{ enabled: true }}
+     *   cells={{ stackedData: MyStackedDataCell }}
+     * />
+     * ```
+     */
+    stackedData?: ComponentType<GridStackedCustomCellProps>;
     /**
      * Custom component for rendering the group footer cell.
      *
@@ -1348,7 +1362,7 @@ export declare const GridColumnMenuFilter: (props: GridColumnMenuFilterProps) =>
  */
 declare interface GridColumnMenuFilterBaseProps extends GridColumnMenuBaseProps {
     /**
-     * The current filter state of the Grid.It takes value of type [CompositeFilterDescriptor]({% slug api_kendo-data-query_compositefilterdescriptor %})
+     * The current filter state of the Grid.It takes value of type [CompositeFilterDescriptor](https://www.telerik.com/kendo-react-ui/components/datatools/api/compositefilterdescriptor)
      */
     filter?: CompositeFilterDescriptor;
     /**
@@ -1405,7 +1419,7 @@ export declare interface GridColumnMenuFilterProps extends GridColumnMenuFilterB
     hideSecondFilter?: boolean;
     /**
      * Specifies a React element that will be cloned and rendered inside the UI of the column-menu filter component
-     * ([see example]({% slug column_menu_grid %}#toc-customizing-the-filter-component)).
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/grid/columns/column-menu#toc-customizing-the-filter-component)).
      */
     filterUI?: ComponentType<GridColumnMenuFilterUIProps>;
     /**
@@ -1510,7 +1524,7 @@ declare interface GridColumnMenuGroupBaseProps extends GridColumnMenuBaseProps {
      */
     groupable?: boolean;
     /**
-     * The current group state of the Grid. It takes value of type [GroupDescriptor]({% slug api_kendo-data-query_groupdescriptor %})[]
+     * The current group state of the Grid. It takes value of type [GroupDescriptor](https://www.telerik.com/kendo-react-ui/components/datatools/api/groupdescriptor)[]
      */
     group?: GroupDescriptor[];
     /**
@@ -1664,7 +1678,7 @@ declare interface GridColumnMenuSortBaseProps extends GridColumnMenuBaseProps {
      */
     sortable?: GridSortSettings;
     /**
-     * The current sort state of the Grid. It takes a value of type [SortDescriptor]({% slug api_kendo-data-query_sortdescriptor %})[]
+     * The current sort state of the Grid. It takes a value of type [SortDescriptor](https://www.telerik.com/kendo-react-ui/components/datatools/api/sortdescriptor)[]
      */
     sort?: SortDescriptor[];
     /**
@@ -1737,7 +1751,7 @@ export declare interface GridColumnProps extends Omit<ColumnBaseProps, 'cell' |
      */
     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)).
+     * Specifies a React element that will be cloned and rendered inside the column menu of the Grid ([see example](https://www.telerik.com/kendo-react-ui/components/grid/columns/column-menu#toc-basic-usage)).
      *
      * @example
      * ```jsx
@@ -1765,7 +1779,7 @@ export declare interface GridColumnProps extends Omit<ColumnBaseProps, 'cell' |
      */
     groupable?: boolean;
     /**
-     * Defines whether the column is editable ([more information and examples]({% slug editing_inline_grid %})).
+     * Defines whether the column is editable ([more information and examples](https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-inline)).
      *
      * @example
      * ```jsx
@@ -1803,7 +1817,7 @@ export declare interface GridColumnProps extends Omit<ColumnBaseProps, 'cell' |
      */
     filter?: GridDataType;
     /**
-     * Defines the editor type. Used when the column enters the edit mode ([more information and examples]({% slug editing_inline_grid %})).
+     * Defines the editor type. Used when the column enters the edit mode ([more information and examples](https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-inline)).
      *
      * @example
      * ```jsx
@@ -1827,7 +1841,7 @@ export declare interface GridColumnProps extends Omit<ColumnBaseProps, 'cell' |
      */
     validator?: FieldProps['validator'];
     /**
-     * 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`](https://www.telerik.com/kendo-react-ui/components/grid/api/gridprops#toc-columnmenuicon)) property.
      *
      * @example
      * ```jsx
@@ -2258,7 +2272,7 @@ export declare interface GridCustomFooterCellProps extends GridFooterCellProps {
  */
 export declare interface GridCustomHeaderCellProps extends GridHeaderCellProps {
     /**
-     * The props and attributes that are applied to the `th` element by default. The property should be used with the [HeaderThElement](slug:api_data-tools_headerthelement) component as demonstrated in [this example](slug:cells_grid#toc-group-header-group-footer-header-cell-footer-cell-filter-cell-and-data-cell).
+     * The props and attributes that are applied to the `th` element by default. The property should be used with the [HeaderThElement](https://www.telerik.com/kendo-react-ui/components/datatools/api/headerthelement) component as demonstrated in [this example](https://www.telerik.com/kendo-react-ui/components/grid/cells#toc-group-header-group-footer-header-cell-footer-cell-filter-cell-and-data-cell).
      */
     thProps?: GridThAttributes | null;
     /**
@@ -2285,23 +2299,31 @@ export declare interface GridCustomRowProps extends GridRowProps {
     children?: React.ReactNode | React.ReactNode[];
 }
 
+/**
+ * The data layout mode for the Grid.
+ *
+ * - `columns`: Traditional column-based table layout (default).
+ * - `stacked`: Card-based layout with field labels and values stacked vertically.
+ */
+export declare type GridDataLayoutMode = 'columns' | 'stacked';
+
 /**
  * Represents the object of the `onDataStateChange` Grid event.
  */
 export declare interface GridDataStateChangeEvent extends GridEvent {
     /**
-     * The [State]({% slug api_kendo-data-query_state %}) of the Grid based on the user action.
+     * The [State](https://www.telerik.com/kendo-react-ui/components/datatools/api/state) of the Grid based on the user action.
      */
     dataState: State;
     /**
-     * The [PagerTargetEvent]({% slug api_data-tools_pagertargetevent %}) that triggered the data state change.
+     * The [PagerTargetEvent](https://www.telerik.com/kendo-react-ui/components/datatools/api/pagertargetevent) that triggered the data state change.
      */
     targetEvent?: PagerTargetEvent;
 }
 
 /**
- * Exposes the data types available when setting the [filter](slug:api_grid_gridcolumnprops#toc-filter) or
- * [editor](slug:api_grid_gridcolumnprops#toc-editor) property of the Grid columns.
+ * Exposes the data types available when setting the [filter](https://www.telerik.com/kendo-react-ui/components/grid/api/gridcolumnprops#toc-filter) or
+ * [editor](https://www.telerik.com/kendo-react-ui/components/grid/api/gridcolumnprops#toc-editor) property of the Grid columns.
  */
 export declare type GridDataType = 'text' | 'numeric' | 'boolean' | 'date';
 
@@ -2350,7 +2372,7 @@ export declare interface GridDetailExpandChangeEvent extends GridEvent {
 export declare const GridDetailRow: (props: GridDetailRowProps) => null;
 
 /**
- * The props of the GridDetailRow component ([see example]({% slug detailrow_grid %})).
+ * The props of the GridDetailRow component ([see example](https://www.telerik.com/kendo-react-ui/components/grid/rows/detail)).
  */
 export declare interface GridDetailRowProps {
     /**
@@ -2425,8 +2447,8 @@ export declare const GridFilterCell: (props: GridFilterCellProps) => JSX.Element
 
 /**
  * The props of the GridFilterCell component
- * ([more information]({% slug cells_grid %}#toc-filter-cells)
- * and [example]({% slug filtering_grid %}#toc-custom-filter-cells)).
+ * ([more information](https://www.telerik.com/kendo-react-ui/components/grid/cells#toc-filter-cells)
+ * and [example](https://www.telerik.com/kendo-react-ui/components/grid/filtering#toc-custom-filter-cells)).
  */
 export declare interface GridFilterCellProps {
     /**
@@ -2488,7 +2510,7 @@ export declare interface GridFilterCellProps {
  */
 export declare interface GridFilterChangeEvent extends GridEvent {
     /**
-     * The new [CompositeFilterDescriptor]({% slug api_kendo-data-query_compositefilterdescriptor %}) based on the user action.
+     * The new [CompositeFilterDescriptor](https://www.telerik.com/kendo-react-ui/components/datatools/api/compositefilterdescriptor) based on the user action.
      */
     filter: CompositeFilterDescriptor;
 }
@@ -2550,7 +2572,7 @@ export declare interface GridFilterOperators {
 
 /**
  * The props of the GridFooterCell component
- * ([see example]({% slug cells_grid %}#toc-footer-cells)).
+ * ([see example](https://www.telerik.com/kendo-react-ui/components/grid/cells#toc-footer-cells)).
  */
 export declare interface GridFooterCellProps {
     /**
@@ -2572,7 +2594,7 @@ export declare interface GridFooterCellProps {
 }
 
 /**
- * The settings for grouping the data of the Grid ([see example]({% slug groupingaggregates_grid %})).
+ * The settings for grouping the data of the Grid ([see example](https://www.telerik.com/kendo-react-ui/components/grid/grouping/grouping)).
  */
 export declare interface GridGroupableSettings {
     /**
@@ -2601,7 +2623,7 @@ export declare const GridGroupCell: (props: {
  */
 export declare interface GridGroupChangeEvent extends GridEvent {
     /**
-     * An array of [GroupDescriptor]({% slug api_kendo-data-query_groupdescriptor %})[]  that corresponds to the user action.
+     * An array of [GroupDescriptor](https://www.telerik.com/kendo-react-ui/components/datatools/api/groupdescriptor)[]  that corresponds to the user action.
      */
     group: GroupDescriptor[];
 }
@@ -2644,7 +2666,7 @@ export declare interface GridHandle {
      */
     props: GridProps;
     /**
-     * A getter of the current columns. Gets the current column width or current columns, or any other [`GridColumnProps`]({% slug api_grid_gridcolumnprops %}) for each defined column. Can be used on each Grid instance. To obtain the instance of the rendered Grid, use the `ref` callback. The following example demonstrates how to reorder the columns by dragging their handlers and check the properties afterwards. You can check the result in the browser console.
+     * A getter of the current columns. Gets the current column width or current columns, or any other [`GridColumnProps`](https://www.telerik.com/kendo-react-ui/components/grid/api/gridcolumnprops) for each defined column. Can be used on each Grid instance. To obtain the instance of the rendered Grid, use the `ref` callback. The following example demonstrates how to reorder the columns by dragging their handlers and check the properties afterwards. You can check the result in the browser console.
      *
      * @example
      * ```jsx
@@ -2766,7 +2788,7 @@ export declare const GridHeaderCell: (props: GridHeaderCellProps) => JSX.Element
 
 /**
  * The props of the GridHeaderCell component
- * ([more information]({% slug cells_grid %}#toc-header-cells)).
+ * ([more information](https://www.telerik.com/kendo-react-ui/components/grid/cells#toc-header-cells)).
  */
 export declare interface GridHeaderCellProps extends Omit<HeaderCellBaseProps, 'render'> {
     /**
@@ -2784,7 +2806,7 @@ export declare interface GridHeaderCellProps extends Omit<HeaderCellBaseProps, '
  */
 export declare interface GridHeaderSelectionChangeEvent extends GridEvent {
     /**
-     * The new [SelectDescriptor]({% slug api_data-tools_selectdescriptor %}) based on the user action.
+     * The new [SelectDescriptor](https://www.telerik.com/kendo-react-ui/components/datatools/api/selectdescriptor) based on the user action.
      */
     select: SelectDescriptor;
     /**
@@ -3004,7 +3026,7 @@ export declare interface GridPageChangeEvent extends GridEvent {
 }
 
 /**
- * The pager settings of the Grid ([see example]({% slug paging_grid %})).
+ * The pager settings of the Grid ([see example](https://www.telerik.com/kendo-react-ui/components/grid/paging)).
  *
  * @example
  * ```jsx-no-run
@@ -3095,7 +3117,7 @@ export declare interface GridPdfExportButtonProps extends ButtonProps {
 }
 
 /**
- * Represents the props of the [KendoReact Grid component]({% slug overview_grid %}).
+ * Represents the props of the [KendoReact Grid component](https://www.telerik.com/kendo-react-ui/components/grid).
  */
 export declare interface GridProps extends KendoReactComponentBaseProps {
     /**
@@ -3130,7 +3152,7 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
      *
      * @example
      * ```jsx
-     * <Grid dataItemKey="id" />
+     * <Grid dataItemKey="ID" />
      * ```
      */
     dataItemKey?: string;
@@ -3185,7 +3207,7 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
      */
     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%})
+     * Sets the data of the Grid ([see example](https://www.telerik.com/kendo-react-ui/components/grid/paging)). 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](https://www.telerik.com/kendo-react-ui/components/datatools/api/dataresult)
      * Accepts values of type `null`, `any[]`, or `DataResult`.
      *
      * @example
@@ -3196,7 +3218,7 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
     data?: any[] | DataResult | null;
     /**
      * Enables sorting for the columns with their `field` option set.
-     * ([see example]({% slug sorting_grid %}))
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/grid/sorting))
      *
      * @example
      * ```jsx
@@ -3228,7 +3250,7 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
     onClipboard?: (event: GridClipboardEvent) => void;
     /**
      * Fires when the sorting of the Grid is changed. You must handle the event and sort the data.
-     * ([see example]({% slug sorting_grid %}))
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/grid/sorting))
      *
      * @example
      * ```jsx
@@ -3240,7 +3262,7 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
      */
     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.
+     * The ([descriptors](https://www.telerik.com/kendo-react-ui/components/datatools/api/sortdescriptor)) by which the data is sorted. Applies the sorting styles and buttons to the affected columns.
      *
      * @example
      * ```jsx
@@ -3250,7 +3272,7 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
     sort?: SortDescriptor[];
     /**
      * The default `sort` state applied to the Grid when using uncontrolled mode.
-     * ([see example]({% slug sorting_grid %}))
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/grid/sorting))
      *
      * @example
      * ```jsx
@@ -3268,8 +3290,8 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
      */
     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 [descriptor](https://www.telerik.com/kendo-react-ui/components/datatools/api/compositefilterdescriptor) by which
+     * the data is filtered ([more information and examples](https://www.telerik.com/kendo-react-ui/components/grid/filtering)). This affects
      * the values and buttons in the `FilterRow` of the Grid.
      *
      * @example
@@ -3369,7 +3391,7 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
     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.
+     *  using the ([menuIcon](https://www.telerik.com/kendo-react-ui/components/grid/api/gridcolumnprops#toc-menuicon)) property.
      */
     columnMenuIcon?: SVGIcon_2;
     /**
@@ -3381,8 +3403,8 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
      */
     adaptiveTitle?: string;
     /**
-     * The [descriptors]({% slug api_kendo-data-query_groupdescriptor %})[] by which the data will be grouped
-     * ([more information and examples]({% slug groupingbasics_grid %})).
+     * The [descriptors](https://www.telerik.com/kendo-react-ui/components/datatools/api/groupdescriptor)[] by which the data will be grouped
+     * ([more information and examples](https://www.telerik.com/kendo-react-ui/components/grid/grouping)).
      *
      * @example
      * ```jsx
@@ -3401,7 +3423,7 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
     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 %})).
+     * ([more information and examples](https://www.telerik.com/kendo-react-ui/components/grid/grouping)).
      *
      * @example
      * ```jsx
@@ -3410,7 +3432,7 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
      */
     onGroupChange?: (event: GridGroupChangeEvent) => void;
     /**
-     * Configures the pager of the Grid. Accepts `GridPagerSettings` or a boolean value.([see example]({% slug paging_grid %}))
+     * Configures the pager of the Grid. Accepts `GridPagerSettings` or a boolean value.([see example](https://www.telerik.com/kendo-react-ui/components/grid/paging))
      *
      * The available options are:
      * - `buttonCount: Number`&mdash;Sets the maximum numeric buttons count before the buttons are collapsed.
@@ -3441,7 +3463,7 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
     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
+     *  It takes values of type null and ComponentType&lt;[PagerProps](https://www.telerik.com/kendo-react-ui/components/datatools/api/pagerprops)&gt
      *
      * @example
      * ```jsx
@@ -3511,7 +3533,7 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
      */
     total?: number;
     /**
-     * Defines the number of records that will be skipped by the pager ([see example]({% slug paging_grid %})). Required by the paging functionality.
+     * Defines the number of records that will be skipped by the pager ([see example](https://www.telerik.com/kendo-react-ui/components/grid/paging)). Required by the paging functionality.
      *
      * @example
      * ```jsx
@@ -3592,7 +3614,7 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
      */
     onGroupExpandChange?: (event: GridGroupExpandChangeEvent) => void;
     /**
-     * The [descriptor]({% slug api_data-tools_selectdescriptor %}) by which the selected state of an item is defined.
+     * The [descriptor](https://www.telerik.com/kendo-react-ui/components/datatools/api/selectdescriptor) by which the selected state of an item is defined.
      * Passing a boolean value will select the whole row, while passing an array of strings will select individual.
      *
      * @example
@@ -3712,7 +3734,7 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
      */
     onEditChange?: (event: GridEditChangeEvent) => void;
     /**
-     * Defines the scroll mode that is used by the Grid ([see example]({% slug scrollmodes_grid %})).
+     * Defines the scroll mode that is used by the Grid ([see example](https://www.telerik.com/kendo-react-ui/components/grid/scroll-modes)).
      *
      *  The available options are:
      *  - `none`&mdash;Renders no scrollbar.
@@ -3726,7 +3748,7 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
      */
     scrollable?: ScrollMode;
     /**
-     * Defines the row height and forces an equal height to all rows ([see example]({% slug scrollmodes_grid %})).
+     * Defines the row height and forces an equal height to all rows ([see example](https://www.telerik.com/kendo-react-ui/components/grid/scroll-modes)).
      *
      * @example
      * ```jsx
@@ -3744,7 +3766,7 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
      */
     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 %})).
+     * Specifies a React element that will be cloned and rendered inside the detail rows of the currently expanded items ([see example](https://www.telerik.com/kendo-react-ui/components/grid/hierarchy)).
      *
      * @example
      * ```jsx
@@ -3798,7 +3820,7 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
      */
     style?: React.CSSProperties;
     /**
-     * Fires when the data state of the Grid is changed ([more information]({% slug localoperations_grid %}) and [example]({% slug odataserveroperations_grid %})).
+     * Fires when the data state of the Grid is changed ([more information](https://www.telerik.com/kendo-react-ui/components/grid/data-operations/local-operations) and [example](https://www.telerik.com/kendo-react-ui/components/grid/data-operations/odata-server-operations)).
      *
      * @example
      * ```jsx
@@ -3807,7 +3829,7 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
      */
     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 %})).
+     * If set to `true`, the user can resize columns by dragging the edges (resize handles) of their header cells ([see example](https://www.telerik.com/kendo-react-ui/components/grid/columns/resizing)).
      *
      * @example
      * ```jsx
@@ -3816,7 +3838,7 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
      */
     resizable?: boolean;
     /**
-     * If set to `true`, the user can reorder columns by dragging their header cells ([see example]({% slug reordering_columns_grid %})).
+     * If set to `true`, the user can reorder columns by dragging their header cells ([see example](https://www.telerik.com/kendo-react-ui/components/grid/columns/reordering)).
      *
      * @example
      * ```jsx
@@ -3834,7 +3856,7 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
      */
     rowReorderable?: boolean | GridRowReorderSettings;
     /**
-     * Determines if grouping by dragging and dropping the column headers is allowed ([more information and examples]({% slug groupingbasics_grid %})).
+     * Determines if grouping by dragging and dropping the column headers is allowed ([more information and examples](https://www.telerik.com/kendo-react-ui/components/grid/grouping)).
      *
      * @example
      * ```jsx
@@ -4018,6 +4040,76 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
      * ```
      */
     language?: string;
+    /**
+     * Specifies the data layout mode for the Grid.
+     *
+     * - `"columns"`: Traditional column-based table layout (default).
+     * - `"stacked"`: Card-based layout where each row displays as a vertical
+     *   stack of field label/value pairs. Useful for responsive layouts
+     *   and mobile devices.
+     *
+     * The stacked mode is independent of `adaptiveMode` and can be used separately.
+     *
+     * > Note: Row/column spanning is not supported in stacked mode.
+     *
+     * @default "columns"
+     *
+     * @example
+     * ```tsx
+     * // Traditional column layout (default)
+     * <Grid dataLayoutMode="columns" data={data}>
+     *   <GridColumn field="name" title="Name" />
+     *   <GridColumn field="email" title="Email" />
+     * </Grid>
+     *
+     * // Stacked card layout
+     * <Grid dataLayoutMode="stacked" data={data}>
+     *   <GridColumn field="name" title="Name" />
+     *   <GridColumn field="email" title="Email" />
+     * </Grid>
+     * ```
+     */
+    dataLayoutMode?: GridDataLayoutMode;
+    /**
+     * Configuration for the stacked layout mode.
+     * Only applicable when `dataLayoutMode="stacked"`.
+     *
+     * The `cols` property defines how stacked cells are arranged:
+     * - As a number: Creates that many equal-width columns
+     * - As an array: The length defines column count, values define widths
+     *
+     * @example
+     * ```tsx
+     * // Two-column stacked layout with equal widths
+     * <Grid
+     *   dataLayoutMode="stacked"
+     *   stackedLayoutSettings={{ cols: 2 }}
+     *   data={data}
+     * >
+     *   <GridColumn field="name" title="Name" />
+     *   <GridColumn field="email" title="Email" />
+     * </Grid>
+     *
+     * // Three columns with custom widths using fr units
+     * <Grid
+     *   dataLayoutMode="stacked"
+     *   stackedLayoutSettings={{ cols: ['1fr', '2fr', '1fr'] }}
+     *   data={data}
+     * >
+     *   ...
+     * </Grid>
+     *
+     * // Custom widths with pixel and fraction units
+     * <Grid
+     *   dataLayoutMode="stacked"
+     *   stackedLayoutSettings={{ cols: [{ width: 200 }, { width: '1fr' }] }}
+     *   data={data}
+     * >
+     *   ...
+     * </Grid>
+     * ```
+     */
+    stackedLayoutSettings?: GridStackedLayoutSettings;
 }
 
 /**
@@ -4288,7 +4380,7 @@ export declare const GridSelectionCell: (props: {
  */
 export declare interface GridSelectionChangeEvent extends GridEvent, TableSelectionChangeEvent<GridHandle> {
     /**
-     * The new [SelectDescriptor]({% slug api_data-tools_selectdescriptor %}) based on the user action.
+     * The new [SelectDescriptor](https://www.telerik.com/kendo-react-ui/components/datatools/api/selectdescriptor) based on the user action.
      */
     select: SelectDescriptor;
     /**
@@ -4306,13 +4398,13 @@ export declare interface GridSelectionChangeEvent extends GridEvent, TableSelect
  */
 export declare interface GridSortChangeEvent extends GridEvent {
     /**
-     * The new ([SortDescriptor]({% slug api_kendo-data-query_sortdescriptor %})) according to the user action.
+     * The new ([SortDescriptor](https://www.telerik.com/kendo-react-ui/components/datatools/api/sortdescriptor)) according to the user action.
      */
     sort: SortDescriptor[];
 }
 
 /**
- * The sorting settings of the Grid ([see example]({% slug sorting_grid %})).
+ * The sorting settings of the Grid ([see example](https://www.telerik.com/kendo-react-ui/components/grid/sorting)).
  *
  * @example
  * ```jsx-no-run
@@ -4325,6 +4417,128 @@ export declare interface GridSortChangeEvent extends GridEvent {
  */
 export declare type GridSortSettings = SortSettings;
 
+/**
+ * Defines the width of a column in the stacked layout.
+ */
+export declare interface GridStackedColSize {
+    /**
+     * The width of the column. Number values are treated as pixels.
+     * String values can be any valid CSS width (px, %, fr, etc.).
+     *
+     * @example
+     * ```tsx
+     * { width: 200 } // 200px
+     * { width: '1fr' } // 1 fraction unit
+     * { width: '50%' } // 50% of container
+     * ```
+     */
+    width?: string | number;
+}
+
+/**
+ * Props passed to custom cell components in stacked layout mode.
+ * Similar to GridCustomCellProps but adapted for stacked layout rendering.
+ *
+ * @hidden
+ */
+declare interface GridStackedCustomCellProps {
+    /**
+     * The data item for this row.
+     */
+    dataItem: any;
+    /**
+     * The field name from the column.
+     */
+    field?: string;
+    /**
+     * The column title.
+     */
+    title?: string;
+    /**
+     * The row type - always 'data' for stacked layout.
+     */
+    rowType: 'data';
+    /**
+     * The zero-based index of the data item in the data collection.
+     */
+    dataIndex?: number;
+    /**
+     * The index of the column in the visible columns collection.
+     */
+    columnIndex: number;
+    /**
+     * Indicates whether the row is selected.
+     */
+    isSelected?: boolean;
+    /**
+     * Indicates whether the cell is in edit mode.
+     */
+    isInEdit?: boolean;
+    /**
+     * Format string for the value.
+     */
+    format?: string;
+    /**
+     * Additional CSS class name.
+     */
+    className?: string;
+    /**
+     * The column type.
+     */
+    columnType?: string;
+    /**
+     * The props for the stacked cell container div.
+     * Use this to apply default props to your custom cell wrapper.
+     */
+    stackedCellProps: {
+        className: string;
+        'data-grid-col-index': number;
+        id?: string;
+        style?: React_2.CSSProperties;
+        tabIndex: number;
+        onClick?: (event: React_2.MouseEvent<HTMLElement>) => void;
+        onKeyDown?: (event: React_2.KeyboardEvent<HTMLElement>) => void;
+        onDoubleClick?: (event: React_2.MouseEvent<HTMLElement>) => void;
+        onContextMenu?: (event: React_2.MouseEvent<HTMLElement>) => void;
+        ref?: React_2.Ref<any>;
+        onFocus?: (event: React_2.FocusEvent<HTMLElement>) => void;
+    };
+    /**
+     * The default content (field value) that would be rendered.
+     */
+    children?: React_2.ReactNode;
+}
+
+/**
+ * Configuration for the stacked layout mode in the Grid.
+ *
+ * The stacked layout renders each data row as a card with field label/value pairs
+ * arranged in a CSS Grid layout.
+ */
+export declare interface GridStackedLayoutSettings {
+    /**
+     * Defines the number of columns in the stacked layout.
+     *
+     * - When a `number`, creates that many equal-width columns.
+     * - When an `array`, the length defines the column count and values define widths.
+     *
+     * @default 1
+     *
+     * @example
+     * ```tsx
+     * // Two equal columns
+     * <Grid stackedLayoutSettings={{ cols: 2 }} />
+     *
+     * // Three columns with custom widths using fr units
+     * <Grid stackedLayoutSettings={{ cols: ['1fr', '2fr', '1fr'] }} />
+     *
+     * // Two columns with pixel and fraction widths
+     * <Grid stackedLayoutSettings={{ cols: [{ width: 200 }, { width: '1fr' }] }} />
+     * ```
+     */
+    cols?: number | Array<number | string | GridStackedColSize>;
+}
+
 /**
  * Represents the attributes for Grid table cell elements, extending standard HTML td element properties.
  */
@@ -4558,7 +4772,7 @@ export declare interface GridToolbarAIAssistantProps {
      */
     gridAIPrompt?: CustomComponent<GridAIPromptProps>;
     /**
-     * Defines the icon rendered in the GridToolbarAIAssistant tool ([see example]({% slug overview_icon %})).
+     * Defines the icon rendered in the GridToolbarAIAssistant tool ([see example](https://www.telerik.com/kendo-react-ui/components/common/icon)).
      *
      * @example
      * ```jsx
@@ -4567,7 +4781,7 @@ export declare interface GridToolbarAIAssistantProps {
      */
     icon?: string;
     /**
-     * Defines the SVG icon rendered in the GridToolbarAIAssistant tool ([see example]({% slug overview_svgicon %})).
+     * Defines the SVG icon rendered in the GridToolbarAIAssistant tool ([see example](https://www.telerik.com/kendo-react-ui/components/common/svgicon)).
      *
      * @example
      * ```jsx
@@ -4646,7 +4860,7 @@ export declare interface GridToolbarCheckboxFilterProps {
      */
     data: Array<string | object>;
     /**
-     * Defines the icon rendered in the GridToolbarCheckboxFilter tool ([see example]({% slug overview_icon %})).
+     * Defines the icon rendered in the GridToolbarCheckboxFilter tool ([see example](https://www.telerik.com/kendo-react-ui/components/common/icon)).
      *
      * @example
      * ```jsx
@@ -4655,7 +4869,7 @@ export declare interface GridToolbarCheckboxFilterProps {
      */
     icon?: string;
     /**
-     * Defines the SVG icon rendered in the GridToolbarCheckboxFilter tool ([see example]({% slug overview_svgicon %})).
+     * Defines the SVG icon rendered in the GridToolbarCheckboxFilter tool ([see example](https://www.telerik.com/kendo-react-ui/components/common/svgicon)).
      *
      * @example
      * ```jsx
@@ -4724,7 +4938,7 @@ export declare const GridToolbarColumnsChooser: {
 
 export declare interface GridToolbarColumnsChooserProps {
     /**
-     * Defines the icon rendered in the GridToolbarSort tool ([see example]({% slug overview_icon %})).
+     * Defines the icon rendered in the GridToolbarSort tool ([see example](https://www.telerik.com/kendo-react-ui/components/common/icon)).
      *
      * @example
      * ```jsx
@@ -4733,7 +4947,7 @@ export declare interface GridToolbarColumnsChooserProps {
      */
     icon?: string;
     /**
-     * Defines the SVG icon rendered in the GridToolbarSort tool ([see example]({% slug overview_svgicon %})).
+     * Defines the SVG icon rendered in the GridToolbarSort tool ([see example](https://www.telerik.com/kendo-react-ui/components/common/svgicon)).
      *
      * @example
      * ```jsx
@@ -4772,7 +4986,7 @@ export declare const GridToolbarFilter: {
 
 export declare interface GridToolbarFilterProps {
     /**
-     * Defines the icon rendered in the GridToolbarFilter tool ([see example]({% slug overview_icon %})).
+     * Defines the icon rendered in the GridToolbarFilter tool ([see example](https://www.telerik.com/kendo-react-ui/components/common/icon)).
      *
      * @example
      * ```jsx
@@ -4781,7 +4995,7 @@ export declare interface GridToolbarFilterProps {
      */
     icon?: string;
     /**
-     * Defines the SVG icon rendered in the GridToolbarFilter tool ([see example]({% slug overview_svgicon %})).
+     * Defines the SVG icon rendered in the GridToolbarFilter tool ([see example](https://www.telerik.com/kendo-react-ui/components/common/svgicon)).
      *
      * @example
      * ```jsx
@@ -4797,7 +5011,7 @@ export declare interface GridToolbarFilterProps {
     hideSecondFilter?: boolean;
     /**
      * Specifies a React element that will be cloned and rendered inside the UI of the column-menu filter component
-     * ([see example]({% slug column_menu_grid %}#toc-customizing-the-filter-component)).
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/grid/columns/column-menu#toc-customizing-the-filter-component)).
      */
     filterUI?: ComponentType<GridColumnMenuFilterUIProps>;
     /**
@@ -4834,7 +5048,7 @@ export declare const GridToolbarGroup: {
 
 export declare interface GridToolbarGroupProps {
     /**
-     * Defines the icon rendered in the GridToolbarGroup tool ([see example]({% slug overview_icon %})).
+     * Defines the icon rendered in the GridToolbarGroup tool ([see example](https://www.telerik.com/kendo-react-ui/components/common/icon)).
      *
      * @example
      * ```jsx
@@ -4843,7 +5057,7 @@ export declare interface GridToolbarGroupProps {
      */
     icon?: string;
     /**
-     * Defines the SVG icon rendered in the GridToolbarGroup tool ([see example]({% slug overview_svgicon %})).
+     * Defines the SVG icon rendered in the GridToolbarGroup tool ([see example](https://www.telerik.com/kendo-react-ui/components/common/svgicon)).
      *
      * @example
      * ```jsx
@@ -4907,7 +5121,7 @@ export declare const GridToolbarSort: {
 
 export declare interface GridToolbarSortProps {
     /**
-     * Defines the icon rendered in the GridToolbarSort tool ([see example]({% slug overview_icon %})).
+     * Defines the icon rendered in the GridToolbarSort tool ([see example](https://www.telerik.com/kendo-react-ui/components/common/icon)).
      *
      * @example
      * ```jsx
@@ -4916,7 +5130,7 @@ export declare interface GridToolbarSortProps {
      */
     icon?: string;
     /**
-     * Defines the SVG icon rendered in the GridToolbarSort tool ([see example]({% slug overview_svgicon %})).
+     * Defines the SVG icon rendered in the GridToolbarSort tool ([see example](https://www.telerik.com/kendo-react-ui/components/common/svgicon)).
      *
      * @example
      * ```jsx
@@ -5022,12 +5236,12 @@ export declare function handleAIResponse(response: AxiosResponse<any>, currentSt
 declare type handler = (prevIndex: number, nextIndex: number, nativeEvent: any) => void;
 
 /**
- * Can be used to check if filtering is applied to a specific field ([see example]({% slug column_menu_grid %}#toc-styling-the-column-menu-icon)). Useful for creating active filter indicators.
+ * Can be used to check if filtering is applied to a specific field ([see example](https://www.telerik.com/kendo-react-ui/components/grid/columns/column-menu#toc-styling-the-column-menu-icon)). Useful for creating active filter indicators.
  */
 export declare const isColumnMenuFilterActive: (field: string, filter?: CompositeFilterDescriptor) => boolean;
 
 /**
- * Can be used to check if sorting is applied to a specific field ([see example]({% slug column_menu_grid %}#toc-styling-the-column-menu-icon)). Useful for creating active sort indicators.
+ * Can be used to check if sorting is applied to a specific field ([see example](https://www.telerik.com/kendo-react-ui/components/grid/columns/column-menu#toc-styling-the-column-menu-icon)). Useful for creating active sort indicators.
  */
 export declare const isColumnMenuSortActive: (field: string, sort?: SortDescriptor[]) => boolean;