@progress/kendo-react-data-tools/index.d.mts

Includes React Pager & React Filter component, an intuitive interface to create complex filter descriptions. KendoReact Data Tools 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 { BaseEvent } from '@progress/kendo-react-common';
import { ComponentType } from 'react';
import { CompositeFilterDescriptor } from '@progress/kendo-data-query';
import { default as default_2 } from 'prop-types';
import { DropDownListProps } from '@progress/kendo-react-dropdowns';
import { FilterComponentProps as FilterComponentProps_2 } from './FilterComponentProps';
import { FilterDescriptor } from '@progress/kendo-data-query';
import { GroupDescriptor } from '@progress/kendo-data-query';
import { JSX as JSX_2 } from 'react/jsx-runtime';
import * as React_2 from 'react';
import { SortDescriptor } from '@progress/kendo-data-query';
import { SVGIcon } from '@progress/kendo-react-common';

/**
 * @hidden
 */
export declare const addHeaders: (initialData: string, cols: string[], event: ClipboardDataEvent) => string;

/**
 * Represents the base object of the `onPageChange` event. It is usually used
 * in custom pager scenarios in cases when we don't need any of the events or the target.
 */
export declare interface BasePageChangeEvent {
    /**
     * The number of records that will be skipped.
     */
    skip: number;
    /**
     * The number of records that will be taken.
     */
    take: number;
    /**
     * A React Synthetic Event.
     */
    syntheticEvent?: React.SyntheticEvent<any>;
    /**
     * A native DOM event.
     */
    nativeEvent?: any;
    /**
     * A target change event.
     */
    targetEvent?: PagerTargetEvent;
}

/**
 * The BooleanFilter component used for editing boolean value of FilterDescriptor object.
 */
export declare class BooleanFilter extends React_2.Component<BooleanFilterProps> {
    /**
     * @hidden
     */
    static propTypes: {
        filter: default_2.Validator<object>;
        onFilterChange: default_2.Validator<(...args: any[]) => any>;
        data: default_2.Requireable<(default_2.InferProps<{
            text: default_2.Requireable<string>;
            value: default_2.Requireable<any>;
        }> | null | undefined)[]>;
        ariaLabel: default_2.Requireable<string>;
        defaultItem: default_2.Requireable<any>;
    };
    private data;
    /**
     * @hidden
     */
    render(): JSX_2.Element;
}

/**
 * @hidden
 */
export declare class BooleanFilterCell extends BooleanFilterCell_base {
}

declare const BooleanFilterCell_base: React_2.ComponentClass<FilterComponentProps_2, any>;

/**
 * The props of the BooleanFilter component.
 */
export declare interface BooleanFilterProps extends TextFilterProps {
    /**
     * A collection of text-value pairs passed to the BooleanFilter DropDownList.
     * Defaults to [ { text: 'True', value: true }, { text: 'False', value: false } ]
     */
    data?: Array<{
        text: string;
        value: any;
    }>;
    /**
     * The defaultItem passed to the BooleanFilter DropDownList.
     */
    defaultItem?: any;
}

export declare interface CellProps {
    /**
     * @hidden
     */
    id: string;
    /**
     * The index to be applied to the `aria-colindex` attribute.
     */
    ariaColumnIndex: number;
    /**
     * Indicates if the cell is selected.
     */
    isSelected: boolean;
    /** @hidden */
    isInEdit?: boolean;
    /**
     * Indicates if the cell is sorted.
     */
    isSorted?: boolean;
    /**
     * Indicates if the cell is alt.
     */
    isAlt?: boolean;
    /**
     * The expanded value of the cell.
     */
    expanded?: boolean;
    /**
     * The custom CSS classes of the cells.
     */
    className?: string;
    /**
     * The styles for the cell.
     */
    style?: React_2.CSSProperties;
    /**
     * The field to which the cell is bound.
     */
    field?: string;
    /**
     * The data item which corresponds to the current row.
     */
    dataItem: any;
    /**
     * The format that is applied to the value before the value is displayed.
     * Takes the `{0:format}` form where `format` is a standard number format, a custom number format,
     * a standard date format, or a custom date format. For more information on the supported date and number formats,
     * refer to the [kendo-intl](https://github.com/telerik/kendo-intl/blob/develop/docs/index.md) documentation.
     */
    format?: string;
    /**
     * The column span of the cell.
     */
    colSpan?: number;
    /**
     * The event that is fired when the cell is selected.
     */
    selectionChange?: (event: {
        syntheticEvent: React_2.SyntheticEvent<any>;
    }) => void;
    /**
     * The event that is fired when the cell value is changed.
     */
    onChange?: (event: {
        dataItem: any;
        syntheticEvent: React_2.SyntheticEvent<any>;
        field?: string;
        value?: any;
    }) => void;
    /**
     * A function for overriding the default rendering of the cell.
     */
    render?: (defaultRendering: React_2.ReactElement<HTMLTableCellElement> | null, props: CellProps) => React_2.ReactElement<HTMLTableCellElement> | null;
}

/**
 * The possible values of the  `type` property.
 */
export declare enum ClipboardActionType {
    copy = "copy",
    cut = "cut",
    paste = "paste"
}

/**
 * Represents the object that is returned form the `populateClipboardData` function.
 */
export declare interface ClipboardData {
    /**
     * A collection of the ClipboardItem that are selected.
     */
    copiedItems: ClipboardItem_2[];
    /**
     * A collection of the ClipboardItem that are pasted.
     */
    pastedItems: ClipboardItem_2[];
    /**
     * When the action is `copy` or `cut` - the Grid data, copied to the clipboard, in Excel-compatible format.
     * When the action is `paste` - the current clipboard data, available in the original DOM event.
     */
    clipboardData: string;
}

/**
 * Represents the object of the `ClipboardDataEvent` event.
 */
