@progress/kendo-react-grid/index.d.ts

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

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { AIPromptCardInterface } from '@progress/kendo-react-conversational-ui';
import { AIPromptOutputInterface } from '@progress/kendo-react-conversational-ui';
import { AxiosRequestConfig } from 'axios';
import { AxiosResponse } from 'axios';
import { BaseEvent } from '@progress/kendo-react-common';
import { ButtonProps } from '@progress/kendo-react-buttons';
import { CellProps } from '@progress/kendo-react-data-tools';
import { ClipboardSettings } from '@progress/kendo-react-data-tools';
import { ColumnBaseProps } from '@progress/kendo-react-data-tools';
import { ColumnSortSettings } from '@progress/kendo-react-data-tools';
import { ComponentType } from 'react';
import { CompositeFilterDescriptor } from '@progress/kendo-data-query';
import { CustomComponent } from '@progress/kendo-react-common';
import { DataResult } from '@progress/kendo-data-query';
import { DetailExpandDescriptor } from '@progress/kendo-react-data-tools';
import { DialogProps } from '@progress/kendo-react-dialogs';
import { DragClue } from '@progress/kendo-react-data-tools';
import { DropClue } from '@progress/kendo-react-data-tools';
import { EditDescriptor } from '@progress/kendo-react-data-tools';
import { FieldProps } from '@progress/kendo-react-form';
import { FilterDescriptor } from '@progress/kendo-data-query';
import { FilterOperator } from '@progress/kendo-react-data-tools';
import { getSelectedState } from '@progress/kendo-react-data-tools';
import { getSelectedStateFromKeyDown } from '@progress/kendo-react-data-tools';
import { GridClassStructure } from '@progress/kendo-react-common';
import { GridClipboardEvent } from '@progress/kendo-react-data-tools';
import { GroupDescriptor } from '@progress/kendo-data-query';
import { GroupExpandDescriptor } from '@progress/kendo-react-data-tools';
import { GroupState } from '@progress/kendo-react-data-tools';
import { HeaderCellBaseProps } from '@progress/kendo-react-data-tools';
import { HeaderThElementProps } from '@progress/kendo-react-data-tools';
import { IntlService } from '@progress/kendo-react-intl';
import { JSX } from 'react/jsx-runtime';
import { KendoReactComponentBaseProps } from '@progress/kendo-react-common';
import { LocalizationService } from '@progress/kendo-react-intl';
import { MenuItemModel } from '@progress/kendo-react-layout';
import { MenuSelectEvent } from '@progress/kendo-react-layout';
import { NavigatableSettings } from '@progress/kendo-react-data-tools';
import { NormalizedDragEvent } from '@progress/kendo-react-common';
import { Offset } from '@progress/kendo-react-popup';
import { outputViewDefaults } from '@progress/kendo-react-conversational-ui';
import { PagerProps } from '@progress/kendo-react-data-tools';
import { PagerTargetEvent } from '@progress/kendo-react-data-tools';
import { promptViewDefaults } from '@progress/kendo-react-conversational-ui';
import * as React_2 from 'react';
import { ReactElement } from 'react';
import { SearchField } from '@progress/kendo-react-data-tools';
import { SelectDescriptor } from '@progress/kendo-react-data-tools';
import { setSelectedState } from '@progress/kendo-react-data-tools';
import { SortDescriptor } from '@progress/kendo-data-query';
import { SortSettings } from '@progress/kendo-react-data-tools';
import { SpeechToTextButtonProps } from '@progress/kendo-react-buttons';
import { State } from '@progress/kendo-data-query';
import { SVGIcon } from '@progress/kendo-react-common';
import { SVGIcon as SVGIcon_2 } from '@progress/kendo-svg-icons';
import { TABLE_COL_INDEX_ATTRIBUTE } from '@progress/kendo-react-data-tools';
import { TableDragSelectionReleaseEvent } from '@progress/kendo-react-data-tools';
import { TableEditableSettings } from '@progress/kendo-react-data-tools';
import { TableGroupExpandableSettings } from '@progress/kendo-react-data-tools';
import { TableKeyDownEvent } from '@progress/kendo-react-data-tools';
import { TableSelectableMode } from '@progress/kendo-react-data-tools';
import { TableSelectableSettings } from '@progress/kendo-react-data-tools';
import { TableSelectionChangeEvent } from '@progress/kendo-react-data-tools';
import { TextAreaProps } from '@progress/kendo-react-inputs';
import { TextBoxChangeEvent } from '@progress/kendo-react-inputs';
import { TextBoxProps } from '@progress/kendo-react-inputs';
import { ToolbarProps } from '@progress/kendo-react-buttons';
import { ToolbarSeparatorProps } from '@progress/kendo-react-buttons';
import { ToolbarSpacerProps } from '@progress/kendo-react-buttons';

/**
 * The value of the filter operators displayed in the boolean filter menu.
 */
export declare const booleanFilterValues: ({
    text: string;
    operator: string;
} | {
    text: string;
    operator: boolean;
})[];

/**
 * Normalize data for calling onChange.
 */
export declare const cellBoolDropdownChange: (event: any, onChange: Function) => void;

/**
 * Normalize data for calling onChange.
 */
export declare const cellInputChange: (value: any, e: React_2.SyntheticEvent<any>, props: any) => void;

/**
 * Normalize data for calling onChange.
 */
