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

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 } from 'react/jsx-runtime';
import * as React_2 from 'react';
import { SortDescriptor } from '@progress/kendo-data-query';
import { State } 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.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 applied to the `aria-colindex` attribute.
     */
    ariaColumnIndex: number;
    /**
     * Indicates if the cell is selected.
     */
    isSelected: boolean;
    /** @hidden */
    isHighlighted?: boolean;
    /** @hidden */
    isInEdit?: boolean;
    /**
     * Indicates if the cell is sorted.
     */
    isSorted?: boolean;
    /**
     * Indicates if the cell is alt.
     */
    isAlt?: boolean;
    /**
     * Indicates if the cell is expanded.
     */
    expanded?: boolean;
    /**
     * Custom CSS classes for the cell.
     */
    className?: string;
    /**
     * Inline styles for the cell.
     */
    style?: React_2.CSSProperties;
    /**
     * The data field that the cell binds to.
     */
    field?: string;
    /**
     * The data item for the current row.
     */
    dataItem: any;
    /**
     * The format applied to the value before display.
     * 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.
     */
    format?: string;
    /**
     * The column span of the cell.
     */
    colSpan?: number;
    /**
     * Fires when the cell is selected.
     */
    selectionChange?: (event: {
        syntheticEvent: React_2.SyntheticEvent<any>;
    }) => void;
    /**
     * Fires when the cell value changes.
     */
    onChange?: (event: {
        dataItem: any;
        syntheticEvent: React_2.SyntheticEvent<any>;
        field?: string;
        value?: any;
    }) => void;
    /**
     * Overrides the default cell rendering.
     */
    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> {
    /**
     * Sets the data field that the column binds to.
     */
    field?: string;
    /**
     * Sets the column header text.
     */
    title?: string;
    /**
     * Enables header click to emit the `sortChange` event. Handle `sortChange` to sort the data.
     *
     * @default true
     */
    sortable?: boolean | ColumnSortSettings;
    /**
     * Sets the width of the column (in pixels).
     */
    width?: string | number;
    /**
     * Indicates that the header selection checkbox is checked when `true`.
     */
    headerSelectionValue?: boolean;
    /**
     * Applies a format to the value before display.
     * 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 supported formats see the
     * [kendo-intl](https://github.com/telerik/kendo-intl/blob/develop/docs/index.md) documentation.
     */
    format?: string;
    /**
     * Sets custom CSS classes on the header cell.
     */
    headerClassName?: string;
    /**
     * Sets custom CSS classes on the column cells.
     */
    className?: string;
    /**
     * Enables column resizing when `true`.
     *
     * @default true
     */
    resizable?: boolean;
    /**
     * Enables column reordering when `true`.
     *
     * @default true
     */
    reorderable?: boolean;
    /**
     * Disables the ability to reorder when another column is dragged over it or tried to be reordered with keyboard.
     *
     * @default false
     */
    disableReorder?: boolean;
    /**
     * Sets the minimum resize width (in pixels).
     *
     * @default 10
     */
    minResizableWidth?: number;
    /**
     * Determines the column position. Smaller `orderIndex` values render first.
     *
     * @default 0
     */
    orderIndex?: number;
    /**
     * Sets the column id for distinguishing columns (multi header, resize, or keyboard navigation scenarios).
     * Also used as the unique key for rendering cells. If not set, a unique id is generated.
     */
    id?: string;
    /**
     * Defines the component rendered as a cell. If not set, a `Cell` renders.
     */
    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;
}

/**
 * Represents 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>;

/**
 * Represents 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 {
    /** The current filter descriptor for the column */
    filter: FilterDescriptor;
    /** Event handler for filter changes */
    onFilterChange: (event: React_2.SyntheticEvent<any>, nextFilter: FilterDescriptor, prevFilter: FilterDescriptor) => void;
    /** Available filter operators for the column */
    operators?: {
        text: string;
        operator: string;
    }[];
    /** Initial filter descriptor when creating a new filter */
    initialFilter?: FilterDescriptor;
    /** Custom input component for filter value entry */
    input?: React_2.ComponentType<{
        value: any;
        onChange: any;
    }>;
}

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

export declare interface ColumnMenuFormProps {
    /** Whether to show the form */
    show?: boolean;
    /** Event handler for form submission */
    onSubmit?: React_2.FormEventHandler<HTMLFormElement>;
    /** Event handler for form reset */
    onReset?: React_2.FormEventHandler<HTMLFormElement>;
    /** Action buttons or custom action elements */
    actions?: React_2.ReactNode;
    /** Form content and child elements */
    children?: React_2.ReactNode;
}

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

/**
 * Defines the props of the ColumnMenuItem component.
 */