export declare interface ClipboardDataEvent {
    /**
     * Represents the type of the clipboard action.
     */
    type: ClipboardActionType;
    /**
     * Represents the native [ClipboardEvent]({% slug api_grid_gridcellssettings %})
     */
    nativeEvent?: ClipboardEvent;
    /**
     * All the Grid columns. It takes value of type of [ColumnBaseProps]({% slug api_data-tools_columnbaseprops %})&lt;[CellProps]({% slug api_data-tools_cellprops %})&gt;[]
     */
    columns: ColumnBaseProps[];
    /**
     * Passes the dataItemKey prop in the clipboard action.
     */
    dataItemKey: string;
    /**
     * Passes the clipboard prop copyHeaders value in the clipboard action.
     */
    copyHeaders?: boolean;
    /**
     * Sets the cell delimiter used when manipulating the clipboard data Defaults to `\t`.
     */
    cellDelimiter?: string;
    /**
     * Sets the row delimiter used when manipulating the clipboard data Defaults to `\r\n`.
     */
    newLineDelimiter?: string;
    /**
     * This is the item that is clicked if the action is raised from the contextMenu.
     */
    dataItem?: any;
    /**
     *  This is the column field that is clicked if the action is raised from the contextMenu.
     */
    field?: string;
}

/**
 * Represents the aria that is copied - the dataItem and the fields.
 */
declare interface ClipboardItem_2 {
    /**
     * Represents the dataItem used in the clipboard action.
     */
    dataItem: any;
    /**
     * Represents the fields used in the clipboard action.
     */
    fields: string[];
}
export { ClipboardItem_2 as ClipboardItem }

/**
 * @hidden
 */
export declare class ClipboardService {
    private clipboardEvent;
    constructor(ClipboardEventHandler: (clipboardType: ClipboardActionType, event: ClipboardEvent) => void);
    private copyHandler;
    private cutHandler;
    private pasteHandler;
    addEventListeners: (document: Document | undefined) => void;
    removeEventListeners: (document: Document | undefined) => void;
}

/**
 * Represents settings that can be added to the clipboard behavior.
 */
export declare interface ClipboardSettings {
    /**
     * Determines whether column titles or field names will be included in the generated data
     * during the `copy` and `cut` actions.
     * Defaults to `false`.
     */
    copyHeaders: boolean;
    /**
     * Determines what is the delimiter used to separate the cells.
     * Defaults to `\t`.
     */
    cellDelimiter?: string;
    /**
     * Determines what is the delimiter used to separate the rows.
     * Defaults to `'\r\n'`.
     */
    newLineDelimiter?: string;
}

/** @hidden */
export declare const closestTagName: (target: HTMLElement | null, tagName: 'TD' | 'TR' | 'TABLE') => HTMLElement | null;

export declare interface ColumnBaseProps<C = CellProps> {
    /**
     * The field to which the column is bound.
     */
    field?: string;
    /**
     * The title of the column.
     */
    title?: string;
    /**
     * Allows the column headers to be clicked and the `sortChange` event emitted.
     * You have to handle the `sortChange` event yourself and sort the data.
     * Defaults to `true`.
     */
    sortable?: boolean | ColumnSortSettings;
    /**
     * The width of the column (in pixels).
     */
    width?: string | number;
    /**
     * Defines if the header selection checkbox is checked.
     */
    headerSelectionValue?: boolean;
    /**
     * The format that is applied to the value before it is displayed.
     * Takes the `{0:format}` form where `format` is a standard number format, a custom number format,
     * a standard date format, or a custom date format. For more information on the supported date and number formats,
     * refer to the [kendo-intl](https://github.com/telerik/kendo-intl/blob/develop/docs/index.md) documentation.
     */
    format?: string;
    /**
     * Sets the custom CSS classes to the column header cell.
     */
    headerClassName?: string;
    /**
     * Sets the custom CSS classes to the column cells.
     */
    className?: string;
    /**
     * Indicates whether the column is resizable.
     */
    resizable?: boolean;
    /**
     * Indicates whether the column is reorderable.
     */
    reorderable?: boolean;
    /**
     * The width of the column (in pixels) below which the user is not able to resize the column through the UI. Defaults to `10`.
     */
    minResizableWidth?: number;
    /**
     * Determinates the position of the column.
     * Columns with smaller `orderIndex` will appear before columns with bigger `orderIndex`.
     * Defaults to `0`.
     */
    orderIndex?: number;
    /**
     * The column identifier used to distinguish columns for example in multi column header scenarios with resize and keyboard navigation.
     * Also used for unique key for rendering the component cells.
     * If not set, the component will generate unique `id` automatically.
     */
    id?: string;
    /**
     * Defines the component that will be rendered as a cell.
     * If not set, a `Cell` will be rendered by default.
     */
    cell?: ComponentType<C>;
    /**
     * @hidden
     */
    navigatable?: boolean;
    /**
     * @hidden
     */
    locked?: boolean;
}

/**
 * @hidden
 */
export declare const ColumnDefaultProps: {
    filterable: boolean;
    editable: boolean;
    sortable: boolean;
    resizable: boolean;
    reorderable: boolean;
    groupable: boolean;
};

/**
 * @hidden
 */
declare interface ColumnDraggableProps {
    pressHandler?: (draggableEvent: any, element: HTMLTableRowElement | HTMLDivElement) => void;
    dragHandler?: (draggableEvent: any, element: HTMLTableRowElement | HTMLDivElement) => void;
    releaseHandler?: (draggableEvent: any) => void;
    ariaRowIndex?: number;
    children?: React_2.ReactNode;
}

/**
 * The `ColumnMenuBooleanColumn` component. Use it for `boolean` type columns.
 */
export declare const ColumnMenuBooleanColumn: React_2.FunctionComponent<ColumnMenuProps>;

export declare const ColumnMenuBooleanFilter: React_2.FunctionComponent<ColumnMenuFilterProps>;

/**
 * The `ColumnMenuDateColumn` component. Use it for `Date` type columns.
 */
export declare const ColumnMenuDateColumn: React_2.FunctionComponent<ColumnMenuProps>;

export declare const ColumnMenuDateFilter: React_2.FunctionComponent<ColumnMenuFilterProps>;

/**
 * @hidden
 */
export declare const ColumnMenuFilterForm: React_2.FunctionComponent<ColumnMenuFormProps>;

export declare const ColumnMenuFilterLogic: React_2.FunctionComponent<DropDownListProps>;

export declare interface ColumnMenuFilterProps {
    filter: FilterDescriptor;
    onFilterChange: (event: React_2.SyntheticEvent<any>, nextFilter: FilterDescriptor, prevFilter: FilterDescriptor) => void;
    operators?: {
        text: string;
        operator: string;
    }[];
    initialFilter?: FilterDescriptor;
    input?: React_2.ComponentType<{
        value: any;
        onChange: any;
    }>;
}