export declare const cellOperatorChange: (event: any, currentValue: any, onChange: Function) => void;

/**
 * Combine two filter descriptors into one, merging filters with the same field.
 */
export declare const combineSmartFilters: (filter: CompositeFilterDescriptor, existingFilter?: CompositeFilterDescriptor) => CompositeFilterDescriptor | null;

/**
 * Represents a composite highlight descriptor for a grid.
 * It contains a map of cell identifiers to their highlight status,
 * an array of filter descriptors, and the logical operator used to combine the filters.
 */
export declare interface CompositeHighlightDescriptor {
    /**
     * A map of cell identifiers to a boolean indicating whether the cell should be highlighted.
     */
    cells: {
        [key: string]: boolean;
    };
    /**
     * An array of filter descriptors representing the filters applied to the grid.
     */
    filters: FilterDescriptor[];
    /**
     * The logical operator ('and' | 'or') used to combine the filters.
     */
    logic: 'and' | 'or';
}

/**
 * @hidden
 */
export declare const contextMenuItemsMap: {
    create: {
        name: string;
        text: string;
        icon: string;
        svgIcon: SVGIcon_2;
        data: {
            action: string;
        };
    };
    edit: {
        name: string;
        text: string;
        icon: string;
        svgIcon: SVGIcon_2;
        data: {
            action: string;
        };
    };
    delete: {
        name: string;
        text: string;
        icon: string;
        svgIcon: SVGIcon_2;
        data: {
            action: string;
        };
    };
    select: {
        name: string;
        text: string;
        icon: string;
        svgIcon: SVGIcon_2;
        items: {
            name: string;
            text: string;
            icon: string;
            svgIcon: SVGIcon_2;
            data: {
                action: string;
            };
        }[];
    };
    copySelection: {
        name: string;
        text: string;
        icon: string;
        svgIcon: SVGIcon_2;
        data: {
            action: string;
        };
        options: string;
    };
    copySelectionNoHeaders: {
        name: string;
        text: string;
        icon: string;
        svgIcon: SVGIcon_2;
        data: {
            action: string;
        };
    };
    paste: {
        name: string;
        text: string;
        icon: string;
        svgIcon: SVGIcon_2;
        data: {
            action: string;
        };
    };
    reorderRow: {
        name: string;
        text: string;
        icon: string;
        svgIcon: SVGIcon_2;
        items: {
            name: string;
            text: string;
            icon: string;
            svgIcon: SVGIcon_2;
            data: {
                action: string;
            };
        }[];
    };
    exportPDF: {
        name: string;
        text: string;
        icon: string;
        svgIcon: SVGIcon_2;
        data: {
            action: string;
        };
    };
    exportExcel: {
        name: string;
        text: string;
        icon: string;
        svgIcon: SVGIcon_2;
        items: ({
            name: string;
            text: string;
            data: {
                action: string;
            };
            options?: undefined;
        } | {
            name: string;
            text: string;
            data: {
                action: string;
            };
            options: string;
        })[];
    };
    separator: {
        name: string;
        separator: boolean;
    };
    sortAsc: {
        name: string;
        text: string;
        icon: string;
        svgIcon: SVGIcon_2;
        data: {
            action: string;
        };
    };
    sortDesc: {
        name: string;
        text: string;
        icon: string;
        svgIcon: SVGIcon_2;
        data: {
            action: string;
        };
    };
};

/**
 * @hidden
 */
declare interface ExtendedColumnProps extends GridColumnProps {
    declarationIndex: number;
    parentIndex: number;
    rowSpan: number;
    depth: number;
    colSpan: number;
    kFirst?: boolean;
    index: number;
    headerColSpan: number;
    children: ExtendedColumnProps[];
    left: number;
    right: number;
    rightBorder: boolean;
    ariaColumnIndex: number;
    isAccessible: boolean;
    /** @hidden _internal usage only */
    _type?: 'edit' | 'expand';
    rowSpannable?: Required<GridRowSpannableSettings>;
    defaultCell?: any;
    defaultHeaderCell?: any;
}

/**
 * @hidden
 */
export declare const filterGroupByField: (field: string, filter: CompositeFilterDescriptor | undefined) => CompositeFilterDescriptor | null;

export { getSelectedState }

export { getSelectedStateFromKeyDown }

/**
 * Calculates the status data.
 *
 * @param args StatusDataArgs
 * @returns StatusItem[]
 */
export declare const getStatusData: (args: StatusDataArgs) => StatusItem[];

/**
 * Represents the [KendoReact Grid component]({% slug overview_grid %}).
 *
 * @remarks
 * Supported children components are: {@link GridColumn}, {@link GridToolbar}, {@link GridNoRecords}, {@link StatusBar}.
 *
 * @example
 * ```jsx
 * const App = () => {
 *     const [data, setData] = useState([
 *         { foo: 'A1', bar: 'B1' },
 *         { foo: 'A2', bar: 'B2' },
 *         { foo: 'A3', bar: 'B2' }
 *     ]);
 *
 *     return (
 *         <Grid data={data} reorderable={true}>
 *             <GridColumn field="foo" />
 *             <GridColumn field="bar" />
 *         </Grid>
 *     );
 * };
 *
 * export default App;
 * ```
 */
export declare const Grid: React_2.ForwardRefExoticComponent<GridProps & React_2.RefAttributes<GridHandle | null>>;

