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

React TreeList enables the display of self-referencing tabular data. KendoReact TreeList 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 { CellProps } from '@progress/kendo-react-data-tools';
import { ColumnSortSettings } from '@progress/kendo-react-data-tools';
import { CommonDragLogic } from '@progress/kendo-react-data-tools';
import { ComponentType } from 'react';
import { CompositeFilterDescriptor } from '@progress/kendo-data-query';
import { createDataTree } from '@progress/kendo-react-data-tools';
import { default as default_2 } from 'prop-types';
import { extendDataItem } from '@progress/kendo-react-data-tools';
import { filterBy } from '@progress/kendo-react-data-tools';
import { FilterCellProps } from '@progress/kendo-react-data-tools';
import { FilterComponentProps } from '@progress/kendo-react-data-tools';
import { FilterDescriptor } from '@progress/kendo-data-query';
import { FilterOperator } from '@progress/kendo-react-data-tools';
import { FilterRowProps } from '@progress/kendo-react-data-tools';
import { flatData } from '@progress/kendo-react-data-tools';
import { getItemPath } from '@progress/kendo-react-data-tools';
import { getNestedValue } from '@progress/kendo-react-common';
import { getSelectedState } from '@progress/kendo-react-data-tools';
import { getSelectedStateFromKeyDown } from '@progress/kendo-react-data-tools';
import { HeaderCellProps } from '@progress/kendo-react-data-tools';
import { JSX } from 'react/jsx-runtime';
import { mapTree } from '@progress/kendo-react-common';
import { mapTreeItem } from '@progress/kendo-react-common';
import { modifySubItems } from '@progress/kendo-react-data-tools';
import { moveTreeItem } from '@progress/kendo-react-data-tools';
import { orderBy } from '@progress/kendo-react-data-tools';
import * as React_2 from 'react';
import { removeItems } from '@progress/kendo-react-data-tools';
import { setSelectedState } from '@progress/kendo-react-data-tools';
import { SortDescriptor } from '@progress/kendo-data-query';
import { SortSettings } from '@progress/kendo-react-data-tools';
import { TableDragSelectionReleaseEvent } from '@progress/kendo-react-data-tools';
import { TableKeyboardNavigationContextType } from '@progress/kendo-react-data-tools';
import { TableKeyDownEvent } from '@progress/kendo-react-data-tools';
import { TableSelectableMode } from '@progress/kendo-react-data-tools';
import { TableSelectableSettings } from '@progress/kendo-react-data-tools';
import { TableSelectionChangeEvent } from '@progress/kendo-react-data-tools';
import { ToolbarProps } from '@progress/kendo-react-buttons';
import { TreeColumnBaseProps } from '@progress/kendo-react-data-tools';
import { treeToFlat } from '@progress/kendo-react-data-tools';

declare interface ColumnDragEvent {
    /**
     * An event target.
     */
    target: TreeList;
    /**
     * A native DOM event.
     */
    nativeEvent: any;
    /**
     * The current columns collection.
     */
    columns: TreeListColumnProps[];
}

export { createDataTree }

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

export { extendDataItem }

export { filterBy }

export { flatData }

export { getItemPath }

export { getNestedValue }

export { getSelectedState }

export { getSelectedStateFromKeyDown }

export { mapTree }

export { mapTreeItem }

export { modifySubItems }

export { moveTreeItem }

export { orderBy }

export { removeItems }

declare interface RowDragClueProps {
    visible: boolean;
    top: number;
    left: number;
    text: string;
    allowDrop: boolean;
}

declare type ScrollMode = 'none' | 'scrollable' | 'virtual';

/**
 * @hidden
 */
export declare function setHeaderRowsTop(table: HTMLTableElement, toolbarHeight: number, rowHeight?: (row: HTMLTableRowElement) => string | undefined): void;

export { setSelectedState }

/**
 * @hidden
 */
export declare function tableRowsVirtualization(args: {
    rows: DataItemWrapper[];
    tableViewPortHeight: number;
    scrollTop: number;
}): DataItemWrapper[];

/**
 * Represents the [KendoReact TreeList component]({% slug get_started_treelist %}).
 */