export declare const ColumnMenuForm: React_2.FunctionComponent<ColumnMenuFormProps>;

export declare interface ColumnMenuFormProps {
    show?: boolean;
    onSubmit?: React_2.FormEventHandler<HTMLFormElement>;
    onReset?: React_2.FormEventHandler<HTMLFormElement>;
    actions?: React_2.ReactNode;
    children?: React_2.ReactNode;
}

export declare const ColumnMenuItem: React_2.FunctionComponent<ColumnMenuItemProps>;

export declare interface ColumnMenuItemProps {
    onClick?: (event: React_2.MouseEvent<HTMLDivElement>) => void;
    selected?: boolean;
    disabled?: boolean;
    iconClass?: string;
    svgIcon?: SVGIcon;
    title: string;
}

/**
 * The `ColumnMenuNumericColumn` component. Use it for `number` type columns.
 */
export declare const ColumnMenuNumericColumn: React_2.FunctionComponent<ColumnMenuProps>;

export declare const ColumnMenuNumericFilter: React_2.FunctionComponent<ColumnMenuFilterProps>;

/**
 * Represents the operators for the ColumnMenuTextFilter, ColumnMenuNumericFilter,
 * ColumnMenuDateFilter and ColumnMenuBooleanFilter components.
 *
 * The text field of each operator object will be resolved according to the
 * [localization messages]({% slug globalization_datatools %}#toc-messages).
 */
export declare class ColumnMenuOperators {
    /**
     * An array containing the operators for the ColumnMenuTextFilter component.
     *
     * The operators are:
     *
     * - { text: 'columnMenu.filterContainsOperator', operator: 'contains' }
     * - { text: 'columnMenu.filterNotContainsOperator', operator: 'doesnotcontain' }
     * - { text: 'columnMenu.filterEqOperator', operator: 'eq' }
     * - { text: 'columnMenu.filterNotEqOperator', operator: 'neq' }
     * - { text: 'columnMenu.filterStartsWithOperator', operator: 'startswith' }
     * - { text: 'columnMenu.filterEndsWithOperator', operator: 'endswith' }
     * - { text: 'columnMenu.filterIsNullOperator', operator: 'isnull' }
     * - { text: 'columnMenu.filterIsNotNullOperator', operator: 'isnotnull' }
     * - { text: 'columnMenu.filterIsEmptyOperator', operator: 'isempty' }
     * - { text: 'columnMenu.filterIsNotEmptyOperator', operator: 'isnotempty' }
     */
    static get text(): FilterOperator[];
    /**
     * An array containing the operators for the ColumnMenuNumericFilter component.
     *
     * The operators are:
     *
     * - { text: 'columnMenu.filterEqOperator', operator: 'eq' }
     * - { text: 'columnMenu.filterNotEqOperator', operator: 'neq' }
     * - { text: 'columnMenu.filterGteOperator', operator: 'gte' }
     * - { text: 'columnMenu.filterGtOperator', operator: 'gt' }
     * - { text: 'columnMenu.filterLteOperator', operator: 'lte' }
     * - { text: 'columnMenu.filterLtOperator', operator: 'lt' }
     * - { text: 'columnMenu.filterIsNullOperator', operator: 'isnull' }
     * - { text: 'columnMenu.filterIsNotNullOperator', operator: 'isnotnull' }
     */
    static get numeric(): FilterOperator[];
    /**
     * An array containing the operators for the ColumnMenuDateFilter component.
     *
     * The operators are:
     *
     * - { text: 'columnMenu.filterEqOperator', operator: 'eq' }
     * - { text: 'columnMenu.filterNotEqOperator', operator: 'neq' }
     * - { text: 'columnMenu.filterAfterOrEqualOperator', operator: 'gte' }
     * - { text: 'columnMenu.filterAfterOperator', operator: 'gt' }
     * - { text: 'columnMenu.filterBeforeOperator', operator: 'lt' }
     * - { text: 'columnMenu.filterBeforeOrEqualOperator', operator: 'lte' }
     * - { text: 'columnMenu.filterIsNullOperator', operator: 'isnull' }
     * - { text: 'columnMenu.filterIsNotNullOperator', operator: 'isnotnull' }
     */
    static get date(): FilterOperator[];
    /**
     * An array containing the operators for the ColumnMenuBooleanFilter component.
     *
     * The operators are:
     *
     * - { text: 'columnMenu.filterIsTrue', operator: '' }
     */
    static get boolean(): FilterOperator[];
}

/**
 * The props of the ColumnMenu component.
 */
export declare interface ColumnMenuProps {
    /**
     * The descriptors by which the data is sorted.
     */
    sort?: SortDescriptor[];
    /**
     * Fires when the sorting of the ColumnMenu is changed.
     */
    onSortChange?: (event: React_2.SyntheticEvent<any>, sort: SortDescriptor[], field: string) => void;
    /**
     * The descriptors by which the data is filtered.
     */
    filter?: CompositeFilterDescriptor[];
    /**
     * Fires when the ColumnMenu filter is changed.
     */
    onFilterChange?: (event: React_2.SyntheticEvent<any>, filter: CompositeFilterDescriptor[], field: string) => void;
    /**
     * The field to which the ColumnMenu is bound.
     */
    field?: string;
    /**
     * If set to `true`, a button for sorting in `asc` direction will be rendered.
     */
    sortAsc?: boolean;
    /**
     * If set to `true`, a button for sorting in `desc` direction will be rendered.
     */
    sortDesc?: boolean;
    /**
     * Defines the filtering UI and accepts an array with components.
     */
    filterContent?: any[];
    /**
     * Defines the initial expand state of the filters.
     * Defaults to `false`.
     */
    expandFilters?: boolean;
    /**
     * A function that returns the initial filter descriptor base on the ColumnMenu field.
     * Use it to customize the initial values of the filtering components.
     */
    initialFilter?: (field: string) => CompositeFilterDescriptor;
    /**
     * Fires when the ColumnMenu items are about to be rendered. Use it to add or remove menu items.
     * The `defaultRendering` is an array with the sorting and filtering components.
     * `props` contains the column's field and the closeMenu function which closes the ColumnMenu.
     */
    itemsRender?: (defaultRendering: (React_2.ReactElement<HTMLDivElement> | null)[], props: {
        field?: string;
        closeMenu: () => void;
    }) => React_2.ReactNode;
    /**
     * Fires when the ColumnMenu is about to be rendered. Use it to override the default rendering of the ColumnMenu.
     * The defaultRendering is an array with the button `React.ReactElement<HTMLSpanElement>` and popup `React.ReactElement<PopupProps>` components.
     */
    render?: (defaultRendering: React_2.ReactElement<any>[]) => React_2.ReactNode;
}