/** The attribute required by the Grid selection on Grid `td` elements. */
export declare const GRID_COL_INDEX_ATTRIBUTE = "data-grid-col-index";

/** Attribute which disable selection start from this element. */
export declare const GRID_PREVENT_SELECTION_ELEMENT = "data-prevent-selection";

/** The attribute required by the Grid selection on Grid `tr` elements. */
export declare const GRID_ROW_INDEX_ATTRIBUTE = "data-grid-row-index";

export declare const GridAIPrompt: (props: GridAIPromptProps) => JSX.Element;

/**
 * Props for the `GridAIPrompt` component, which provides AI-powered prompt and output functionality in a grid toolbar.
 *
 * @example
 * ```tsx
 * <GridAIPrompt
 *   promptValue="Summarize this data"
 *   outputs={[{ text: "Summary...", ... }]}
 *   streaming={true}
 *   onPromptRequest={handlePrompt}
 *   suggestionsList={["Summarize", "Explain", "Generate chart"]}
 * />
 * ```
 */
export declare interface GridAIPromptProps {
    /**
     * List of AI-generated outputs to display.
     *
     * @example
     * outputs={[{ text: "AI output 1" }, { text: "AI output 2" }]}
     */
    outputs?: AIPromptOutputInterface[];
    /**
     * Enables the speech-to-text functionality for the input of the GridToolbarAIAssistant.
     *
     * @example
     * ```jsx
     * <GridToolbarAIAssistant enableSpeechToText={true} />
     * ```
     */
    enableSpeechToText?: boolean | SpeechToTextButtonProps;
    /**
     * Indicates whether the prompt is currently streaming or processing.
     *
     * @example
     * streaming={true}
     */
    streaming?: boolean;
    /**
     * Indicates whether the prompt is currently loading.
     *
     * @example
     * loading={true}
     */
    loading?: boolean;
    /**
     * Configuration for the output card displaying AI results.
     *
     * @example
     * outputCard={{ title: "AI Result", content: "..." }}
     */
    outputCard?: AIPromptCardInterface;
    /**
     * Current value of the prompt input field.
     *
     * @example
     * promptValue="Describe the selected rows"
     */
    promptValue?: string;
    /**
     * Placeholder text for the prompt input field.
     *
     * @example
     * promptPlaceHolder="Type your question here..."
     */
    promptPlaceHolder?: string;
    /**
     * Custom component to render the prompt input field.
     *
     * @example
     * promptInput={CustomTextArea}
     */
    promptInput?: CustomComponent<TextAreaProps>;
    /**
     * Callback fired when the active view changes.
     *
     * @param viewName The name of the new active view.
     * @example
     * onActiveViewChange={(view) => setActiveView(view)}
     */
    onActiveViewChange?: (viewName: string) => void;
    /**
     * Custom component to render the generate button.
     *
     * @example
     * generateButton={CustomGenerateButton}
     */
    generateButton?: CustomComponent<ButtonProps>;
    /**
     * Name of the currently active view.
     *
     * @example
     * activeView="prompt"
     */
    activeView?: string;
    /**
     * Array of toolbar items to display, can include prompt or output view defaults.
     *
     * @example
     * toolbarItems={[promptViewDefaults, outputViewDefaults]}
     */
    toolbarItems?: Array<typeof promptViewDefaults | typeof outputViewDefaults>;
    /**
     * Callback fired when the user clicks the Copy button in the output card.
     *
     * @example
     * onCopy={() => copyToClipboard()}
     */
    onCopy?: () => void;
    /**
     * Callback fired when the user rates the output.
     *
     * @example
     * onOutputRating={() => handleRating()}
     */
    onOutputRating?: () => void;
    /**
     * Callback fired when the user submits a prompt request.
     *
     * @param prompt The prompt text submitted by the user.
     * @example
     * onPromptRequest={(prompt) => sendPrompt(prompt)}
     */
    onPromptRequest?: (prompt: string) => void;
    /**
     * List of prompt suggestions to display to the user.
     *
     * @example
     * suggestionsList={["Summarize", "Explain", "Generate chart"]}
     */
    suggestionsList?: string[];
    /**
     * Callback fired when the user cancels the current operation.
     *
     * @example
     * onCancel={() => cancelPrompt()}
     */
    onCancel?: () => void;
    /**
     * Callback fired when the user closes the current operation.
     *
     * @example
     * onClose={() => closePrompt()}
     */
    onClose?: () => void;
}

/**
 * @hidden
 */
export declare const GridCell: (props: {
    cellProps: GridCellProps;
}) => JSX.Element | null;

/**
 * Represents the `GridCellBaseOptions` object that are passed to the handler.
 */
export declare interface GridCellBaseOptions {
    dataItem?: any;
    field?: string;
}

/**
 * Represents the props of the GridCell component
 * ([more information]({% slug cells_grid %}#toc-grid-cells)).
 */