export declare class TreeList extends React_2.Component<TreeListProps, {}> {
    /**
     * @hidden
     */
    static propTypes: {
        data: default_2.Requireable<any[]>;
        resizable: default_2.Requireable<boolean>;
        reorderable: default_2.Requireable<boolean>;
        sortable: default_2.Requireable<NonNullable<boolean | default_2.InferProps<{
            mode: default_2.Requireable<string>;
            allowUnsort: default_2.Requireable<boolean>;
        }> | null | undefined>>;
        onSortChange: default_2.Requireable<(...args: any[]) => any>;
        sort: default_2.Requireable<any[]>;
        columns: default_2.Requireable<(object | null | undefined)[]>;
        columnVirtualization: default_2.Requireable<boolean>;
        filter: default_2.Requireable<any[]>;
        onFilterChange: default_2.Requireable<(...args: any[]) => any>;
        filterRow: default_2.Requireable<any>;
        toolbar: default_2.Requireable<any>;
        noRecords: default_2.Requireable<any>;
        onExpandChange: default_2.Requireable<(...args: any[]) => any>;
        expandField: default_2.Requireable<string>;
        subItemsField: default_2.Requireable<string>;
        selectedField: default_2.Requireable<string>;
        onSelectionChange: default_2.Requireable<(...args: any[]) => any>;
        onHeaderSelectionChange: default_2.Requireable<(...args: any[]) => any>;
        onRowClick: default_2.Requireable<(...args: any[]) => any>;
        onItemChange: default_2.Requireable<(...args: any[]) => any>;
        editField: default_2.Requireable<string>;
        scrollable: default_2.Requireable<string>;
        rowHeight: default_2.Requireable<number>;
        style: default_2.Requireable<object>;
        tableProps: default_2.Requireable<object>;
        pager: default_2.Requireable<any>;
        skip: default_2.Requireable<number>;
        take: default_2.Requireable<number>;
        onPageChange: default_2.Requireable<(...args: any[]) => any>;
        onDataStateChange: default_2.Requireable<(...args: any[]) => any>;
        onColumnResize: default_2.Requireable<(...args: any[]) => any>;
        onColumnReorder: default_2.Requireable<(...args: any[]) => any>;
        dataItemKey: default_2.Requireable<string>;
        navigatable: default_2.Requireable<boolean>;
    };
    /** @hidden */
    static contextType: React_2.Context<TableKeyboardNavigationContextType | undefined>;
    /**
     * The HTML element of the TreeList component.
     */
    element: HTMLDivElement | null;
    private wrapperScrollLeft;
    private wrapperScrollTop;
    private updateOnScroll;
    private tbodyOffsetTop;
    private prevData;
    private flattedData;
    private extendedColumn;
    private columnsMap;
    private columnResize;
    protected dragLogic: CommonDragLogic<TreeListCellProps, TreeListHeaderCellProps, TreeListFilterCellProps>;
    private get _treeListId();
    private get document();
    private contextStateRef;
    private navigationStateRef;
    private readonly showLicenseWatermark;
    private readonly licenseMessage;
    constructor(props: TreeListProps);
    /**
     * Method to allow the scroll to be set to a specific row index.
     *
     * @param options - Object, containing the rowIndex to which is going to be scrolled.
     */
    scrollIntoView: (options: {
        rowIndex?: number;
    }) => void;
    /**
     * @hidden
     */
    componentDidMount(): void;
    /**
     * @hidden
     */
    getSnapshotBeforeUpdate(): null;
    /**
     * @hidden
     */
    componentDidUpdate(prevProps: TreeListProps): void;
    /**
     * @hidden
     */
    componentWillUnmount(): void;
    /**
     * @hidden
     */
    render(): JSX.Element;
    private getExtendedColumn;
    private getColumnsMap;
    private get columns();
    private get flatData();
    private onKeyDown;
    private onFocus;
    private onRowDrag;
    private onRowDrop;
    private columnReorder;
    private onResize;
    private handleOnScroll;
    private calculateSizes;
    private itemChange;
    private selectionChange;
    private onHeaderSelectionChange;
    private selectionRelease;
    private sortChange;
    private headerFilterChange;
    private filterChange;
    private columnMenuFilterChange;
    private expandChange;
    private rowClick;
    private rowDoubleClick;
    private rowContextMenu;
    private onPageChange;
    private raiseDataEvent;
    private getDataState;
    private getArguments;
    private expandedSubItems;
    private getLeafDataItems;
    private expanded;
    private hasChildren;
}

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

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

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

