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

package/interfaces/GridReorderDropDir.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The direction in which a row can be dragged and dropped.
+ */
+export type GridReorderDropPosition = 'before' | 'after' | 'forbidden';

package/interfaces/GridRowProps.d.ts

@@ -0,0 +1,75 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { KendoReactComponentBaseProps } from '@progress/kendo-react-common';
+import { GridRowType } from './GridRowType.js';
+import { GridRowsSettings } from './GridRowsSettings.js';
+/**
+ * The props that the Grid passes to the GridRow component when creating it. Accessible when passing a custom row to the `rows` prop of the Grid.
+ */
+export interface GridRowProps extends KendoReactComponentBaseProps {
+    /**
+     * The `data` object that represents the current row.
+     */
+    dataItem: any;
+    /**
+     * Indicates whether the row is an alternating row.
+     */
+    isAltRow: boolean;
+    /**
+     * Indicates whether the row has at least one edit cell.
+     */
+    isInEdit: boolean;
+    /**
+     * Indicates if the row is hidden. The hidden row is rendered above the visible area of the Grid. Occurs when the Grid uses virtualization and the row is on the current page. When `rowHeight` is set, `isHidden` is always `true`.
+     */
+    isHidden: boolean;
+    /**
+     * The event that is fired when the row is clicked.
+     */
+    onClick: any;
+    /**
+     * The event that is fired when the row is double clicked.
+     */
+    onDoubleClick: any;
+    /**
+     * Sets the height of the row.
+     */
+    rowHeight?: number;
+    /**
+     * The type of the row.
+     */
+    rowType: GridRowType;
+    /**
+     * Sets a set of rows components that the Grid will render instead of the built-in row.
+     */
+    rows?: GridRowsSettings;
+    /**
+     * The index to be applied to the `aria-rowindex` attribute.
+     */
+    ariaRowIndex?: number;
+    /**
+     * The index of the leaf dataItem in data. Used by selection.
+     */
+    dataIndex: number;
+    /**
+     * Indicates if the row is selected.
+     */
+    isSelected: boolean;
+    /**
+     * @hidden
+     */
+    isHighlighted?: boolean;
+    /**
+     * @hidden
+     */
+    absoluteRowIndex: number;
+    /**
+     * @hidden
+     */
+    isRowReorderable?: boolean;
+}

package/interfaces/GridRowReorderSettings.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Represents the settings for the row reordering functionality of the Grid.
+ */
+export type GridRowReorderSettings = {
+    /**
+     * Determines if the row reordering functionality is enabled.
+     *
+     * @default false
+     */
+    enabled?: boolean;
+    /**
+     * Determines what the text of the drag clue will be.
+     * Can also be a function giving the dataItem as an argument and returning a new custom drag clue as a ReactNode.
+     *
+     * Default value will be the text of the first visible data column of the row.
+     */
+    dragClue?: string | ((dataItem: any) => React.ReactNode);
+};

package/interfaces/GridRowSpannableSettings.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Represents the settings for the row-spanning functionality of the Grid.
+ */
+export type GridRowSpannableSettings = {
+    /**
+     * Determines if the row-spanning functionality is enabled or disabled
+     */
+    enabled?: boolean;
+    /**
+     * A function that returns the value of the cell that should span the row.
+     * The value could be combined from multiple fields of the dataItem to create a unique identifier and prevent the cell from being row-spanned.
+     */
+    valueGetter?: (dataItem: any, field: string) => any;
+};

package/interfaces/GridRowType.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The type of the GridRow component.
+ *
+ * The available values are:
+ * - `groupHeader`—The row is a group header.
+ * - `groupFooter`—The row is a group footer.
+ * - `data`—The row corresponds to an item from the `data` collection which is passed to the Grid.
+ */
+export type GridRowType = 'groupFooter' | 'groupHeader' | 'data';

package/interfaces/GridRowsSettings.d.ts