export declare interface GridCellProps extends Omit<CellProps, 'onChange' | 'render'> {
    /**
     * The zero-based index of the data item in the data collection.
     */
    dataIndex: number;
    /**
     * The index of the column in the rendered columns collection. Optional.
     */
    columnIndex?: number;
    /**
     * The total number of rendered columns in the Grid. Optional.
     */
    columnsCount?: number;
    /**
     * Defines a set of custom cell components that the Grid will render instead of the default cell.
     */
    cells?: GridCellsSettings;
    /**
     * Specifies the type of the row (e.g., data row, group header, etc.). Optional.
     */
    rowType?: GridRowType;
    /**
     * @hidden
     */
    level?: number;
    /**
     * Triggered when the cell is selected. Provides the event object.
     */
    selectionChange?: (event: {
        syntheticEvent: React.SyntheticEvent<any>;
    }) => void;
    /**
     * Triggered when the cell value is changed. Provides details about the change event.
     */
    onChange?: (event: {
        dataItem: any;
        dataIndex: number;
        syntheticEvent: React.SyntheticEvent<any>;
        field?: string;
        value?: any;
        /** @hidden */
        _expand?: boolean;
        /** @hidden */
        _group?: GroupState;
    }) => void;
    /**
     * 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';
    /**
     * @hidden
     */
    locked?: boolean | undefined;
    /**
     * 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;
    /**
     * @hidden
     */
    isRtl?: boolean;
    /**
     * @hidden
     */
    unstyled?: GridClassStructure;
    /**
     * @hidden
     */
    rowDataIndex?: number;
    /**
     * @hidden
     */
    columnType?: GridColumnType;
    /**
     * @hidden
     */
    rowReorderable?: boolean;
    /**
     * @hidden
     */
    columnPosition: any;
    /** @hidden */
    group?: GroupState;
    /** @hidden */
    localization?: LocalizationService;
    /** @hidden */
    intl?: IntlService;
    /** @hidden */
    _rowSpan?: {
        count: number | null;
        value: any;
    };
}

/**
 * The settings of the cells prop options.
 */