export declare const TreeListBooleanEditor: {
    (props: TreeListBooleanEditorProps): JSX.Element | null;
    displayName: string;
};

export declare interface TreeListBooleanEditorProps extends TreeListCellProps {
}

export declare const TreeListBooleanFilter: React_2.FunctionComponent<TreeListBooleanFilterProps>;

export declare interface TreeListBooleanFilterProps extends FilterComponentProps {
    /**
     * The list of the operators.
     */
    operators?: TreeListFilterOperator[];
}

export declare const TreeListCell: {
    (props: TreeListCellProps): JSX.Element | null;
    displayName: string;
};

/**
 * Represents the props of the TreeListCell component.
 */
export declare interface TreeListCellProps extends Omit<CellProps, 'onExpandChange' | 'render' | 'onChange'> {
    /**
     * An array of indexes of each parent and current item in the data tree.
     */
    level: number[];
    /**
     * Indicates that the data item of the cell has subitems.
     */
    hasChildren?: boolean;
    /**
     * If set to `true`, the cell will render indentation based on its level prop and
     * the icons that are used for expanding and collapsing child rows.
     */
    expandable?: boolean;
    /**
     * The index of the column. Useful for applying `aria-colindex` accessibility attribute.
     */
    colIndex: number;
    /**
     * The event that is fired when the expand or collapse icon of the cell is clicked.
     */
    onExpandChange: (event: React.MouseEvent<HTMLSpanElement>, dataItem: any, level: number[]) => void;
    /**
     * A function for overriding the default rendering of the cell.
     */
    render?: (defaultRendering: React.ReactElement<HTMLTableCellElement> | null, props: TreeListCellProps) => React.ReactElement<HTMLTableCellElement> | null;
    /**
     * The event that is fired when the cell value is changed.
     */
    onChange?: (event: {
        dataItem: any;
        level: number[];
        syntheticEvent: React.SyntheticEvent<any>;
        field?: string;
        value?: any;
    }) => void;
}

/**
 * Represents the object of the `onColumnMenuFilterChange` TreeList event.
 */
export declare interface TreeListColumnMenuFilterChangeEvent extends TreeListEvent {
    /**
     * The new `CompositeFilterDescriptor` based on the user action.
     */
    filter: CompositeFilterDescriptor[];
    /**
     * The field of the column which triggers the event.
     */
    field: string;
}

/**
 * The props of the columns of the TreeList component.
 */
export declare interface TreeListColumnProps extends Omit<TreeColumnBaseProps, 'children' | 'cell' | 'editCell'> {
    /**
     * Defines the component that will be rendered as a cell. If not set, a `TreeListCell` will be rendered by default.
     */
    cell?: ComponentType<TreeListCellProps>;
    /**
     * Defines the component that will be rendered as an edit cell.
     */
    editCell?: ComponentType<TreeListCellProps>;
    /**
     * Defines the component that will be rendered as a header cell.
     * If not set, a `TreeListHeaderCell` will be rendered by default.
     */
    headerCell?: ComponentType<TreeListHeaderCellProps>;
    /**
     * **Deprecated**. Use `filterCell` prop instead.
     */
    filter?: ComponentType<TreeListFilterCellProps>;
    /**
     * Defines the component that will be rendered as a filter cell.
     */
    filterCell?: ComponentType<TreeListFilterCellProps>;
    /**
     * A collection of child columns.
     */
    children?: TreeListColumnProps[];
    /**
     * Defines if the column is locked (frozen or sticky).
     * Locked columns are the columns that are visible at all times while the user scrolls the component horizontally.
     * Defaults to `false`.
     */
    locked?: boolean;
}

/**
 * Represents the object of the `onColumnReorder` TreeList event.
 */
export declare interface TreeListColumnReorderEvent extends ColumnDragEvent {
}

/**
 * Represents the object of the `onColumnResize` TreeList event.
 */
export declare interface TreeListColumnResizeEvent extends ColumnDragEvent {
    /**
     * The index of the column.
     */
    index: number;
    /**
     * The new width of the column.
     */
    newWidth: number;
    /**
     * The actual width of the column prior to resizing.
     */
    oldWidth: number;
    /**
     * Indicates that resizing is complete and the user has dropped the resize handler.
     */
    end: boolean;
    /**
     * The total width of the columns after the resizing.
     */
    totalWidth: number;
}