/**
 * The `ColumnMenuTextColumn` component. Use it for `string` type columns.
 */
export declare const ColumnMenuTextColumn: React_2.FunctionComponent<ColumnMenuProps>;

export declare const ColumnMenuTextFilter: React_2.FunctionComponent<ColumnMenuFilterProps>;

/**
 * @hidden
 */
export declare class ColumnResize<C = CellProps, H = HeaderCellProps, F = FilterCellProps> {
    /**
     * The main `colgroup` of the Grid.
     */
    colGroupMain: any | null;
    /**
     * The header `colgroup` of the Grid (if any).
     */
    colGroupHeader: any | null;
    /**
     * The footer `colgroup` of the Grid (if any).
     */
    colGroupFooter: any | null;
    columns: ExtendedColumnProps<C, H, F>[];
    /**
     * The settings for resizing the Grid.
     */
    resizable: boolean;
    onResize: (index: number, newWidth: number, oldWidth: number, originalEvent: any, end: boolean) => void;
    private isRtl;
    constructor(triggerResize: (index: number, newWidth: number, oldWidth: number, originalEvent: any, end: boolean) => void);
    setIsRtl: (isRtl: boolean) => void;
    dragHandler(event: any, column: ExtendedColumnProps<C, H, F>, dragCue: HTMLSpanElement, end: boolean): void;
    private setWidths;
    private updateColElements;
    private setColWidth;
}

/**
 * @hidden
 */