export declare interface GridCellsSettings {
    /**
     * Custom component for rendering the header cell.
     *
     * @example
     * ```tsx
     * import { MyHeaderCell } from './MyHeaderCell';
     * <Grid cells={{ headerCell: MyHeaderCell }} />
     * ```
     */
    headerCell?: ComponentType<GridCustomHeaderCellProps>;
    /**
     * Custom component for rendering the filter cell.
     *
     * @example
     * ```tsx
     * import { MyFilterCell } from './MyFilterCell';
     * <Grid cells={{ filterCell: MyFilterCell }} />
     * ```
     */
    filterCell?: ComponentType<GridCustomFilterCellProps>;
    /**
     * Custom component for rendering the footer cell.
     *
     * @example
     * ```tsx
     * import { MyFooterCell } from './MyFooterCell';
     * <Grid cells={{ footerCell: MyFooterCell }} />
     * ```
     */
    footerCell?: ComponentType<GridCustomFooterCellProps>;
    /**
     * Custom component for rendering the group header cell.
     *
     * @example
     * ```tsx
     * import { MyGroupHeaderCell } from './MyGroupHeaderCell';
     * <Grid cells={{ groupHeader: MyGroupHeaderCell }} />
     * ```
     */
    groupHeader?: ComponentType<GridCustomCellProps>;
    /**
     * Custom component for rendering the data cell.
     *
     * @example
     * ```tsx
     * import { MyDataCell } from './MyDataCell';
     * <Grid cells={{ data: MyDataCell }} />
     * ```
     */
    data?: ComponentType<GridCustomCellProps>;
    /**
     * Custom component for rendering the group footer cell.
     *
     * @example
     * ```tsx
     * import { MyGroupFooterCell } from './MyGroupFooterCell';
     * <Grid cells={{ groupFooter: MyGroupFooterCell }} />
     * ```
     */
    groupFooter?: ComponentType<GridCustomCellProps>;
    /**
     * Custom cell components for selection columns.
     *
     * @example
     * ```tsx
     * import { MySelectDataCell } from './MySelectDataCell';
     * <Grid cells={{ select: { data: MySelectDataCell } }} />
     * ```
     */
    select?: {
        /**
         * Custom component for rendering the group header cell in selection columns.
         *
         * @example
         * ```tsx
         * import { MySelectGroupHeaderCell } from './MySelectGroupHeaderCell';
         * <Grid cells={{ select: { groupHeader: MySelectGroupHeaderCell } }} />
         * ```
         */
        groupHeader?: ComponentType<GridCustomCellProps>;
        /**
         * Custom component for rendering the data cell in selection columns.
         *
         * @example
         * ```tsx
         * import { MySelectDataCell } from './MySelectDataCell';
         * <Grid cells={{ select: { data: MySelectDataCell } }} />
         * ```
         */
        data?: ComponentType<GridCustomCellProps>;
        /**
         * Custom component for rendering the group footer cell in selection columns.
         *
         * @example
         * ```tsx
         * import { MySelectGroupFooterCell } from './MySelectGroupFooterCell';
         * <Grid cells={{ select: { groupFooter: MySelectGroupFooterCell } }} />
         * ```
         */
        groupFooter?: ComponentType<GridCustomCellProps>;
    };
    /**
     * Custom cell components for hierarchy columns.
     *
     * @example
     * ```tsx
     * import { MyHierarchyDataCell } from './MyHierarchyDataCell';
     * <Grid cells={{ hierarchy: { data: MyHierarchyDataCell } }} />
     * ```
     */
    hierarchy?: {
        /**
         * Custom component for rendering the group header cell in hierarchy columns.
         *
         * @example
         * ```tsx
         * import { MyHierarchyGroupHeaderCell } from './MyHierarchyGroupHeaderCell';
         * <Grid cells={{ hierarchy: { groupHeader: MyHierarchyGroupHeaderCell } }} />
         * ```
         */
        groupHeader?: ComponentType<GridCustomCellProps>;
        /**
         * Custom component for rendering the data cell in hierarchy columns.
         *
         * @example
         * ```tsx
         * import { MyHierarchyDataCell } from './MyHierarchyDataCell';
         * <Grid cells={{ hierarchy: { data: MyHierarchyDataCell } }} />
         * ```
         */
        data?: ComponentType<GridCustomCellProps>;
        /**
         * Custom component for rendering the group footer cell in hierarchy columns.
         *
         * @example
         * ```tsx
         * import { MyHierarchyGroupFooterCell } from './MyHierarchyGroupFooterCell';
         * <Grid cells={{ hierarchy: { groupFooter: MyHierarchyGroupFooterCell } }} />
         * ```
         */
        groupFooter?: ComponentType<GridCustomCellProps>;
    };
    /**
     * Custom cell components for group columns.
     *
     * @example
     * ```tsx
     * import { MyGroupDataCell } from './MyGroupDataCell';
     * <Grid cells={{ group: { data: MyGroupDataCell } }} />
     * ```
     */
    group?: {
        /**
         * Custom component for rendering the group header cell in group columns.
         *
         * @example
         * ```tsx
         * import { MyGroupGroupHeaderCell } from './MyGroupGroupHeaderCell';
         * <Grid cells={{ group: { groupHeader: MyGroupGroupHeaderCell } }} />
         * ```
         */
        groupHeader?: ComponentType<GridCustomCellProps>;
        /**
         * Custom component for rendering the data cell in group columns.
         *
         * @example
         * ```tsx
         * import { MyGroupDataCell } from './MyGroupDataCell';
         * <Grid cells={{ group: { data: MyGroupDataCell } }} />
         * ```
         */
        data?: ComponentType<GridCustomCellProps>;
        /**
         * Custom component for rendering the group footer cell in group columns.
         *
         * @example
         * ```tsx
         * import { MyGroupGroupFooterCell } from './MyGroupGroupFooterCell';
         * <Grid cells={{ group: { groupFooter: MyGroupGroupFooterCell } }} />
         * ```
         */
        groupFooter?: ComponentType<GridCustomCellProps>;
    };
    /**
     * Custom cell components for edit columns.
     *
     * @example
     * ```tsx
     * import { MyTextEditCell } from './MyTextEditCell';
     * <Grid cells={{ edit: { text: MyTextEditCell } }} />
     * ```
     */
    edit?: {
        /**
         * Custom component for rendering the text edit cell.
         *
         * @example
         * ```tsx
         * import { MyTextEditCell } from './MyTextEditCell';
         * <Grid cells={{ edit: { text: MyTextEditCell } }} />
         * ```
         */
        text?: ComponentType<GridCustomCellProps>;
        /**
         * Custom component for rendering the numeric edit cell.
         *
         * @example
         * ```tsx
         * import { MyNumericEditCell } from './MyNumericEditCell';
         * <Grid cells={{ edit: { numeric: MyNumericEditCell } }} />
         * ```
         */
        numeric?: ComponentType<GridCustomCellProps>;
        /**
         * Custom component for rendering the boolean edit cell.
         *
         * @example
         * ```tsx
         * import { MyBooleanEditCell } from './MyBooleanEditCell';
         * <Grid cells={{ edit: { boolean: MyBooleanEditCell } }} />
         * ```
         */
        boolean?: ComponentType<GridCustomCellProps>;
        /**
         * Custom component for rendering the date edit cell.
         *
         * @example
         * ```tsx
         * import { MyDateEditCell } from './MyDateEditCell';
         * <Grid cells={{ edit: { date: MyDateEditCell } }} />
         * ```
         */
        date?: ComponentType<GridCustomCellProps>;
    };
}

/**
 * Represents the properties of the callback used when spanning a column.
 */
export declare type GridColSpanProps = {
    /**
     * Represents the properties of the spanned column.
     */
    column: GridColumnProps;
    /**
     * Represents the current row data item.
     */
    dataItem: any;
};

/**
 * Represents the GridColumn component.
 *
 * @returns null
 */
export declare const GridColumn: React_2.FunctionComponent<GridColumnProps>;

/**
 * The type of elements that the children property of the Grid accepts.
 */
export declare interface GridColumnChildrenProps extends GridColumnProps, ReactElement<GridColumnProps> {
}

/**
 * @hidden
 */
declare interface GridColumnMenuBaseProps {
    /**
     * The current column options.
     */
    column: GridColumnMenuColumnProps;
    /**
     * The method that will be called to close the column menu.
     */
    onCloseMenu?: Function;
}

export declare const GridColumnMenuCheckboxFilter: (props: GridColumnMenuCheckboxFilterProps) => JSX.Element;

/**
 * The props of the GridColumnMenuFilter component.
 */