/**
 * The settings for sorting the TreeList columns.
 */
export declare type TreeListColumnSortSettings = ColumnSortSettings;

/**
 * Represents the object of the `onDataStateChange` TreeList event.
 */
export declare interface TreeListDataStateChangeEvent extends TreeListEvent {
    /**
     * The state of the TreeList based on the user action.
     */
    dataState: {
        /**
         * The descriptors that are used for sorting.
         */
        sort?: Array<SortDescriptor>;
        /**
         * The descriptors that are used for filtering.
         */
        filter?: Array<FilterDescriptor>;
        /**
         * The field of the column which triggers the event.
         */
        field?: string;
    };
}

export declare const TreeListDateEditor: {
    (props: TreeListDateEditorProps): JSX.Element | null;
    displayName: string;
};

export declare interface TreeListDateEditorProps extends TreeListCellProps {
}

export declare const TreeListDateFilter: React_2.FunctionComponent<TreeListDateFilterProps>;

export declare interface TreeListDateFilterProps extends FilterComponentProps {
    /**
     * The list of the operators.
     */
    operators?: TreeListFilterOperator[];
}

/**
 * The TreeList draggable row component.
 */
export declare class TreeListDraggableRow extends React_2.Component<TreeListRowProps, TreeListRowState> {
    /**
     * @hidden
     */
    readonly state: TreeListRowState;
    private draggable;
    private dragged;
    private draggedOver;
    /**
     * @hidden
     */
    render(): JSX.Element;
    private onPress;
    private onDrag;
    private onRelease;
}

/** @hidden */
export declare interface TreeListDragSelectionReleaseEvent extends TableDragSelectionReleaseEvent {
}

/**
 * Represents the base event object of the TreeList.
 */
export declare interface TreeListEvent extends BaseEvent<TreeList> {
}

/**
 * Represents the object of the `onExpandChange` TreeList event.
 */
export declare interface TreeListExpandChangeEvent extends TreeListEvent {
    /**
     * The data item which is expanded or collapsed.
     */
    dataItem: any;
    /**
     * An array of indexes of each parent and current item in the data tree.
     */
    level: number[];
    /**
     * The available values are:
     * - `true`&mdash;If the data item is expanded.
     * - `false`&mdash;If the data item is collapsed.
     */
    value: boolean;
}

/**
 * @hidden
 */
declare interface TreeListFilterCellProps extends FilterCellProps {
}

/**
 * Represents the object of the `onFilterChange` TreeList event.
 */
export declare interface TreeListFilterChangeEvent extends TreeListEvent {
    /**
     * The new `FilterDescriptor` based on the user action.
     */
    filter: FilterDescriptor[];
    /**
     * The field of the column which triggers the event.
     */
    field: string;
}

/**
 * The filter operator for the TreeList filters.
 */
declare interface TreeListFilterOperator extends FilterOperator {
}

export declare const TreeListHeaderCell: React_2.FunctionComponent<TreeListHeaderCellProps>;

/**
 * The props of the TreeListHeaderCell component.
 */
export declare interface TreeListHeaderCellProps extends HeaderCellProps {
}

export declare class TreeListHeaderSelectionCell extends React_2.Component<TreeListHeaderSelectionCellProps> {
    private _inputId;
    /**
     * @hidden
     */
    render(): JSX.Element;
}

export declare interface TreeListHeaderSelectionCellProps extends HeaderCellProps {
}

/**
 * Represents the object of the `onHeaderSelectionChange` TreeList event.
 */
export declare interface TreeListHeaderSelectionChangeEvent extends TreeListEvent {
    /**
     * The field of the column in which the cell is located.
     */
    field?: string;
    /**
     * The current data as flatted array.
     */
    dataItems: any[];
}

/**
 * Represents the object of the `onItemChange` TreeList event.
 */
export declare interface TreeListItemChangeEvent extends TreeListEvent {
    /**
     * The data item which corresponds to the current row.
     */
    dataItem: any;
    /**
     * An array of indexes of each parent and current item in the data tree.
     */
    level: number[];
    /**
     * The field to which the row is bound.
     */
    field?: string;
    /**
     * The value of the item.
     */
    value: any;
}

/**
 * Represents the object of the `onKeyDownEvent` TreeList event.
 */