export declare class ColumnResizer extends React_2.Component<ColumnResizerResizerProps, {}> {
    private draggable;
    private isDragged;
    /**
     * @hidden
     */
    onDrag: (data: any) => void;
    /**
     * @hidden
     */
    onRelease: (data: any) => void;
    /**
     * @hidden
     */
    onDoubleClick: (event: React_2.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
    render(): JSX_2.Element;
}

/**
 * @hidden
 */
declare interface ColumnResizerResizerProps {
    resize: (event: any, dragCue: HTMLSpanElement, end: boolean) => void;
    autofit?: (event: React_2.MouseEvent<HTMLSpanElement, MouseEvent>, dragCue: HTMLSpanElement) => void;
}

/**
 * The settings for sorting the columns of the component.
 */
export declare interface ColumnSortSettings {
    /**
     * Enables the removal of the column sorting functionality.
     */
    allowUnsort?: boolean;
}

/** @hidden */
export declare const combineFilters: (first?: CompositeFilterDescriptor, second?: CompositeFilterDescriptor) => CompositeFilterDescriptor | undefined;

/**
 * @hidden
 */
export declare class CommonDragLogic<C = CellProps, H = HeaderCellProps, F = FilterCellProps> {
    columns: ExtendedColumnProps<C, H, F>[];
    reorderable: boolean;
    groupable: boolean;
    private startColumn;
    private startGroup;
    private currentColumn;
    private currentGroup;
    private columnReorder;
    private groupReorder;
    private columnToGroup;
    private dropElementClue;
    private dragElementClue;
    private groupPanelDivElement;
    constructor(columnReorder: handler, groupReorder: handler, columnToGroup: handler);
    refGroupPanelDiv: (e: HTMLDivElement | null) => void;
    refDropElementClue: (e: DropClue | null) => void;
    refDragElementClue: (e: DragClue | null) => void;
    pressHandler: (event: any, element: HTMLTableRowElement | HTMLDivElement) => void;
    dragHandler: (event: any, element: HTMLTableRowElement | HTMLDivElement) => void;
    releaseHandler: (event: any) => void;
    private getColumnIndex;
    private getGroupIndex;
    private isValid;
    private updateDragElementClue;
    private updateDropElementClue;
}

/**
 * Creates a tree from the passed dataset.
 *
 * @param {object[]} dataset - The source dataset of data items.
 * @param {(item: object) => any} getId - A function which will return the id of the data item.
 * @param {(item: object) => any} getParentId - A function which will return the data item id of its parent data item.
 * @param {string} subItemsField - The field which points to the subitems collection of each data item.
 * @returns {object[]} - A collection of the generated data items that are structured in a tree.
 */
export declare const createDataTree: (dataset: any[], getId: (item: any) => any, getParentId: (item: any) => any, subItemsField: string) => any[];

/**
 * @hidden
 */
export declare const createFilterComponent: (settings: FilterComponentSettings) => React_2.ComponentClass<FilterComponentProps, any>;

/**
 * @hidden
 */
declare interface DataItemWrapper {
    dataItem: any;
    level: number[];
    height: number;
    offsetTop: number;
    levelCount: number;
}

/**
 * The DateFilter component used for editing date value of FilterDescriptor object.
 */
export declare class DateFilter extends React_2.Component<DateFilterProps> {
    /**
     * @hidden
     */
    static propTypes: {
        filter: default_2.Validator<object>;
        onFilterChange: default_2.Validator<(...args: any[]) => any>;
        ariaLabel: default_2.Requireable<string>;
    };
    /**
     * @hidden
     */
    render(): JSX_2.Element;
    private onChange;
}

/**
 * @hidden
 */
export declare class DateFilterCell extends DateFilterCell_base {
}

declare const DateFilterCell_base: React_2.ComponentClass<FilterComponentProps_2, any>;

/**
 * The props of the DateFilter component.
 */
export declare interface DateFilterProps extends TextFilterProps {
}

/** @hidden */
export declare enum DETAIL_EXPAND_ACTION {
    DETAIL_EXPAND = "DETAIL_EXPAND_DETAIL_EXPAND",
    COLLAPSE = "DETAIL_EXPAND_COLLAPSE",
    TOGGLE = "DETAIL_EXPAND_TOGGLE",
    SET = "DETAIL_EXPAND_SET"
}

/** @hidden */
export declare type DetailExpandAction = {
    type: DETAIL_EXPAND_ACTION.TOGGLE | DETAIL_EXPAND_ACTION.DETAIL_EXPAND | DETAIL_EXPAND_ACTION.COLLAPSE;
    id: string;
} | {
    type: DETAIL_EXPAND_ACTION.SET;
    id: string;
    payload: boolean;
};

/**
 * The descriptor used to define the expanded state of the detail-row.
 */
export declare type DetailExpandDescriptor = {
    [id: string]: boolean;
};

/** @hidden */
export declare const detailExpandReducer: (state: DetailExpandDescriptor, action: DetailExpandAction) => DetailExpandDescriptor;

/**
 * @hidden
 */
export declare class DragClue extends React_2.PureComponent<any, DragClueState> {
    private elementRef;
    readonly state: DragClueState;
    hiddenElementRef: React_2.RefObject<HTMLDivElement>;
    get element(): HTMLDivElement | null;
    constructor(props: any);
    render(): JSX_2.Element;
}

/**
 * @hidden
 */
declare interface DragClueState {
    visible: boolean;
    top: number;
    left: number;
    innerText: string;
    status: 'k-i-cancel' | 'k-i-plus';
}

/**
 * @hidden
 */
export declare class DropClue extends React_2.PureComponent<any, DropClueState> {
    readonly state: DropClueState;
    hiddenElementRef: React_2.RefObject<HTMLDivElement>;
    constructor(props: any);
    render(): JSX_2.Element;
}

/**
 * @hidden
 */
declare interface DropClueState {
    visible: boolean;
    top: number;
    left: number;
    height: number;
}

/**
 * @hidden
 */
export declare enum EDIT_ACTION {
    ENTER_EDIT = "EDITING_ENTER_EDIT",
    ENTER_FIELD_EDIT = "EDITING_ENTER_FIELD_EDIT",
    ADD_EDIT = "EDITING_ADD_EDIT",
    ADD_FIELD_EDIT = "EDITING_ADD_FIELD_EDIT",
    EXIT_EDIT = "EDITING_EXIT_EDIT",
    EXIT_FIELD_EDIT = "EDITING_EXIT_FIELD_EDIT",
    TOGGLE_EDIT = "EDITING_TOGGLE_EDIT",
    TOGGLE_FIELD_EDIT = "EDITING_TOGGLE_FIELD_EDIT"
}

/**
 * @hidden
 */
export declare type EditAction = {
    type: EDIT_ACTION.ENTER_EDIT | EDIT_ACTION.ADD_EDIT | EDIT_ACTION.EXIT_EDIT | EDIT_ACTION.TOGGLE_EDIT;
    payload: {
        id: string;
    };
} | {
    type: EDIT_ACTION.ENTER_FIELD_EDIT | EDIT_ACTION.ADD_FIELD_EDIT | EDIT_ACTION.EXIT_FIELD_EDIT | EDIT_ACTION.TOGGLE_FIELD_EDIT;
    payload: {
        id: string;
        field: string;
    };
};

/**
 * The `edit` descriptor used to identify which data-items are in edit mode.
 *
 * @example
 * ```ts
 * const data = [
 *   { id: 0, name: 'Jane Doe' },
 *   { id: 1, name: 'John Doe' }
 * ]
 *
 * const edit = {
 *  1: true
 * }
 * ```
 */
export declare type EditDescriptor = {
    /**
     * The data-item id is in edit mode.
     * If the value is `true` if the whole item (row) is in edit mode.
     * If the value is an array of strings if only specific fields (cells) are in edit mode.
     */
    [id: string]: boolean | string[];
};

/**
 * @hidden
 */
export declare const editReducer: (state: EditDescriptor | undefined, action: EditAction) => EditDescriptor;

/**
 * The EnumFilter component used for editing the value of FilterDescriptor object.
 * It renders a DropDownList and allows you to choose a value from the predefined list.
 */
export declare class EnumFilter extends React_2.Component<EnumFilterProps> {
    /**
     * @hidden
     */
    static propTypes: {
        filter: default_2.Validator<object>;
        onFilterChange: default_2.Validator<(...args: any[]) => any>;
        data: default_2.Requireable<(default_2.InferProps<{
            text: default_2.Requireable<string>;
            value: default_2.Requireable<any>;
        }> | null | undefined)[]>;
        defaultItem: default_2.Requireable<any>;
        ariaLabel: default_2.Requireable<string>;
    };
    /**
     * @hidden
     */
    render(): JSX_2.Element;
    private onChange;
}

/**
 * The props of the EnumFilter component.
 */
export declare interface EnumFilterProps extends TextFilterProps {
    /**
     * A collection of text-value pairs passed to the EnumFilter DropDownList.
     */
    data?: Array<{
        text: string;
        value: any;
    }>;
    /**
     * The defaultItem passed to the EnumFilter DropDownList.
     */
    defaultItem?: any;
}

/**
 * @hidden
 */
export declare class Expression extends React_2.Component<ExpressionProps> {
    static propTypes: {
        filter: default_2.Validator<object>;
        fields: default_2.Validator<any[]>;
        ariaLabel: default_2.Requireable<string>;
        onChange: default_2.Validator<(...args: any[]) => any>;
        onRemove: default_2.Validator<(...args: any[]) => any>;
    };
    render(): JSX_2.Element;
    private onFieldChange;
    private onOperatorChange;
    private onInputChange;
    private triggerOnFilterChange;
    private onFilterRemove;
}

/**
 * @hidden
 */
export declare interface ExpressionChangeEvent extends BaseEvent<Expression> {
    prevFilter: FilterDescriptor;
    nextFilter: FilterDescriptor;
}

/**
 * @hidden
 */
export declare interface ExpressionProps {
    filter: FilterDescriptor;
    fields: Array<FieldSettings>;
    ariaLabel?: string;
    onChange: (event: ExpressionChangeEvent) => void;
    onRemove: (event: ExpressionRemoveEvent) => void;
}

/**
 * @hidden
 */
export declare interface ExpressionRemoveEvent extends BaseEvent<Expression> {
    filter: FilterDescriptor;
}

/**
 * Similar to the `Object.assign` function. Additionally, creates a new array for the subitems.
 *
 * @param {object} item - The source data item.
 * @param {string} subItemsField - The field which points to the subitems collection of each data item.
 * @param {object} propsToExtend - The props with which the source data item will be extended.
 * @returns {object} - The target data item.
 */
export declare const extendDataItem: (item: any, subItemsField: string, propsToExtend?: any) => any;

/**
 * @hidden
 */
export declare interface ExtendedColumnProps<C = CellProps, H = HeaderCellProps, F = FilterCellProps> extends TreeColumnBaseProps<C, H, F> {
    declarationIndex: number;
    parentIndex: number;
    colSpan: number;
    rowSpan: number;
    depth: number;
    kFirst?: boolean;
    index: number;
    children: ExtendedColumnProps<C, H, F>[];
    left: number;
    right: number;
    rightBorder: boolean;
    groupable: boolean;
    ariaColumnIndex: number;
    isAccessible: boolean;
}

/**
 * The FieldSettings object.
 */
export declare interface FieldSettings {
    /**
     * The field name.
     */
    name: string;
    /**
     * The field label, which will be shown in the fields DropDownList.
     */
    label: string;
    /**
     * The filter editor component. Could be any of the built-in TextFilter, NumericFilter, DateFilter, BooleanFilter or a custom component.
     */
    filter: any;
    /**
     * The collection of operators which will be passed to the operators DropDownList.
     */
    operators: Array<FilterOperator>;
    /**
     * Specifies the smallest value that can be entered.
     */
    min?: number;
    /**
     * Specifies the greatest value that can be entered.
     */
    max?: number;
}

/**
 * Represents the [KendoReact Filter component]({% slug overview_filter %}).
 */
export declare class Filter extends React_2.Component<FilterProps> {
    /**
     * @hidden
     */
    static propTypes: {
        className: default_2.Requireable<string>;
        style: default_2.Requireable<object>;
        fields: (props: FilterProps, propName: string) => Error | null;
        ariaLabelGroup: default_2.Requireable<string>;
        ariaLabelExpression: default_2.Requireable<string>;
        value: default_2.Validator<object>;
        onChange: default_2.Validator<(...args: any[]) => any>;
    };
    /**
     * @hidden
     */
    wrapperRef: React_2.RefObject<HTMLDivElement>;
    private navigation?;
    private readonly showLicenseWatermark;
    constructor(props: FilterProps);
    /**
     * @hidden
     */
    componentDidMount(): void;
    /**
     * @hidden
     */
    render(): JSX_2.Element;
    private onFilterChange;
    private onGroupRemove;
    private onKeyDown;
}

/**
 * @hidden
 */
export declare const FILTER_ROW_CLASS = "k-table-row k-filter-row";

/**
 * Filters the provided data tree according to the specified `Array<FilterDescriptor|CompositeFilterDescriptor>`.
 *
 * @param {T[]} data - The data that will be filtered.
 * @param {FilterDescriptor[]|CompositeFilterDescriptor[]} descriptors - The filter criteria that will be applied.
 * @param {string} subItemsField - The field which points to the subitems collection of each data item.
 * @returns {T[]} - The filtered data.
 */
export declare function filterBy(data: any[], descriptors: FilterDescriptor[] | CompositeFilterDescriptor[], subItemsField: string): any[];

/**
 * @hidden
 */
export declare interface FilterCellProps {
    /**
     * The column field in which the cell is located.
     */
    field?: string;
    /**
     * The function that will be called if the cell needs to notify its parent TreeList about a change.
     */
    onFilterChange?: (event: {
        filter: Array<FilterDescriptor>;
        field: string;
        syntheticEvent: React.SyntheticEvent<any>;
    }) => void;
    /**
     * The collection of `FilterDescriptor` objects that is passed by the TreeList component.
     */
    filter?: FilterDescriptor[];
    /**
     * @hidden
     */
    components?: {
        DatePicker?: any;
        DropDownList?: any;
        Input?: any;
        NumericTextBox?: any;
    };
    /**
     * @hidden
     */
    clearButtonTitle?: string;
}

/**
 * The FilterChangeEvent object.
 */
export declare interface FilterChangeEvent extends BaseEvent<Filter> {
    /**
     * The changed composite filter descriptor.
     */
    filter: CompositeFilterDescriptor;
}

/**
 * @hidden
 */
export declare interface FilterComponentProps extends FilterCellProps {
    /**
     * The list of the operators.
     */
    operators?: FilterOperator[];
    /**
     * The accessible label of the component.
     */
    ariaLabel?: string;
    /**
     * @ hidden
     */
    min?: number;
    /**
     * @hidden
     */
    max?: number;
}

/**
 * @hidden
 */
export declare interface FilterComponentSettings {
    inputComponent: (props: any) => React_2.ReactNode;
    operatorComponent: (props: any, cellProps: FilterComponentProps) => React_2.ReactNode;
    emptyFilter: FilterDescriptor;
    operators?: FilterOperator[];
}

/**
 * A filter operator object.
 */
export declare interface FilterOperator {
    /**
     * The label of the operator.
     */
    text: string;
    /**
     * The operator value.
     */
    operator: any;
}

/**
 * The props of the Filter component.
 */
export declare interface FilterProps {
    /**
     * Sets additional classes to the Filter.
     */
    className?: string;
    /**
     * The styles that are applied to the Filter.
     */
    style?: React_2.CSSProperties;
    /**
     * The fields settings of the Filter.
     */
    fields: Array<FieldSettings>;
    /**
     * The composite filter descriptor value.
     */
    value: CompositeFilterDescriptor;
    /**
     * Represents the aria-label prop of the Filter's container component.
     */
    ariaLabel?: string;
    /**
     * Represents the aria-label prop of the Filter's underlying Group component.
     */
    ariaLabelGroup?: string;
    /**
     * Represents the aria-label prop of the Filter's underlying Expression component.
     */
    ariaLabelExpression?: string;
    /**
     * The Filter onChange event.
     */
    onChange: (event: FilterChangeEvent) => void;
    /**
     * The initial composite filter descriptor which will be used when a new group is created.
     */
    defaultGroupFilter?: CompositeFilterDescriptor;
}

/**
 * @hidden
 */
export declare const FilterRow: (props: FilterRowProps) => JSX_2.Element;

/**
 * @hidden
 */
export declare interface FilterRowProps {
    columns: ExtendedColumnProps[];
    filter?: FilterDescriptor[];
    filterChange: (event: {
        filter: FilterDescriptor[];
        field: string;
        syntheticEvent: React_2.SyntheticEvent<any>;
    }) => void;
    sort?: SortDescriptor[];
    ariaRowIndex?: number;
}

/** @hidden */
export declare const findGroupExpand: (groupExpand: GroupExpandDescriptor[], group: GroupState) => GroupExpandDescriptor | undefined;

/**
 * @hidden
 */
export declare function flatData(data: any[], getChildren: (dataItem: any) => any[], itemMap: (item: any) => any): DataItemWrapper[];

/** @hidden */
export declare const flatToTree: (flat: GroupState[]) => GroupExpandDescriptor[];

/**
 * @hidden
 */
export declare const getClipboardData: (event: ClipboardDataEvent, copiedItems: ClipboardItem_2[]) => string;

/**
 * @hidden
 */
export declare const getClipboardItemsToPaste: (args: PopulateClipboardArgs, clipboardText: string) => string[][];

/**
 * @hidden
 */
export declare const getClipboardText: (copiedItems: ClipboardItem_2[], event: ClipboardDataEvent) => string;

/** @hidden */
export declare const getColumnIndex: (element: HTMLTableCellElement) => number | undefined;

/** @hidden */
export declare const getDetailExpandableOptions: (expandable?: boolean | TableExpandableSettings) => TableExpandableSettings;

/**
 * @hidden
 */
export declare const getEditableOptions: (editable?: boolean | TableEditableSettings) => Required<TableEditableSettings>;

/** @hidden */
export declare const getGroupExpandableOptions: (groupExpandable?: boolean | TableGroupExpandableSettings) => TableGroupExpandableSettings;

/**
 * Get all group ids from the data.
 *
 * @param {{data: any[]}} options - The options to be processed.
 * @returns {string[]} - Collection of all group ids from the data.
 */
export declare const getGroupIds: (options: {
    data: any;
}) => string[];

/**
 * @hidden
 */
export declare function getIndex(event: any, parent: HTMLTableRowElement | HTMLDivElement | null): number;

/**
 * Returns the data item path in the tree based on the level parameter.
 *
 * @param {any[]} tree - The data tree.
 * @param {number[]} level - The level of the target tree item.
 * @param {string} subItemsField - The field which points to the subitems collection of each data item.
 * @returns {any[]} - The path of the data item.
 */
export declare const getItemPath: (tree: any[], level: number[], subItemsField?: string) => any[];

/**
 * @hidden
 */
export declare const getItemsToPaste: (args: PopulateClipboardArgs, clipboardText: string) => any[][];

/**
 * @hidden
 */
export declare const getItemsToUpdateOnPaste: (args: PopulateClipboardArgs, selectedItems: ClipboardItem_2[], dataLength: number, dataItemKey: string) => any[];

/** @hidden */
export declare const getOffset: (offsetParent: any) => any;

/**
 * @hidden
 */
export declare const getPastedItems: (args: PopulateClipboardArgs, clipboardText: string) => ClipboardItem_2[];

/**
 * @hidden
 */
export declare const getPreviouslyCopiedItemsData: (previousCopiedItems?: ClipboardItem_2[]) => any[][];

/** @hidden */
export declare const getRowIndex: (element: HTMLTableRowElement) => number | undefined;

/** @hidden */
export declare const getSearchFromString: (search: CompositeFilterDescriptor, value: string) => CompositeFilterDescriptor;

/**
 * @hidden
 */
export declare const getSelectedItems: (args: PopulateClipboardArgs) => ClipboardItem_2[];

/**
 * Get selected state from the component selection event.
 *
 * @param {{event: TableSelectionChangeEvent, selectedState:  {[id: string]: boolean | number[]}, dataItemKey: string}} options
 * @returns {{[id: string]: boolean | number[]}} - The new selected state.
 */
export declare const getSelectedState: (options: {
    event: TableSelectionChangeEvent<any>;
    selectedState: {
        [id: string]: boolean | number[];
    };
    dataItemKey: string;
}) => {
    [id: string]: boolean | number[];
};

/**
 * Get selected state from the component KeyDown event.
 *
 * @param {{event: TableKeyDownEvent, selectedState:  {[id: string]: boolean | number[]}, dataItemKey: string}} options
 * @returns {{[id: string]: boolean | number[]}} - The new selected state.
 */
export declare const getSelectedStateFromKeyDown: (options: {
    event: TableKeyDownEvent<any>;
    selectedState: {
        [id: string]: boolean | number[];
    };
    dataItemKey: string;
}) => {
    [id: string]: boolean | number[];
};

/** @hidden */
export declare const getSelectionOptions: (selectable?: boolean | TableSelectableSettings) => Required<TableSelectableSettings>;

/** @hidden */
export declare const getStringFromSearch: (search: CompositeFilterDescriptor | undefined) => string;

/**
 * Represents the object of the `GridClipboardEvent` event.
 */
export declare interface GridClipboardEvent extends ClipboardDataEvent, ClipboardData {
}

/**
 * @hidden
 */
export declare class Group extends React_2.Component<GroupProps> {
    static propTypes: {
        filter: default_2.Validator<object>;
        fields: default_2.Validator<any[]>;
        ariaLabel: default_2.Requireable<string>;
        ariaLabelExpression: default_2.Requireable<string>;
        onChange: default_2.Validator<(...args: any[]) => any>;
        onRemove: default_2.Validator<(...args: any[]) => any>;
        defaultGroupFilter: default_2.Validator<object>;
    };
    render(): JSX_2.Element;
    private onGroupRemove;
    private onAddExpression;
    private onAddGroup;
    private onLogicAnd;
    private onLogicOr;
    private changeLogic;
    private replaceFilter;
    private onChange;
    private onRemove;
}

/** @hidden */
export declare enum GROUP_EXPAND_ACTION {
    TOGGLE = "GROUP-EXPAND_TOGGLE",
    EXPAND = "GROUP-EXPAND_EXPAND",
    COLLAPSE = "GROUP-EXPAND_COLLAPSE",
    RESET = "GROUP-EXPAND_RESET"
}

/**
 * @hidden
 */
export declare interface GroupChangeEvent extends BaseEvent<Group> {
    prevFilter: CompositeFilterDescriptor;
    nextFilter: CompositeFilterDescriptor;
}

/** @hidden */
export declare type GroupExpandAction = {
    type: GROUP_EXPAND_ACTION;
    group: GroupState;
};

/**
 * The descriptor used to define the expanded state of a group.
 */
export declare type GroupExpandDescriptor = {
    value: any;
    field: string;
    expanded?: boolean;
    groups?: GroupExpandDescriptor[];
};

/** @hidden */
export declare const groupExpandReducer: (state: GroupExpandDescriptor[], action: GroupExpandAction, options?: TableGroupExpandableSettings) => GroupExpandDescriptor[];

/**
 * @hidden
 */
export declare interface GroupProps {
    filter: CompositeFilterDescriptor;
    fields: Array<FieldSettings>;
    ariaLabel?: string;
    ariaLabelExpression?: string;
    onChange: (event: GroupChangeEvent) => void;
    onRemove: (event: GroupRemoveEvent) => void;
    defaultGroupFilter: CompositeFilterDescriptor;
}

/**
 * @hidden
 */
export declare interface GroupRemoveEvent extends BaseEvent<Group> {
    filter: CompositeFilterDescriptor;
}

/** @hidden */
export declare type GroupState = {
    value: any;
    field: string;
    expanded?: boolean;
    parents?: GroupState[];
};

/**
 * @hidden
 */
declare type handler = (prevIndex: number, nextIndex: number, nativeEvent: any) => void;

/**
 * @hidden
 */
export declare class Header extends React_2.Component<HeaderProps> {
    private element;
    componentDidMount(): void;
    render(): JSX_2.Element;
}

/**
 * @hidden
 */
export declare function HeaderCell(props: HeaderCellProps): JSX_2.Element;

/**
 * @hidden
 */
export declare interface HeaderCellBaseProps {
    /**
     * The column field in which the cell is located.
     */
    field?: string;
    /**
     * The title of the column in which the cell is located.
     */
    title?: string;
    /**
     * The `click` event handler of the cell.
     */
    onClick?: any;
    /**
     * The `selectionChange` event handler of the cell.
     */
    selectionChange: any;
    /**
     * The `selectionValue` event handler of the column in which the cell is located.
     */
    selectionValue: any;
    /**
     * A function for overriding the default rendering of the header cell.
     */
    render?: (defaultRendering: React_2.ReactNode | null, props: HeaderCellBaseProps) => React_2.ReactNode;
    /**
     * The current sort icons.
     */
    children: React_2.ReactNode;
}

/**
 * @hidden
 */
export declare interface HeaderCellProps extends HeaderCellBaseProps {
    /**
     * A function for overriding the default rendering of the header cell.
     */
    render?: (defaultRendering: React_2.ReactNode | null, props: HeaderCellProps) => React_2.ReactNode;
}

/**
 * @hidden
 */
export declare interface HeaderProps {
    headerRow: React_2.ReactElement<any>;
    filterRow?: React_2.ReactElement<any>;
    columnResize?: ColumnResize;
    reorderable?: boolean;
}

/**
 * @hidden
 */
export declare class HeaderRow<C = CellProps, H = HeaderCellProps, F = FilterCellProps> extends React_2.Component<HeaderRowProps<C, H, F>, {}> {
    cellClick: (e: React_2.MouseEvent<HTMLSpanElement> | React_2.KeyboardEvent<HTMLElement>, column: TreeColumnBaseProps<C, H, F>) => void;
    cellKeyDown: (event: React_2.KeyboardEvent<HTMLElement>, column: TreeColumnBaseProps<C, H, F>) => void;
    sortIcon(sortIndex: number): (false | JSX_2.Element)[] | null;
    render(): JSX_2.Element[];
    private cells;
}

/**
 * @hidden
 */
export declare interface HeaderRowProps<C = CellProps, H = HeaderCellProps, F = FilterCellProps> extends ColumnDraggableProps {
    sortable?: SortSettings;
    sortChange?: (e: React_2.SyntheticEvent<any>, descriptors: SortDescriptor[], field?: string) => void;
    filterChange?: (e: React_2.SyntheticEvent<any>, descriptors: FilterDescriptor[], field?: string) => void;
    sort?: SortDescriptor[];
    columns: ExtendedColumnProps<C, H, F>[];
    columnsMap: number[][];
    selectionChange: (e: any) => void;
    cellRender?: (defaultRendering: React_2.ReactNode | null, props: HeaderCellProps) => React_2.ReactNode;
    columnResize?: ColumnResize<C, H, F>;
    columnMenu?: React_2.ComponentType<ColumnMenuProps>;
    columnMenuFilter?: CompositeFilterDescriptor[];
    columnMenuFilterChange?: (e: React_2.SyntheticEvent<any>, filter: CompositeFilterDescriptor[], field?: string) => void;
}

/**
 * @hidden
 */
export declare function HeaderSelectionCell(props: HeaderSelectionCellProps): JSX_2.Element;

/**
 * @hidden
 */
export declare interface HeaderSelectionCellProps extends HeaderCellProps {
    inputId: string;
}

export declare const HeaderTdElement: {
    (props: HeaderTdElementProps): JSX_2.Element;
    displayName: string;
};

export declare interface HeaderTdElementProps extends React_2.TdHTMLAttributes<HTMLTableCellElement> {
    ariaSort?: 'none' | 'ascending' | 'descending';
    ariaLabel?: string;
    ariaColumnIndex?: number;
    ariaSelected?: boolean;
    ariaDescription?: string;
    colSpan?: number;
    rowSpan?: number;
    role?: string;
    columnId: string;
    className?: string;
    style?: any;
    children?: any;
    onKeyDown?: any;
    navigatable?: boolean;
}

export declare const HeaderThElement: {
    (props: HeaderThElementProps): JSX_2.Element;
    displayName: string;
};

export declare interface HeaderThElementProps extends React_2.ThHTMLAttributes<HTMLTableCellElement> {
    ariaSort?: 'none' | 'ascending' | 'descending';
    ariaLabel?: string;
    ariaColumnIndex?: number;
    ariaSelected?: boolean;
    ariaDescription?: string;
    colSpan?: number;
    rowSpan?: number;
    role?: string;
    columnId: string;
    className?: string;
    style?: any;
    children?: any;
    onKeyDown?