export declare interface GridColumnMenuCheckboxFilterProps extends GridColumnMenuFilterBaseProps {
    /**
     * Controls the expand state of the filter component.
     */
    expanded?: boolean;
    /**
     * Sets the items collection that will be rendered by the GridColumnMenuCheckboxFilter component.
     */
    data: Array<string | object>;
    /**
     * Triggered on each subsequent expand state of the filter component.
     */
    onExpandChange?: (nextExpandState: boolean) => void;
    /**
     * If set to `true`, checkbox filter expand button will not be rendered and chechbox filter menu will be expanded.
     */
    alwaysExpand?: boolean;
    /**
     * Defines the component that will be rendered as a search box.
     */
    searchBox?: React_2.ComponentType<any>;
    /**
     * Defines the filter operator that will be used to filter the values via the search box.
     * "startswith"
     * "endswith"
     * "contains"
     * "doesnotcontain"
     * "isempty"
     * "isnotempty"
     * "eq" (equal to)
     * "eq" (equal to)
     * "neq" (not equal to)
     * "isnull" (is equal to null)
     * "isnotnull" (is not equal to null)
     */
    searchBoxFilterOperator?: string | Function;
    /**
     * Determines if the data in the component will be unique. By default the property is set to true.
     */
    uniqueData?: boolean;
}

/**
 * The column props passed by the ColumnMenu.
 */
export declare interface GridColumnMenuColumnProps {
    /**
     * The field to which the column is bound.
     */
    field?: string;
    /**
     * Defines the filter type that is displayed inside the filter row. Defaults to `text`.
     */
    filter?: 'text' | 'numeric' | 'boolean' | 'date';
    /**
     * The column locked state.
     */
    locked?: boolean;
    /**
     * @hidden
     */
    title?: string;
    /**
     * The column id.
     */
    id?: string;
}

/**
 * Represents the KendoReact GridColumnMenuColumnsChooser component.
 */
export declare const GridColumnMenuColumnsChooser: React_2.FunctionComponent<GridColumnMenuColumnsChooserProps>;

/**
 *  The props passed to the ColumnMenu ColumnsChooser component.
 */
declare interface GridColumnMenuColumnsChooserBaseProps extends GridColumnMenuBaseProps {
    /**
     * The columns state of the KendoReact GridColumnMenuColumnsChooser component.
     */
    columnsState?: GridColumnState[];
    /**
     * The method that will be called when the new columns state is applied.
     */
    onColumnsStateChange?: Function;
}

/**
 * The props of the GridColumnMenuColumnsChooser component.
 */
export declare interface GridColumnMenuColumnsChooserProps extends GridColumnMenuColumnsChooserBaseProps {
    /**
     * If set to `true`, column chooser expand button will not be rendered and column chooser menu will be expanded.
     */
    alwaysExpand?: boolean;
    /**
     * Controls the expand state of the column chooser component.
     */
    expanded?: boolean;
    /**
     * Triggered on each subsequent expand state of the column chooser component.
     */
    onExpandChange?: (nextExpandState: boolean) => void;
}

/**
 * Represents the KendoReact GridColumnMenuColumnsList component.
 */
export declare const GridColumnMenuColumnsList: React_2.FunctionComponent<GridColumnMenuColumnsListProps>;

/**
 * Represents the props of the KendoReact GridColumnMenuColumnsList component.
 */
export declare interface GridColumnMenuColumnsListProps {
    /**
     * The columns state of the KendoReact GridColumnMenuColumnsList component.
     */
    columnsState: GridColumnProps[];
    /**
     * The initial columns of the KendoReact GridColumnMenuColumnsList component.
     */
    columns: GridColumnProps[];
    /**
     * The onColumnsChange event handler of the KendoReact GridColumnMenuColumnsList component.
     */
    onColumnsChange: (cols: GridColumnProps[]) => void;
    /**
     * The onCloseMenu event handler of the KendoReact GridColumnMenuColumnsList component.
     */
    onCloseMenu: Function;
}

/**
 * @example
 * ```jsx-no-run
 * const TextColumnMenu = (props) => {
 *   return (
 *     <div>
 *       <GridColumnMenuSort {...props} />
 *       <GridColumnMenuFilter {...props} />
 *     </div>
 *   );
 * };
 *
 * const App = () => {
 *   const [state, setState] = React.useState(
 *     createAppState({
 *       take: 10,
 *       skip: 0,
 *     })
 *   );
 *
 *   function createAppState(dataState) {
 *     return {
 *       result: process(products.slice(0), dataState),
 *       dataState: dataState,
 *     };
 *   }
 *
 *   const dataStateChange = (event) => {
 *     setState(createAppState(event.dataState));
 *   };
 *
 *   return (
 *     <Grid
 *       data={state.result}
 *       {...state.dataState}
 *       onDataStateChange={dataStateChange}
 *       sortable={true}
 *       pageable={true}
 *     >
 *       <GridColumn field="ProductID" title="Product ID" />
 *       <GridColumn field="ProductName" columnMenu={TextColumnMenu} />
 *     </Grid>
 *   );
 * };
 * ```
 */
export declare const GridColumnMenuFilter: (props: GridColumnMenuFilterProps) => JSX.Element;

/**
 * The props passed to the ColumnMenu filter component.
 */
declare interface GridColumnMenuFilterBaseProps extends GridColumnMenuBaseProps {
    /**
     * The current filter state of the Grid.It takes value of type [CompositeFilterDescriptor]({% slug api_kendo-data-query_compositefilterdescriptor %})
     */
    filter?: CompositeFilterDescriptor;
    /**
     * The filterable option of the column.
     */
    filterable?: boolean | undefined;
    /**
     * The filter operators for the Grid filters.
     */
    filterOperators: GridFilterOperators;
    /**
     * The method that will be called to notify the parent Grid about a filter change.
     */
    onFilterChange?: (filter: CompositeFilterDescriptor | null, syntheticEvent: React.SyntheticEvent<any>) => any;
}

