/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2026 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ import { SortDescriptor, FilterDescriptor, CompositeFilterDescriptor } from '@progress/kendo-data-query'; import { TreeListSortChangeEvent, TreeListFilterChangeEvent, TreeListExpandChangeEvent, TreeListSelectionChangeEvent, TreeListHeaderSelectionChangeEvent, TreeListItemChangeEvent, TreeListDataStateChangeEvent, TreeListRowClickEvent, TreeListColumnResizeEvent, TreeListColumnReorderEvent, TreeListPageChangeEvent, TreeListRowDragEvent, TreeListColumnMenuFilterChangeEvent, TreeListRowDoubleClickEvent, TreeListRowContextMenuEvent, TreeListKeyDownEvent } from './events.js'; import { ScrollMode } from '../ScrollMode.js'; import { TreeListCellProps } from './TreeListCellProps.js'; import { SortSettings as TreeListSortSettings, FilterRowProps } from '@progress/kendo-react-data-tools'; import { TreeListRowProps } from './TreeListRowProps.js'; import { TreeListHeaderCellProps } from './TreeListHeaderCellProps.js'; import { TreeListColumnProps } from './TreeListColumnProps.js'; import { TreeListToolbarProps } from './TreeListToolbarProps.js'; import { TreeListNoRecordsProps } from './TreeListNoRecordsProps.js'; import { TreeListSelectableSettings } from './TreeListSelectableSettings.js'; /** * Represents the props of the [KendoReact TreeList component](https://www.telerik.com/kendo-react-ui/components/treelist/get-started). */ export interface TreeListProps { /** * Sets the unique key for each row in the TreeList. If not set, the row index is used. * * Example: * ```jsx * * ``` */ dataItemKey?: string; /** * Adds custom CSS classes to the TreeList container element. * * Example: * ```jsx * * ``` */ className?: string; /** * Specifies the `id` attribute of the TreeList container element. * * Example: * ```jsx * * ``` */ id?: string; /** * Defines the columns of the TreeList using an array of `TreeListColumnProps`. * * Example: * ```jsx * * ``` */ columns?: TreeListColumnProps[]; /** * Enables column virtualization to improve performance by rendering only visible columns. * * Example: * ```jsx * * ``` */ columnVirtualization?: boolean; /** * Provides the data to be displayed in the TreeList. * * Example: * ```jsx * * ``` */ data?: any[]; /** * Enables sorting functionality for the TreeList. * * Example: * ```jsx * * ``` */ sortable?: TreeListSortSettings; /** * Triggered when the sorting state changes. The event must be handled to apply sorting. * * Example: * ```jsx * console.log(event.sort)} /> * ``` */ onSortChange?: (event: TreeListSortChangeEvent) => void; /** * Specifies the current sorting descriptors for the TreeList. * * Example: * ```jsx * * ``` */ sort?: SortDescriptor[]; /** * If set, it will be rendered instead of the default `FilterRow` TreeList component. */ filterRow?: React.ComponentType; /** * If set and when the data item is in edit mode, the `editRow` value will be rendered. */ editRow?: React.ComponentType; /** * Represents the TreeList toolbar component. */ toolbar?: React.ReactElement; /** * Represents the component that will be rendered when the `data` property of the TreeList is empty or undefined. */ noRecords?: React.ReactElement; /** * 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`—Renders no scrollbar. * - `scrollable`—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`—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, HTMLTableElement>; /** * Specifies the column menu component to be used by the TreeList. */ columnMenu?: React.ComponentType; /** * 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; /** * 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; /** * 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, props: TreeListRowProps) => React.ReactNode; /** * Triggered before a cell is rendered. Useful for customizing the cell rendering. */ cellRender?: (defaultRendering: React.ReactElement | null, props: TreeListCellProps) => React.ReactElement | null; /** * Triggered before a header cell is rendered. Useful for customizing the header cell rendering. */ headerCellRender?: (defaultRendering: React.ReactNode | null, props: TreeListHeaderCellProps) => React.ReactNode; }