@@ -0,0 +1,57 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ComponentType } from 'react';
+import { GridRowProps } from './GridRowProps.js';
+/**
+ * The properties of the default Grid Row.
+ */
+export interface GridCustomRowProps extends GridRowProps {
+    /**
+     * The props and attributes that are applied to the tr element by default.
+     */
+    trProps?: React.HTMLAttributes<HTMLTableRowElement> | null;
+    /**
+     * The default children of the table row.
+     */
+    children?: React.ReactNode | React.ReactNode[];
+}
+/**
+ * The settings of the rows prop options.
+ */
+export interface GridRowsSettings {
+    /**
+     * Custom component for rendering the group header row.
+     *
+     * @example
+     * ```tsx
+     * import { MyGroupHeaderRow } from './MyGroupHeaderRow.js';
+     * <Grid rows={{ groupHeader: MyGroupHeaderRow }} />
+     * ```
+     */
+    groupHeader?: ComponentType<GridCustomRowProps>;
+    /**
+     * Custom component for rendering the data row.
+     *
+     * @example
+     * ```tsx
+     * import { MyDataRow } from './MyDataRow.js';
+     * <Grid rows={{ data: MyDataRow }} />
+     * ```
+     */
+    data?: ComponentType<GridCustomRowProps>;
+    /**
+     * Custom component for rendering the group footer row.
+     *
+     * @example
+     * ```tsx
+     * import { MyGroupFooterRow } from './MyGroupFooterRow.js';
+     * <Grid rows={{ groupFooter: MyGroupFooterRow }} />
+     * ```
+     */
+    groupFooter?: ComponentType<GridCustomRowProps>;
+}

package/interfaces/GridSelectableSettings.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { TableSelectableMode, TableSelectableSettings } from '@progress/kendo-react-data-tools';
+/**
+ * Represents the available selection modes.
+ */
+export type GridSelectableMode = TableSelectableMode;
+/**
+ * Represents the Grid selectable settings.
+ */
+export interface GridSelectableSettings extends TableSelectableSettings {
+    /**
+     * The available values are:
+     * * `single`
+     * * `multiple`
+     *
+     * @default "multiple"
+     */
+    mode?: GridSelectableMode;
+}

package/interfaces/GridSortSettings.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ColumnSortSettings, SortSettings } from '@progress/kendo-react-data-tools';
+/**
+ * The settings for sorting the Grid columns.
+ */
+export interface GridColumnSortSettings extends ColumnSortSettings {
+}
+/**
+ * The sorting settings of the Grid ([see example](https://www.telerik.com/kendo-react-ui/components/grid/sorting)).
+ *
+ * @example
+ * ```jsx-no-run
+ *
+ * <Grid
+ *    sortable={true}
+ * >
+ * </Grid>
+ * ```
+ */
+export type GridSortSettings = SortSettings;

package/interfaces/GridStackedLayoutSettings.d.ts

@@ -0,0 +1,60 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Defines the width of a column in the stacked layout.
+ */
+export 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;
+}
+/**
+ * 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 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>;
+}
+/**
+ * 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 type GridDataLayoutMode = 'columns' | 'stacked';

package/interfaces/GridToolbarProps.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ToolbarProps } from '@progress/kendo-react-buttons';
+/**
+ * The properties of the GridToolbar component.
+ */
+export interface GridToolbarProps extends ToolbarProps {
+    /**
+     * @hidden
+     */
+    _ariaControls?: string;
+}

package/interfaces/VirtualScrollInterface.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { Page } from '../paging/Page.js';
+import { SyntheticEvent } from 'react';
+import { RowHeightService } from '@progress/kendo-react-common';
+/**
+ * @hidden
+ */
+export interface VirtualScrollInterface {
+    table: HTMLTableElement | null;
+    tableBody: HTMLTableSectionElement | null;
+    container: HTMLDivElement | null;
+    scrollHeightContainer: HTMLDivElement | null;
+    total: number;
+    scrollableVirtual: boolean;
+    pageSize: number;
+    PageChange: ((event: Page, syntheticEvent: SyntheticEvent<any>) => void) | null;
+    fixedScroll: boolean;
+    tableTransform: string;
+    rowHeightService?: RowHeightService;
+    reset: () => void;
+    scrollHandler(e: SyntheticEvent<HTMLDivElement>): void;
+    update(): void;
+}