/**
 * @hidden
 */
export declare const GridColumnMenuFilterCell: (props: GridColumnMenuFilterCellProps) => JSX.Element;

/**
 * @hidden
 */
export declare interface GridColumnMenuFilterCellProps {
    field?: string;
    filterType: 'text' | 'numeric' | 'boolean' | 'date';
    value: any;
    operator?: string | Function;
    operators: GridFilterOperator[];
    booleanValues: GridFilterOperator[];
    onChange: (event: {
        value: any;
        operator: string | Function;
        syntheticEvent: React_2.SyntheticEvent<any>;
    }) => void;
}

/**
 * The props of the GridColumnMenuFilter component.
 */
export declare interface GridColumnMenuFilterProps extends GridColumnMenuFilterBaseProps {
    /**
     * Controls the expand state of the filter component.
     */
    expanded?: boolean;
    /**
     * Triggered on each subsequent expand state of the filter component.
     */
    onExpandChange?: (nextExpandState: boolean) => void;
    /**
     * If set to `false`, the second filter operator and the input will be hidden.
     */
    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)).
     */
    filterUI?: ComponentType<GridColumnMenuFilterUIProps>;
    children?: React_2.ReactNode;
    /**
     * If set to `true`, filter expand button will not be rendered and filter menu will be expanded.
     */
    alwaysExpand?: boolean;
}

/**
 * @hidden
 */
export declare const GridColumnMenuFilterUI: (props: GridColumnMenuFilterUIProps) => JSX.Element;

/**
 * The props that will be passed to the UI of the ColumnMenu filter component.
 */
export declare interface GridColumnMenuFilterUIProps {
    /**
     * The options of the first filter.
     */
    firstFilterProps: GridFilterCellProps;
    /**
     * The options of the second filter.
     */
    secondFilterProps: GridFilterCellProps;
    /**
     * The current value of the filter logic.
     */
    logicValue?: GridFilterOperator;
    /**
     * The list of the filter logic options.
     */
    logicData: GridFilterOperator[];
    /**
     * The method that will be called to notify the parent about a change in the filter logic.
     */
    onLogicChange: (e: any) => void;
    /**
     * Indicates if the second filter will be hidden.
     */
    hideSecondFilter?: boolean;
}

/**
 * @example
 * ```jsx-no-run
 * const TextColumnMenu = (props) => {
 *     return (
 *         <div>
 *             <GridColumnMenuSort {...props} />
 *             <GridColumnMenuGroup {...props} />
 *         </div>
 *     );
 * };
 *
 * const initialState = {
 *     take: 10,
 *     skip: 0
 * };
 *
 * const App = () => {
 *     const [dataState, setDataState] = useState(initialState);
 *     const [result, setResult] = useState(process(products.slice(0), initialState));
 *
 *     const dataStateChange = (event) => {
 *         setDataState(event.dataState);
 *         setResult(process(products.slice(0), event.dataState));
 *     }
 *
 *     return (
 *         <div>
 *             <Grid
 *                 data={result}
 *                 {...dataState}
 *                 onDataStateChange={dataStateChange}
 *                 sortable={true}
 *                 pageable={true}
 *             >
 *                 <Column field="ProductID" title="Product ID" />
 *                 <Column field="ProductName" columnMenu={TextColumnMenu} />
 *             </Grid>
 *             <br />
 *         </div>
 *     );
 * };
 *
 * export default App;
 * ```
 */
export declare const GridColumnMenuGroup: (props: GridColumnMenuGroupProps) => JSX.Element;

/**
 *  The props passed to the ColumnMenu group component.
 */
declare interface GridColumnMenuGroupBaseProps extends GridColumnMenuBaseProps {
    /**
     * The groupable option of the column.
     */
    groupable?: boolean;
    /**
     * The current group state of the Grid. It takes value of type [GroupDescriptor]({% slug api_kendo-data-query_groupdescriptor %})[]
     */
    group?: GroupDescriptor[];
    /**
     * The method that will be called to notify the parent Grid about a group change.
     */
    onGroupChange?: (groups: GroupDescriptor[], event: React.MouseEvent<HTMLAnchorElement>) => void;
}

/**
 * The props of the GridColumnMenuGroup component.
 */
declare interface GridColumnMenuGroupProps extends GridColumnMenuGroupBaseProps {
}

/**
 * The GridColumnMenuItem component that is used inside the Grid ColumnMenu.
 */
export declare const GridColumnMenuItem: (props: GridColumnMenuItemProps) => JSX.Element;

/**
 * The GridColumnMenuItemContent that will be used inside the Grid ColumnMenu.
 */
export declare const GridColumnMenuItemContent: (props: GridColumnMenuItemContentProps) => JSX.Element;

/**
 * The props of the GridColumnMenuItemContent component.
 */
declare interface GridColumnMenuItemContentProps extends KendoReactComponentBaseProps {
    /**
     * The `show` state of the component. Each change is animated with the Reveal animation.
     */
    show: boolean;
}

