@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: Array<FilterDescriptor | CompositeFilterDescriptor>;
    /**
     * 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";

/**
 * Represents a command structure returned by AI services for grid operations.
 * Each command contains the operation type and relevant configuration data.
 *
 * @example
 * ```tsx
 * // Sort command example
 * const sortCommand: GridAIAssistantCommand = {
 *   type: 'GridSort',
 *   sort: { field: 'productName', dir: 'asc' },
 *   message: 'Sorted by Product Name ascending'
 * };
 *
 * // Filter command example
 * const filterCommand: GridAIAssistantCommand = {
 *   type: 'GridFilter',
 *   filter: {
 *     logic: 'and',
 *     filters: [{ field: 'price', operator: 'gte', value: 100 }]
 *   },
 *   message: 'Filtered products with price >= 100'
 * };
 * ```
 */
export declare interface GridAIAssistantCommand {
    /**
     * The type of grid operation to perform.
     * Possible values: 'GridSort', 'GridFilter', 'GridGroup', 'GridHighlight', 'GridClearSort', 'GridClearFilter', 'GridClearGroup', 'GridClearHighlight'
     */
    type: GridAICommands;
    /**
     * The filename for export operations, including the file extension.
     * Used when the AI assistant performs export commands such as PDF generation.
     * Expected data type: string ending with file extension (e.g., '.pdf', '.xlsx').
     */
    fileName?: string;
    /**
     * The sort descriptor for sorting operations.
     */
    sort?: SortDescriptor | SortDescriptor[];
    /**
     * The filter descriptor for filtering operations.
     */
    filter?: CompositeFilterDescriptor;
    /**
     * The group descriptor for grouping operations.
     */
    group?: GroupDescriptor | GroupDescriptor[];
    /**
     * The highlight descriptor for highlight operations.
     */
    highlight?: CompositeHighlightDescriptor;
    /**
     * The select descriptor for selection operations.
     * Used when type is 'GridSelect' to define cell or row selection criteria.
     *
     * @example
     * ```tsx
     * select: {
     *   cells: { 'Age': true },
     *   filters: [{ field: 'Age', operator: 'gt', value: 60 }],
     *   logic: 'and'
     * }
     * ```
     */
    select?: CompositeHighlightDescriptor;
    /**
     * The message describing the operation.
     */
    message?: string;
    /**
     * The messages describing the operation (alternative to message).
     */
    messages?: string[];
    /**
     * The new size value for column resize operations.
     * Specifies the width dimension when resizing grid columns.
     */
    size?: string;
    /**
     * The unique identifier of the column to resize.
     * Used when type is 'GridColumnResize' to specify which column should be resized.
     */
    id?: string;
    /**
     * The target page number for pagination operations.
     * Used when type is 'GridPage' to navigate to a specific page.
     */
    page?: number;
    /**
     * The number of items to display per page for pagination operations.
     * Used when type is 'GridPageSize' to change the grid's page size.
     */
    pageSize?: number;
    /**
     * The target position for column reordering operations.
     * Used when type is 'GridColumnReorder' to specify the new column index.
     */
    position?: number;
}

/**
 * Enum defining the available AI command types for grid operations.
 * These commands control different aspects of grid functionality through AI prompts.
 *
 * @example
 * ```tsx
 * // Used internally when processing AI responses
 * const command = {
 *   type: GridAICommands.GridSort,
 *   sort: { field: 'name', dir: 'asc' }
 * };
 * ```
 */
