TreeListProps
Represents the props of the KendoReact TreeList component.
Definition
Package:@progress/kendo-react-treelist
Properties
Triggered before a cell is rendered. Useful for customizing the cell rendering.
null | ReactElement<HTMLTableCellElement, string | JSXElementConstructor<any>>
className?
string
Adds custom CSS classes to the TreeList container element.
Example:
<TreeList className="custom-treelist-class" />columnMenu?
ComponentType<any>
Specifies the column menu component to be used by the TreeList.
columnMenuFilter?
CompositeFilterDescriptor[]
Specifies the composite filter descriptor for the column menu filter.
Defines the columns of the TreeList using an array of TreeListColumnProps.
Example:
<TreeList columns={[{ field: 'name', title: 'Name' }]} />columnVirtualization?
boolean
Enables column virtualization to improve performance by rendering only visible columns.
Example:
<TreeList columnVirtualization={true} />data?
any[]
Provides the data to be displayed in the TreeList.
Example:
<TreeList data={[{ id: 1, name: 'Item 1' }]} />dataItemKey?
string
Sets the unique key for each row in the TreeList. If not set, the row index is used.
Example:
<TreeList dataItemKey="id" />editField?
string
Specifies the name of the field which will provide a Boolean representation of the edit state of the current item.
editRow?
ComponentType<TreeListRowProps>
If set and when the data item is in edit mode, the editRow value will be rendered.
expandField?
string
Specifies the name of the field which will provide a Boolean representation of the expanded state of the item.
filter?
FilterDescriptor[]
Specifies the current filter descriptors for the TreeList.
filterRow?
ComponentType<FilterRowProps>
If set, it will be rendered instead of the default FilterRow TreeList component.
Triggered before a header cell is rendered. Useful for customizing the header cell rendering.
id?
string
Specifies the id attribute of the TreeList container element.
Example:
<TreeList id="treelist-component" />navigatable?
boolean
Enables keyboard navigation for the TreeList.
noRecords?
ReactElement<TreeListNoRecordsProps, string | JSXElementConstructor<any>>
Represents the component that will be rendered when the data property of the TreeList is empty or undefined.
onColumnMenuFilterChange?
(event: TreeListColumnMenuFilterChangeEvent) => void
Triggered when the column menu filter state changes.
onColumnReorder?
(event: TreeListColumnReorderEvent) => void
Triggered when columns are reordered.
onColumnResize?
(event: TreeListColumnResizeEvent) => void
Triggered when a column is resized.
onDataStateChange?
(event: TreeListDataStateChangeEvent) => void
Triggered when the data state changes. The event must be handled to apply the new state.
onExpandChange?
(event: TreeListExpandChangeEvent) => void
Triggered when the user clicks on the expand or collapse icon of a row.
onFilterChange?
(event: TreeListFilterChangeEvent) => void
Triggered when the filter state changes. The event must be handled to apply filtering.
onHeaderSelectionChange?
(event: TreeListHeaderSelectionChangeEvent) => void
Triggered when the user clicks the checkbox of a column header whose field matches selectedField.
onItemChange?
(event: TreeListItemChangeEvent) => 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.
onKeyDown?
(event: TreeListKeyDownEvent) => void
Triggered when the user presses a keyboard key.
onPageChange?
(event: TreeListPageChangeEvent) => void
Triggered when the page state changes. The event must be handled to apply paging.
onRowClick?
(event: TreeListRowClickEvent) => void
Triggered when the user clicks a row.
onRowContextMenu?
(event: TreeListRowContextMenuEvent) => void
Triggered when the user opens the context menu of a row.
onRowDoubleClick?
(event: TreeListRowDoubleClickEvent) => void
Triggered when the user double clicks a row.
onRowDrag?
(event: TreeListRowDragEvent) => void
Triggered when a row is dragged.
onRowDrop?
(event: TreeListRowDragEvent) => void
Triggered when a row is dragged and dropped.
onSelectionChange?
(event: TreeListSelectionChangeEvent) => void
Triggered when the user selects or deselects a row or cell.
onSortChange?
(event: TreeListSortChangeEvent) => void
Triggered when the sorting state changes. The event must be handled to apply sorting.
Example:
<TreeList onSortChange={(event) => console.log(event.sort)} />pager?
ComponentType<any>
Specifies the pager component to be used by the TreeList.
reorderable?
boolean
Enables column reordering by dragging their header cells.
resizable?
boolean
Enables column resizing by dragging the edges of their header cells.
row?
ComponentType<TreeListRowProps>
Specifies the row component to be used by the TreeList.
rowDraggable?
boolean
Enables row dragging and dropping.
rowHeight?
number
Specifies the height of each row in the TreeList.
Triggered before a row is rendered. Useful for customizing the row rendering.
ReactNode
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.
Configures the selection settings for the TreeList.
selectedField?
string
Specifies the name of the field which will provide a Boolean representation of the selected state of the item.
skip?
number
Specifies the number of records to be skipped.
sort?
SortDescriptor[]
Specifies the current sorting descriptors for the TreeList.
Example:
<TreeList sort={[{ field: 'name', dir: 'asc' }]} />sortable?
SortSettings
Enables sorting functionality for the TreeList.
Example:
<TreeList sortable={{ mode: 'single', allowUnsort: true }} />style?
CSSProperties
Represents the style HTML attribute.
subItemsField?
string
Specifies the name of the field which will provide an array representation of the item subitems.
tableProps?
DetailedHTMLProps<TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>
A props object that will be passed to the underlying HTML table.
take?
number
Specifies the number of records to be taken.
toolbar?
ReactElement<TreeListToolbarProps, string | JSXElementConstructor<any>>
Represents the TreeList toolbar component.
webMcp?
boolean | WebMcpProps
Enables Web MCP tool registration so AI agents can interact with this TreeList.
Set to true to use the provider-level dataName, or pass a config object to override.
Requires a WebMcpProvider ancestor from @progress/kendo-react-webmcp.