export declare interface TreeListKeyDownEvent extends TreeListEvent, TableKeyDownEvent<TreeList> {
}

/**
 * Represents the TreeListNoRecords component.
 * The component is rendered when the `data` property of the TreeList is an empty array or undefined.
 */
export declare class TreeListNoRecords extends React_2.Component<TreeListNoRecordsProps, {}> {
    /**
     * @hidden
     */
    render(): any;
}

/**
 * The props of the TreeListNoRecords component.
 */
export declare interface TreeListNoRecordsProps {
    /**
     * The React elements which will be rendered inside the TreeList when no records are available.
     */
    children?: React.ReactNode;
}

export declare const TreeListNumericEditor: {
    (props: TreeListNumericEditorProps): React_2.ReactElement<HTMLTableCellElement, string | React_2.JSXElementConstructor<any>> | null;
    displayName: string;
};

export declare interface TreeListNumericEditorProps extends TreeListCellProps {
}

export declare const TreeListNumericFilter: React_2.FunctionComponent<TreeListNumericFilterProps>;

export declare interface TreeListNumericFilterProps extends FilterComponentProps {
    /**
     * The list of the operators.
     */
    operators?: TreeListFilterOperator[];
}

/**
 * Represents the object of the `onPageChange` TreeList event.
 */
export declare interface TreeListPageChangeEvent extends TreeListEvent {
    /**
     * The number of records that will be skipped.
     */
    skip: number;
    /**
     * The number of records that will be taken.
     */
    take: number;
}

/**
 * Represents the props of the [KendoReact TreeList component]({% slug get_started_treelist %}).
 */
