@progress/kendo-react-grid/stacked/GridStackedRow.d.ts

React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package

/**
 * @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 { GridStackedLayoutSettings } from '../interfaces/GridStackedLayoutSettings.js';
import { GridCellsSettings } from '../interfaces/GridCellsSettings.js';
import * as React from 'react';
/**
 * Props passed to custom cell components in stacked layout mode.
 * Similar to GridCustomCellProps but adapted for stacked layout rendering.
 *
 * @hidden
 */
export 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.CSSProperties;
        tabIndex: number;
        onClick?: (event: React.MouseEvent<HTMLElement>) => void;
        onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
        onDoubleClick?: (event: React.MouseEvent<HTMLElement>) => void;
        onContextMenu?: (event: React.MouseEvent<HTMLElement>) => void;
        ref?: React.Ref<any>;
        onFocus?: (event: React.FocusEvent<HTMLElement>) => void;
    };
    /**
     * The default content (field value) that would be rendered.
     */
    children?: React.ReactNode;
}
/**
 * Represents column properties needed for stacked row rendering.
 *
 * @hidden
 */
export interface GridStackedColumnProps {
    /** Unique identifier for the column */
    id?: string;
    /** The field name from the data item */
    field?: string;
    /** The column title to display as label */
    title?: string;
    /** The column type */
    columnType?: string;
    /** Whether the column is hidden */
    hidden?: boolean;
    /**
     * Indicates whether the column participates in accessibility and rendering.
     * Used to exclude service/group columns in stacked layout.
     */
    isAccessible?: boolean;
    /** Whether the column is editable */
    editable?: boolean;
    /**
     * Custom cell component for this column.
     * The component receives GridStackedCustomCellProps.
     */
    cell?: ComponentType<GridStackedCustomCellProps>;
    /**
     * Specifies a set of cell components that the Grid will render instead of the built-in cells.
     * Use `cells.data` to provide a custom data cell component.
     */
    cells?: GridCellsSettings;
    /** Format string for the value */
    format?: string;
    /** Additional CSS class name for the cell */
    className?: string;
}
/**
 * Props for the GridStackedRow component.
 *
 * @hidden
 */
export interface GridStackedRowProps {
    /**
     * The data item for this row.
     */
    dataItem: any;
    /**
     * The columns to render in the stacked layout.
     */
    columns: GridStackedColumnProps[];
    /**
     * The stacked layout configuration.
     */
    stackedLayoutSettings?: GridStackedLayoutSettings;
    /**
     * The zero-based index of the data item in the data collection.
     */
    dataIndex?: number;
    /**
     * Whether this is an alternating row.
     */
    isAltRow?: boolean;
    /**
     * Indicates whether the row is selected.
     */
    isSelected?: boolean;
    /**
     * Indicates whether the row is in edit mode.
     */
    isInEdit?: boolean;
    /**
     * The edit mode of the Grid.
     */
    editMode?: 'inline' | 'incell' | 'dialog';
    /**
     * Grid-level custom cells configuration.
     * Column-level cells take precedence over grid-level cells.
     */
    cells?: GridCellsSettings;
    /**
     * ID prefix for keyboard navigation.
     */
    idPrefix?: string;
    /**
     * Additional class name for the row.
     */
    className?: string;
    /**
     * Additional style for the row.
     */
    style?: React.CSSProperties;
    /**
     * ARIA row index for accessibility.
     *
     * @remarks
     * This property is related to accessibility.
     */
    ariaRowIndex?: number;
    /**
     * Absolute row index in the grid.
     */
    absoluteRowIndex?: number;
    /**
     * The group level for this row (number of parent groups).
     * Used to render group spacer cells before the stacked content.
     */
    groupLevel?: number;
    /**
     * The prepared cells for this row.
     */
    preparedCells?: React.ReactElement<any>[];
    /**
     * When enabled, renders an expand/collapse detail toggle in stacked mode.
     */
    showDetailToggle?: boolean;
    /**
     * Indicates whether the detail row for this data item is expanded.
     */
    isDetailExpanded?: boolean;
    /**
     * The field name used to track detail expansion.
     */
    detailExpandField?: string;
}
/**
 * @hidden
 */
export declare const GridStackedRow: {
    (props: GridStackedRowProps): React.JSX.Element;
    displayName: string;
};