export declare interface ColumnMenuItemProps {
    /**
     * Fires when the item is clicked.
     */
    onClick?: (event: React_2.MouseEvent<HTMLDivElement>) => void;
    /**
     * Indicates that the item is selected when `true`.
     */
    selected?: boolean;
    /**
     * Disables the item when `true`.
     */
    disabled?: boolean;
    /**
     * Sets the font icon CSS class.
     */
    iconClass?: string;
    /**
     * Sets the SVG icon definition.
     */
    svgIcon?: SVGIcon;
    /**
     * Sets the item title text.
     */
    title: string;
}

/**
 * Represents 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[];
}

/**
 * Defines the props of the ColumnMenu component.
 */
export declare interface ColumnMenuProps {
    /**
     * Sets the `SortDescriptor[]` applied to the data.
     */
    sort?: SortDescriptor[];
    /**
     * Fires when sorting changes. Receives the browser event, the new `SortDescriptor[]`, and the column `field`.
     */
    onSortChange?: (event: React_2.SyntheticEvent<any>, sort: SortDescriptor[], field: string) => void;
    /**
     * Sets the `CompositeFilterDescriptor[]` applied to the data.
     */
    filter?: CompositeFilterDescriptor[];
    /**
     * Fires when filtering changes. Receives the browser event, the new `CompositeFilterDescriptor[]`, and the column `field`.
     */
    onFilterChange?: (event: React_2.SyntheticEvent<any>, filter: CompositeFilterDescriptor[], field: string) => void;
    /**
     * Sets the column `field` the menu operates on.
     */
    field?: string;
    /**
     * Shows the ascending sort button when `true`.
     *
     * @default false
     */
    sortAsc?: boolean;
    /**
     * Shows the descending sort button when `true`.
     *
     * @default false
     */
    sortDesc?: boolean;
    /**
     * Provides the filtering UI components in render order. Supply up to three components: first filter, logic, second filter.
     */
    filterContent?: any[];
    /**
     * Sets the initial expand state of the filters.
     *
     * @default false
     */
    expandFilters?: boolean;
    /**
     * Returns the initial `CompositeFilterDescriptor` based on the current `field`. Use to customize starting filter values.
     */
    initialFilter?: (field: string) => CompositeFilterDescriptor;
    /**
     * Fires before the ColumnMenu items render. Use to add or remove items.
     * `defaultRendering` holds sorting and filtering elements.
     * `props` exposes the column `field` and `closeMenu()` helper.
     */
    itemsRender?: (defaultRendering: (React_2.ReactElement<HTMLDivElement> | null)[], props: {
        field?: string;
        closeMenu: () => void;
    }) => React_2.ReactNode;
    /**
     * Fires before the ColumnMenu renders. Use to override the entire rendering.
     * `defaultRendering` contains the menu button and popup elements (and license watermark when present).
     */
    render?: (defaultRendering: React_2.ReactElement<any>[]) => React_2.ReactNode;
}

/**
 * Represents 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.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;
}

/**
 * Represents a data source with data presentation operations (filtering, sorting, paging, grouping).
 *
 * @template T - The type of data items in the data source. Defaults to any.
 */
export declare type DataSource<T extends object = any> = {
    /** The array of data items. */
    data: T[];
    /**
     * Sets the data items in the data source.
     *
     * @param value - The array of new data items.
     */
    setData: (value: T[]) => void;
    /** The total number of data items. */
    total: number;
    /** The schema used for data validation and transformation. */
    schema: DataSourceProps<T>['schema'];
    /** The current sort descriptors applied to the data. */
    sort: SortDescriptor[] | undefined;
    /**
     * Sets the sort descriptors for the data.
     *
     * @param value - The new sort descriptors.
     */
    setSort: (value: SortDescriptor[] | undefined) => void;
    /** The current filter descriptor applied to the data. */
    filter: CompositeFilterDescriptor | undefined;
    /**
     * Sets the filter descriptor for the data.
     *
     * @param value - The new filter descriptor.
     */
    setFilter: (value: CompositeFilterDescriptor | undefined) => void;
    /** The current skip value for pagination. */
    skip: number | undefined;
    /**
     * Sets the skip value for pagination.
     *
     * @param value - The new skip value.
     */
    setSkip: (value: number | undefined) => void;
    /** The current take value for pagination. */
    take: number | undefined;
    /**
     * Sets the take value for pagination.
     *
     * @param value - The new take value.
     */
    setTake: (value: number | undefined) => void;
    /** The current group descriptors applied to the data. */
    group: GroupDescriptor[] | undefined;
    /**
     * Sets the group descriptors for the data.
     *
     * @param value - The new group descriptors.
     */
    setGroup: (value: GroupDescriptor[] | undefined) => void;
    /** The current data state, including sorting, filtering, and pagination. */
    dataState: Partial<DataSourceProps<T>>;
    /**
     * Sets the data state, including sorting, filtering, and pagination.
     *
     * @param dataState - The new data state.
     */
    setDataState: (dataState: Partial<DataSourceProps<T>>) => void;
    /**
     * Sets the total number of data items.
     *
     * @param value - The new total value.
     */
    setTotal: (value: number | undefined) => void;
};