export declare interface TreeListProps {
    /**
     * Sets the unique key for each row in the TreeList. If not set, the row index is used.
     *
     * Example:
     * ```jsx
     * <TreeList dataItemKey="id" />
     * ```
     */
    dataItemKey?: string;
    /**
     * Adds custom CSS classes to the TreeList container element.
     *
     * Example:
     * ```jsx
     * <TreeList className="custom-treelist-class" />
     * ```
     */
    className?: string;
    /**
     * Specifies the `id` attribute of the TreeList container element.
     *
     * Example:
     * ```jsx
     * <TreeList id="treelist-component" />
     * ```
     */
    id?: string;
    /**
     * Defines the columns of the TreeList using an array of `TreeListColumnProps`.
     *
     * Example:
     * ```jsx
     * <TreeList columns={[{ field: 'name', title: 'Name' }]} />
     * ```
     */
    columns?: TreeListColumnProps[];
    /**
     * Enables column virtualization to improve performance by rendering only visible columns.
     *
     * Example:
     * ```jsx
     * <TreeList columnVirtualization={true} />
     * ```
     */
    columnVirtualization?: boolean;
    /**
     * Provides the data to be displayed in the TreeList.
     *
     * Example:
     * ```jsx
     * <TreeList data={[{ id: 1, name: 'Item 1' }]} />
     * ```
     */
    data?: any[];
    /**
     * Enables sorting functionality for the TreeList.
     *
     * Example:
     * ```jsx
     * <TreeList sortable={{ mode: 'single', allowUnsort: true }} />
     * ```
     */
    sortable?: SortSettings;
    /**
     * Triggered when the sorting state changes. The event must be handled to apply sorting.
     *
     * Example:
     * ```jsx
     * <TreeList onSortChange={(event) => console.log(event.sort)} />
     * ```
     */
    onSortChange?: (event: TreeListSortChangeEvent) => void;
    /**
     * Specifies the current sorting descriptors for the TreeList.
     *
     * Example:
     * ```jsx
     * <TreeList sort={[{ field: 'name', dir: 'asc' }]} />
     * ```
     */
    sort?: SortDescriptor[];
    /**
     * If set, it will be rendered instead of the default `FilterRow` TreeList component.
     */
    filterRow?: React.ComponentType<FilterRowProps>;
    /**
     * If set and when the data item is in edit mode, the `editRow` value will be rendered.
     */
    editRow?: React.ComponentType<TreeListRowProps>;
    /**
     * Represents the TreeList toolbar component.
     */
    toolbar?: React.ReactElement<TreeListToolbarProps>;
    /**
     * Represents the component that will be rendered when the `data` property of the TreeList is empty or undefined.
     */
    noRecords?: React.ReactElement<TreeListNoRecordsProps>;
    /**
     * Specifies the current filter descriptors for the TreeList.
     */
    filter?: FilterDescriptor[];
    /**
     * Triggered when the filter state changes. The event must be handled to apply filtering.
     */
    onFilterChange?: (event: TreeListFilterChangeEvent) => void;
    /**
     * Triggered when the user clicks on the expand or collapse icon of a row.
     */
    onExpandChange?: (event: TreeListExpandChangeEvent) => void;
    /**
     * Specifies the name of the field which will provide a Boolean representation of the expanded state of the item.
     */
    expandField?: string;
    /**
     * Specifies the name of the field which will provide an array representation of the item subitems.
     */
    subItemsField?: string;
    /**
     * Configures the selection settings for the TreeList.
     */
    selectable?: TreeListSelectableSettings;
    /**
     * Specifies the name of the field which will provide a Boolean representation of the selected state of the item.
     */
    selectedField?: string;
    /**
     * Triggered when the user selects or deselects a row or cell.
     */
    onSelectionChange?: (event: TreeListSelectionChangeEvent) => void;
    /**
     * Triggered when the user presses a keyboard key.
     */
    onKeyDown?: (event: TreeListKeyDownEvent) => void;
    /**
     * Triggered when the user clicks the checkbox of a column header whose `field` matches `selectedField`.
     */
    onHeaderSelectionChange?: (event: TreeListHeaderSelectionChangeEvent) => void;
    /**
     * Triggered when the user changes the values of the item.
     * The event is not debounced and fires on every `onChange` event of the input in the current `EditCell`.
     */
    onItemChange?: (event: TreeListItemChangeEvent) => void;
    /**
     * Triggered when the user clicks a row.
     */
    onRowClick?: (event: TreeListRowClickEvent) => void;
    /**
     * Triggered when the user double clicks a row.
     */
    onRowDoubleClick?: (event: TreeListRowDoubleClickEvent) => void;
    /**
     * Triggered when the user opens the context menu of a row.
     */
    onRowContextMenu?: (event: TreeListRowContextMenuEvent) => void;
    /**
     * Specifies the name of the field which will provide a Boolean representation of the edit state of the current item.
     */
    editField?: string;
    /**
     * Defines the scroll mode of the TreeList.
     *
     * The available options are:
     * - `none`&mdash;Renders no scrollbar.
     * - `scrollable`&mdash;Represents the default scroll mode of the TreeList.
     * Requires you to set the `overflow` and `height` (for vertical scrolling),
     * or `width` (for horizontal scrolling) styles.
     * - `virtual`&mdash;Enables the vertical virtual scrolling of the TreeList.
     * Requires you to set the `overflow` and `height` styles and `rowHeight` prop of the TreeList.
     */
    scrollable?: ScrollMode;
    /**
     * Enables column resizing by dragging the edges of their header cells.
     */
    resizable?: boolean;
    /**
     * Enables column reordering by dragging their header cells.
     */
    reorderable?: boolean;
    /**
     * Enables row dragging and dropping.
     */
    rowDraggable?: boolean;
    /**
     * Specifies the height of each row in the TreeList.
     */
    rowHeight?: number;
    /**
     * Represents the `style` HTML attribute.
     */
    style?: React.CSSProperties;
    /**
     * A props object that will be passed to the underlying HTML table.
     */
    tableProps?: React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>;
    /**
     * Specifies the column menu component to be used by the TreeList.
     */
    columnMenu?: React.ComponentType<any>;
    /**
     * Specifies the composite filter descriptor for the column menu filter.
     */
    columnMenuFilter?: CompositeFilterDescriptor[];
    /**
     * Triggered when the column menu filter state changes.
     */
    onColumnMenuFilterChange?: (event: TreeListColumnMenuFilterChangeEvent) => void;
    /**
     * Specifies the pager component to be used by the TreeList.
     */
    pager?: React.ComponentType<any>;
    /**
     * Specifies the number of records to be skipped.
     */
    skip?: number;
    /**
     * Specifies the number of records to be taken.
     */
    take?: number;
    /**
     * Specifies the row component to be used by the TreeList.
     */
    row?: React.ComponentType<TreeListRowProps>;
    /**
     * Enables keyboard navigation for the TreeList.
     */
    navigatable?: boolean;
    /**
     * Triggered when the page state changes. The event must be handled to apply paging.
     */
    onPageChange?: (event: TreeListPageChangeEvent) => void;
    /**
     * Triggered when the data state changes. The event must be handled to apply the new state.
     */
    onDataStateChange?: (event: TreeListDataStateChangeEvent) => void;
    /**
     * Triggered when a column is resized.
     */
    onColumnResize?: (event: TreeListColumnResizeEvent) => void;
    /**
     * Triggered when columns are reordered.
     */
    onColumnReorder?: (event: TreeListColumnReorderEvent) => void;
    /**
     * Triggered when a row is dragged.
     */
    onRowDrag?: (event: TreeListRowDragEvent) => void;
    /**
     * Triggered when a row is dragged and dropped.
     */
    onRowDrop?: (event: TreeListRowDragEvent) => void;
    /**
     * Triggered before a row is rendered. Useful for customizing the row rendering.
     */
    rowRender?: (row: React.ReactElement<HTMLTableRowElement>, props: TreeListRowProps) => React.ReactNode;
    /**
     * Triggered before a cell is rendered. Useful for customizing the cell rendering.
     */
    cellRender?: (defaultRendering: React.ReactElement<HTMLTableCellElement> | null, props: TreeListCellProps) => React.ReactElement<HTMLTableCellElement> | null;
    /**
     * Triggered before a header cell is rendered. Useful for customizing the header cell rendering.
     */
    headerCellRender?: (defaultRendering: React.ReactNode | null, props: TreeListHeaderCellProps) => React.ReactNode;
}