/**
 * The GridColumnMenuItemGroup that will be used inside the Grid ColumnMenu.
 */
export declare const GridColumnMenuItemGroup: (props: GridColumnMenuItemGroupProps) => JSX.Element;

/**
 * The props of the GridColumnMenuItemGroup component.
 */
declare interface GridColumnMenuItemGroupProps extends KendoReactComponentBaseProps {
}

/**
 * The props of the GridColumnMenuItem component.
 */
declare interface GridColumnMenuItemProps {
    /**
     * Triggered each time the title is clicked.
     */
    onClick: React_2.MouseEventHandler<HTMLElement>;
    /**
     * The title of the GridColumnMenuItem component.
     */
    title: string;
    /**
     * The class of the icon that is rendered next to the title.
     */
    iconClass?: string;
    /**
     * The SVG icon that is rendered next to the title.
     */
    svgIcon?: SVGIcon;
    /**
     * The selected state of the component.
     */
    selected?: boolean;
    /**
     * @hidden
     * States if the Column Menu item is expandable.
     */
    expandable?: boolean;
    /**
     * @hidden
     * States if the Column Menu item is expanded.
     */
    expanded?: boolean;
}

/**
 * The props which the ColumnMenu passes to its children.
 */
export declare interface GridColumnMenuProps extends GridColumnMenuFilterBaseProps, GridColumnMenuSortBaseProps, GridColumnMenuGroupBaseProps, GridColumnMenuColumnsChooserBaseProps {
    navigatable?: boolean;
    show?: boolean;
}

/**
 * @example
 * ```jsx-no-run
 * const ColumnMenu = (props) => {
 *     return (
 *         <div>
 *             <GridColumnMenuSort {...props} />
 *         </div>
 *     );
 * };
 *
 * const initialState = {
 *     take: 10,
 *     skip: 0
 * };
 *
 * const App = () => {
 *     const [dataState, setDataState] = useState(initialState);
 *     const [result, setResult] = useState(process(products.slice(0), initialState));
 *
 *     const dataStateChange = (event) => {
 *         setDataState(event.dataState);
 *         setResult(process(products.slice(0), event.dataState));
 *     };
 *
 *     return (
 *         <div>
 *             <div>
 *                 <Grid
 *                     data={result}
 *                     {...dataState}
 *                     onDataStateChange={dataStateChange}
 *                     sortable={true}
 *                     pageable={true}
 *                 >
 *                     <Column field="ProductID" title="Product ID" columnMenu={ColumnMenu} />
 *                     <Column field="ProductName" />
 *                 </Grid>
 *                 <br />
 *             </div>
 *         </div>
 *     );
 * };
 *
 * export default App;
 * ```
 */
export declare const GridColumnMenuSort: (props: GridColumnMenuSortProps) => JSX.Element;

/**
 *  The props passed to the ColumnMenu sort component.
 */
declare interface GridColumnMenuSortBaseProps extends GridColumnMenuBaseProps {
    /**
     * The sortable option of the column.
     */
    sortable?: GridSortSettings;
    /**
     * The current sort state of the Grid. It takes a value of type [SortDescriptor]({% slug api_kendo-data-query_sortdescriptor %})[]
     */
    sort?: SortDescriptor[];
    /**
     * The method that will be called to notify the parent Grid about a sort change.
     */
    onSortChange?: (descriptors: SortDescriptor[], e: React.SyntheticEvent<any>) => void;
}

/**
 * The props of the GridColumnMenuSort component.
 */
declare interface GridColumnMenuSortProps extends GridColumnMenuSortBaseProps {
}

/**
 * The GridColumnMenuWrapper component.
 */
export declare const GridColumnMenuWrapper: (props: GridColumnMenuWrapperProps) => JSX.Element;

/**
 * The props of the GridColumnMenuWrapper component.
 */
export declare interface GridColumnMenuWrapperProps extends GridColumnMenuProps {
    /**
     * The component to be rendered as content of the Grid column menu.
     */
    columnMenu?: React_2.ComponentType<GridColumnMenuProps> | null;
    /**
     * The icon that overrides the default(three vertical dots) icon displayed in the column menu of each column.
     */
    columnMenuIcon?: SVGIcon;
}

/**
 * The props of the GridColumn component.
 */
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;
    /**
     * 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 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;
    /**
     * The validation method for the edit field when editting is in mode `dialog`.
     *
     * The method arguments are:
     *
     * * value - The current value of the field.
     * * valueGetter - Function which can be used to get other fields value.
     * Usable when validator depends on more than one field. Supports field paths.
     * * fieldProps - Props of the Field component. Currently contains only the `name` prop.
     * Usable when one validator is used across multiple fields.
     *
     * Returns `string` to signify error or `undefined` to signify validation success.
     */
    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.
     *
     * @example
     * ```jsx
     * <GridColumn menuIcon={CustomIcon} />
     * ```
     */
    menuIcon?: SVGIcon;
    /**
     * 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 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;
    /**
     * 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;
    /**
     * 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;
}

/**
 * Represents the object of the `onColumnReorder` Grid event.
 */
export declare interface GridColumnReorderEvent {
    /**
     * An event target.
     */
    target: GridHandle;
    /**
     * A native DOM event.
     */
    nativeEvent: any;
    /**
     * The current columns collection.
     */
    columns: GridColumnProps[];
    /**
     * T