export declare enum GridAICommands {
    /** Clears all applied filters from the grid */
    GridClearFilter = "GridClearFilter",
    /** Clears all applied sorting from the grid */
    GridClearSort = "GridClearSort",
    /** Clears all applied grouping from the grid */
    GridClearGroup = "GridClearGroup",
    /** Clears all applied highlighting from the grid */
    GridClearHighlight = "GridClearHighlight",
    /** Clears all applied selections from the grid */
    GridClearSelect = "GridClearSelect",
    /** Applies sorting to grid columns */
    GridSort = "GridSort",
    /** Applies filtering to grid data */
    GridFilter = "GridFilter",
    /** Applies grouping to grid data */
    GridGroup = "GridGroup",
    /** Applies highlighting to grid cells or rows */
    GridHighlight = "GridHighlight",
    /** Applies select to grid cells or rows */
    GridSelect = "GridSelect",
    /** Exports the grid data as a PDF document */
    GridExportPDF = "GridExportPDF",
    /** Resizes grid columns to specified dimensions */
    GridColumnResize = "GridColumnResize",
    /** Hides specified grid columns from view */
    GridColumnHide = "GridColumnHide",
    /** Shows previously hidden grid columns */
    GridColumnShow = "GridColumnShow",
    /** Reorders grid columns to new positions */
    GridColumnReorder = "GridColumnReorder",
    /** Locks grid columns to prevent horizontal scrolling */
    GridColumnLock = "GridColumnLock",
    /** Unlocks previously locked grid columns */
    GridColumnUnlock = "GridColumnUnlock",
    /** Navigates to a specific page number in the grid */
    GridPage = "GridPage",
    /** Changes the number of items displayed per page in the grid */
    GridPageSize = "GridPageSize"
}

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;
}

/**
 * Represents the result of processing an AI response.
 * Contains the updated grid state and any messages to display.
 */
export declare interface GridAIResponseResult {
    /**
     * The updated grid state after processing AI commands.
     * Spread this into your Grid component props.
     */
    state: GridAIState;
    /**
     * Array of user-friendly messages describing what changes were made.
     * Can be displayed to users as feedback.
     */
    messages: string[];
    /**
     * Indicates whether the AI triggered a PDF export.
     * Handle this separately as it's an action, not state.
     */
    shouldExportPdf: boolean;
}

/**
 * Represents the grid state that can be controlled externally.
 * This interface contains all the stateful properties that can be modified through AI commands.
 *
 * @example
 * ```tsx
 * const [gridState, setGridState] = useState<GridAIState>({
 *   sort: [],
 *   filter: undefined,
 *   group: [],
 *   columnsState: initialColumns,
 *   skip: 0,
 *   take: 20
 * });
 * ```
 */
export declare interface GridAIState {
    /**
     * The current sort descriptors applied to the grid.
     * Array of sort objects defining field and direction.
     */
    sort?: SortDescriptor[];
    /**
     * The current filter descriptor applied to the grid.
     * Composite filter defining logic and filter array.
     */
    filter?: CompositeFilterDescriptor;
    /**
     * The current group descriptors applied to the grid.
     * Array of group objects defining field and aggregates.
     */
    group?: GroupDescriptor[];
    /**
     * The current column state including visibility, width, order, and lock status.
     * Array of column state objects.
     */
    columnsState?: GridColumnState[];
    /**
     * The number of items to skip for pagination.
     * Zero-based index for the first item to display.
     */
    skip?: number;
    /**
     * The number of items to take (page size) for pagination.
     * Number of items to display per page.
     */
    take?: number;
    /**
     * The highlight descriptor for highlighting cells/rows in the grid.
     * Object with dataItemKey as keys, values can be boolean (whole row) or number array (specific cells).
     *
     * @example
     * ```tsx
     * highlight: {
     *   '1': true,           // Highlight entire row with dataItemKey = 1
     *   '2': [0, 1, 2]       // Highlight cells at column indices 0, 1, 2 in row with dataItemKey = 2
     * }
     * ```
     */
    highlight?: any;
    /**
     * The select descriptor for selecting cells/rows in the grid.
     * Object with dataItemKey as keys, values can be boolean (whole row) or number array (specific cells).
     *
     * @example
     * ```tsx
     * select: {
     *   '1': true,           // Select entire row with dataItemKey = 1
     *   '2': [0, 1]          // Select cells at column indices 0 and 1 in row with dataItemKey = 2
     * }
     * ```
     */
    select?: any;
}

/**
 * @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 {
    /**
     * The data item associated with the cell.
     */
    dataItem?: any;
    /**
     * The field name of the column associated with the cell.
     */
    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> {
    /**
     * The props object containing GridColumn properties.
     */
    props: 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>;
    /**
     * The child elements to be rendered inside the filter component.
     */
    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 {
    /**
     * Determines if the column menu supports keyboard navigation.
     */
    navigatable?: boolean;
    /**
     * Determines if the column menu is visible.
     */
    show?: boolean;
}

/**
 * @example
 * ```jsx-no-run
 * const ColumnMenu = (props) =>