/**
 * The default row component of the TreeList.
 */
export declare const TreeListRow: React_2.ForwardRefExoticComponent<TreeListRowProps & React_2.RefAttributes<HTMLTableRowElement>>;

/**
 * Represents the object of the `onRowClick` TreeList event.
 */
export declare interface TreeListRowClickEvent extends TreeListEvent {
    /**
     * The data item which corresponds to the clicked row.
     */
    dataItem: any;
    /**
     * An array of indexes of each parent and current item in the data tree.
     */
    level: number[];
}

/**
 * Represents the object of the `onRowContextMenu` TreeList event.
 */
export declare interface TreeListRowContextMenuEvent extends TreeListEvent {
    /**
     * The data item which corresponds to the clicked row.
     */
    dataItem: any;
    /**
     * An array of indexes of each parent and current item in the data tree.
     */
    level: number[];
}

/**
 * Represents the object of the `onRowDoubleClick` TreeList event.
 */
export declare interface TreeListRowDoubleClickEvent extends TreeListEvent {
    /**
     * The data item which corresponds to the clicked row.
     */
    dataItem: any;
    /**
     * An array of indexes of each parent and current item in the data tree.
     */
    level: number[];
}

/**
 * Represents the object of the TreeList row Drag and Drop event.
 */
export declare interface TreeListRowDragEvent {
    /**
     * A native DOM event.
     */
    nativeEvent: any;
    /**
     * An event target.
     */
    target: TreeList;
    /**
     * The level of the dragged row.
     * The level represents an array of indexes of each parent and current item in the data tree.
     */
    dragged: number[];
    /**
     * The level of the draggedOver row.
     * The level represents an array of indexes of each parent and current item in the data tree.
     */
    draggedOver: number[] | null;
    /**
     * The data item which corresponds to the dragged row.
     */
    draggedItem: any;
}

/**
 * The props that the TreeList passes to the TreeListRow component when creating it.
 * Accessible during the `rowRender` callback of the TreeList.
 */
