TreeListProps

Premium

Represents the props of the KendoReact TreeList component.

Name	Type	Default	Description
cellRender?	(defaultRendering: "null" | ReactElement<HTMLTableCellElement>, props: TreeListCellProps) => "null" | ReactElement<HTMLTableCellElement>		Triggered before a cell is rendered. Useful for customizing the cell rendering.
className?	string		Adds custom CSS classes to the TreeList container element. Example: jsx <TreeList className="custom-treelist-class" />
columnMenu?	React.ComponentType<any>
columnMenuFilter?	CompositeFilterDescriptor[]
columns?	TreeListColumnProps[]		Defines the columns of the TreeList using an array of TreeListColumnProps. Example: jsx <TreeList columns={[{ field: 'name', title: 'Name' }]} />
columnVirtualization?	boolean		Enables column virtualization to improve performance by rendering only visible columns. Example: jsx <TreeList columnVirtualization={true} />
data?	any[]		Provides the data to be displayed in the TreeList. Example: jsx <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: jsx <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?	React.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?	React.ComponentType<FilterRowProps>		If set, it will be rendered instead of the default FilterRow TreeList component.
headerCellRender?	(defaultRendering: ReactNode, props: TreeListHeaderCellProps) => ReactNode		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: jsx <TreeList id="treelist-component" />
navigatable?	boolean		Enables keyboard navigation for the TreeList.
noRecords?	React.ReactElement<TreeListNoRecordsProps>		Represents the component that will be rendered when the data property of the TreeList is empty or undefined.
onColumnMenuFilterChange?	(event: TreeListColumnMenuFilterChangeEvent) => void
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: jsx <TreeList onSortChange={(event) => console.log(event.sort)} />
pager?	React.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?	React.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.
rowRender?	(row: ReactElement<HTMLTableRowElement>, props: TreeListRowProps) => ReactNode		Triggered before a row is rendered. Useful for customizing the row rendering.
scrollable?	ScrollMode		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.
selectable?	TreeListSelectableSettings		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: jsx <TreeList sort={[{ field: 'name', dir: 'asc' }]} />
sortable?	SortSettings		Enables sorting functionality for the TreeList. Example: jsx <TreeList sortable={{ mode: 'single', allowUnsort: true }} />
style?	React.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?	React.DetailedHTMLProps<TableHTMLAttributes<HTMLTableElement>>		A props object that will be passed to the underlying HTML table.
take?	number		Specifies the number of records to be taken.
toolbar?	React.ReactElement<TreeListToolbarProps>		Represents the TreeList toolbar component.