/**
 * Describes the options for configuring the useDataSource hook.
 *
 * @template T - The type of data items in the data source. Defaults to any.
 */
export declare type DataSourceProps<T extends object = any> = {
    /**
     * The total number of records in the data source.
     */
    total?: number;
    /**
     * The initial total number of records in the data source.
     */
    defaultTotal?: number;
    /**
     * The current data array to be managed by the hook.
     * This represents the data items that are currently available in the data source.
     * If not provided, the `defaultData` will be used as the initial value.
     */
    data?: T[];
    /**
     * The initial data array to be managed by the hook.
     */
    defaultData?: T[];
    /**
     * The current sorting configuration.
     */
    sort?: SortDescriptor[];
    /**
     * The initial sorting configuration.
     */
    defaultSort?: SortDescriptor[];
    /**
     * The current filter configuration.
     */
    filter?: CompositeFilterDescriptor;
    /**
     * The initial filter configuration.
     */
    defaultFilter?: CompositeFilterDescriptor;
    /**
     * The current number of records to skip (for paging).
     */
    skip?: number;
    /**
     * The initial number of records to skip (for paging).
     */
    defaultSkip?: number;
    /**
     * The current number of records to take per page.
     */
    take?: number;
    /**
     * The initial number of records to take per page.
     */
    defaultTake?: number;
    /**
     * The current grouping configuration.
     */
    group?: GroupDescriptor[];
    /**
     * The initial grouping configuration.
     */
    defaultGroup?: GroupDescriptor[];
    /**
     * Specifies whether filtering is enabled.
     *
     * @default true
     */
    filterable?: boolean;
    /**
     * Specifies whether sorting is enabled.
     *
     * @default true
     */
    sortable?: boolean;
    /**
     * Specifies whether paging is enabled.
     *
     * @default true
     */
    pageable?: boolean;
    /**
     * Specifies whether grouping is enabled.
     *
     * @default true
     */
    groupable?: boolean;
    /**
     * Configuration for the data schema, including model definition.
     */
    schema: {
        model: {
            /**
             * The field that serves as the unique identifier for records.
             */
            id: string;
        };
    };
};

/**
 * 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.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 | null>;
    get element(): HTMLDivElement | null;
    constructor(props: any);
    render(): JSX.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 | null>;
    constructor(props: any);
    render(): JSX.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.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.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 | null>;
    private navigation?;
    private readonly showLicenseWatermark;
    private readonly licenseMessage?;
    constructor(props: FilterProps);
    /**
     * @hidden
     */
    componentDidMount(): void;
    /**
     * @hidden
     */
    render(): JSX.Element;
    private onFilterChange;
    private onGroupRemove;
    /**
     * @hidden
     * Shared vertical navigation logic for ArrowUp / ArrowDown keys.
     */
    private navigateVertical;
    private onKeyDown;
    /**
     * Classifies the currently active element for navigation decisions.
     */
    private classifyActive;
}

/**
 * @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 {
    /**
     * Adds custom CSS classes to the Filter's root element.
     */
    className?: string;
    /**
     * Applies custom styles to the Filter's root element.
     */
    style?: React_2.CSSProperties;
    /**
     * Defines the field settings for the Filter. Each field represents a filterable column.
     *
     * @example
     * fields: [
     *   { name: "ProductName", label: "Product Name", type: "string" },
     *   { name: "Price", label: "Price", type: "number" }
     * ]
     */
    fields: Array<FieldSettings>;
    /**
     * Specifies the composite filter descriptor value.
     * This object defines the current state of the applied filters.
     *
     * @example
     * value: {
     *   logic: "and",
     *   filters: [
     *     { field: "ProductName", operator: "contains", value: "Chai" },
     *     { field: "Price", operator: "gte", value: 20 }
     *   ]
     * }
     */
    value: CompositeFilterDescriptor;
    /**
     * Provides an accessible label for the Filter's container component.
     * Similar to the [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) attribute.
     */
    ariaLabel?: string;
    /**
     * Provides an accessible label for the Filter's underlying Group component.
     */
    ariaLabelGroup?: string;
    /**
     * Provides an accessible label for the Filter's underlying Expression component.
     */
    ariaLabelExpression?: string;
    /**
     * The Filter onChange event.
     *
     * @param event - The event object containing the updated filter descriptor.
     */
    onChange: (event: FilterChangeEvent) => void;
    /**
     * Specifies the initial composite filter descriptor used when a new group is created.
     *
     * @example
     * defaultGroupFilter: {
     *   logic: "and",
     *   filters: []
     * }
     */
    defaultGroupFilter?: CompositeFilterDescriptor;
}

/**
 * @hidden
 */
export declare const FilterRow: (props: FilterRowProps) => JSX.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