export declare interface TreeListRowProps {
    /**
     * The `data` object that represents the current row.
     */
    dataItem: any;
    /**
     * The event that is fired when the row is clicked.
     */
    onClick?: any;
    /**
     * The event that is fired when the row is double clicked.
     */
    onDoubleClick?: any;
    /**
     * The event that is fired when the row context menu is triggered.
     */
    onContextMenu?: any;
    /**
     * The name of the field which will provide a Boolean representation of the selected state of the item.
     */
    selectedField?: string;
    /**
     * Sets the height of the row.
     */
    rowHeight?: number;
    /**
     * A function for overriding the default rendering of the row.
     */
    render?: (row: React.ReactElement<HTMLTableRowElement>, props: TreeListRowProps) => React.ReactNode;
    /**
     * An array of indexes of each parent and current item in the data tree.
     */
    level: number[];
    /**
     * Fires when a row is dragged.
     */
    onDrag?: (event: {
        nativeEvent: any;
        dragged: number[];
        draggedOver: number[] | null;
        draggedItem: any;
    }) => void;
    /**
     * Fires when a row is dragged and dropped.
     */
    onDrop?: (event: {
        nativeEvent: any;
        dragged: number[];
        draggedOver: number[] | null;
        draggedItem: any;
    }) => void;
    /**
     * The expanded state of the row. Useful for applying `aria-expanded` accessibility attribute.
     */
    expanded: boolean;
    /**
     * The index of the row. Useful for applying `aria-rowindex` accessibility attribute.
     */
    rowIndex: number;
    /**
     * @hidden
     */
    children: React.ReactNode;
    /**
     * @hidden
     */
    levels: number[][];
    /**
     * @hidden
     */
    isAltRow?: boolean;
    /**
     * The index to be applied to the `aria-rowindex` attribute.
     */
    ariaRowIndex?: number;
    /**
     * The count of items on current level, applied to the `aria-setsize` attribute.
     */
    ariaSetSize?: number;
    /**
     * The index of the item on current level, applied to the `aria-posinset` attribute.
     */
    ariaPosInSet?: number;
    /**
     * Indicates if the row is selected.
     */
    isSelected: boolean;
}

declare interface TreeListRowState {
    clueProps: RowDragClueProps;
}

/**
 * Represents the available selection modes.
 */
export declare type TreeListSelectableMode = TableSelectableMode;

/**
 * Represents the TreeList selectable settings.
 */
export declare interface TreeListSelectableSettings extends TableSelectableSettings {
    /**
     * The available values are:
     * * `single`
     * * `multiple`
     *
     * @default "multiple"
     */
    mode?: TreeListSelectableMode;
}

export declare const TreeListSelectionCell: {
    (props: TreeListSelectionCellProps): JSX.Element | null;
    displayName: string;
};

export declare interface TreeListSelectionCellProps extends TreeListCellProps {
}

/**
 * Represents the object of the `onSelectionChange` TreeList event.
 */
export declare interface TreeListSelectionChangeEvent extends TreeListEvent, TableSelectionChangeEvent<TreeList> {
    /**
     * An array of indexes of each parent and current item in the data tree.
     */
    level: number[];
}

/**
 * Represents the object of the `onSortChange` TreeList event.
 */
export declare interface TreeListSortChangeEvent extends TreeListEvent {
    /**
     * The new `SortDescriptor` according to the user action.
     */
    sort: SortDescriptor[];
    /**
     * The field of the column which triggers the event.
     */
    field: string;
}

/**
 * The settings for sorting the TreeList data.
 */
export declare type TreeListSortSettings = SortSettings;

export declare const TreeListTextEditor: {
    (props: TreeListTextEditorProps): JSX.Element | null;
    displayName: string;
};

export declare interface TreeListTextEditorProps extends TreeListCellProps {
}

export declare const TreeListTextFilter: React_2.FunctionComponent<TreeListTextFilterProps>;

export declare interface TreeListTextFilterProps extends FilterComponentProps {
    /**
     * The list of the operators.
     */
    operators?: TreeListFilterOperator[];
}

/**
 * Represents the TreeListToolbar component rendered by the [KendoReact TreeList component]({% slug overview_treelist %}).
 */
export declare const TreeListToolbar: React_2.ForwardRefExoticComponent<TreeListToolbarProps & React_2.RefAttributes<TreeListToolbarHandle>>;

export declare type TreeListToolbar = TreeListToolbarHandle;

/**
 * Represents the object which is returned from the `ref` callback of the [TreeListToolbar]({% slug api_treelist_treelisttoolbar %}).
 *
 * For more information about Refs, refer to the [React Refs & Dom](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom) article.
 */
export declare interface TreeListToolbarHandle {
    /**
     * The DOM element of the TreeListToolbar.
     */
    element: HTMLDivElement | null;
    /**
     * The props of the TreeListToolbar.
     */
    props: TreeListToolbarProps;
}

/**
 * The props of the TreeListToolbar component.
 */
export declare interface TreeListToolbarProps extends ToolbarProps {
    /**
     * The React elements that will be rendered inside the toolbar of the TreeList.
     */
    children?: React.ReactNode;
}

export { treeToFlat }

export { }