Name	Type	Description
className?	`string`	Sets custom CSS classes to the TreeList DOM element.
columnMenu?	`React.ComponentType<any>`
columnMenuFilter?	`CompositeFilterDescriptor[]`
columns?	`TreeListColumnProps[]`	A collection of `TreeListColumnProps` for creating columns.
columnVirtualization?	`boolean`	Enables the virtualization of the columns (see example). If enabled, the columns outside the viewport are not rendered.
data?	`any[]`	Sets the data of the TreeList.
dataItemKey?	`string`	Sets the TreeList row key prop to the value of this field in the dataItem. If not set, the dataItem index will be used for the row key, which might lead to row not updated during paging or scrolling.
editField?	`string`	Specifies the name of the field which will provide a Boolean representation of the edit state of the current item (more information and examples).
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[]`	The descriptors by which the data is filtered (more information and examples). This affects the values and buttons in the `FilterRow` of the TreeList.
filterRow?	`React.ComponentType<FilterRowProps>`	If set, it will be rendered instead of the default `FilterRow` TreeList component.
navigatable?	`boolean`	If set to `true`, the user can use dedicated shortcuts to interact with the TreeList. By default, navigation is disabled and the TreeList content is accessible in the normal tab sequence.
noRecords?	`React.ReactElement<TreeListNoRecordsProps>`	Represents the component that will be rendered when the `data` property of the TreeList is empty or undefined.
pager?	`React.ComponentType<any>`	The pager component that the TreeList will render.
reorderable?	`boolean`	If set to `true`, the user can reorder columns by dragging their header cells.
resizable?	`boolean`	If set to `true`, the user can resize columns by dragging the edges (resize handles) of their header cells.
row?	`React.ComponentType<TreeListRowProps>`	The TreeList row component.
rowDraggable?	`boolean`	If set to `true`, the user can drag and drop rows.
rowHeight?	`number`	Defines the row height and implements equal heights for all rows.
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`	The TreeList selectable settings.
selectedField?	`string`	Specifies the name of the field which will provide a Boolean representation of the selected state of the item (see example).
skip?	`number`	The number of records that will be skipped.
sort?	`SortDescriptor[]`	The descriptors by which the data is sorted. Applies the sorting styles and buttons to the affected columns.
sortable?	`SortSettings`	Enables sorting (see example).
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`	The number of records that will be taken.
toolbar?	`React.ReactElement<TreeListToolbarProps>`	Represents the TreeList toolbar component.

Methods

cellRender

Fires when a cell is about to be rendered. Useful for overriding the default rendering of the cell.

Parameters
defaultRendering	`"null" \| ReactElement<HTMLTableCellElement>`
props	`TreeListCellProps`

Returns
`"null" \| ReactElement<HTMLTableCellElement>`

headerCellRender

Fires when a header cell is about to be rendered. Useful for overriding the default rendering of the header cell.

Parameters
defaultRendering	`ReactNode`
props	`TreeListHeaderCellProps`

Returns
`ReactNode`

onColumnMenuFilterChange

Parameters
event	`TreeListColumnMenuFilterChangeEvent`

onColumnReorder

Fires when the columns are reordered.

Parameters
event	`TreeListColumnReorderEvent`

onColumnResize

Fires when a column is resized.

Parameters
event	`TreeListColumnResizeEvent`

onDataStateChange

Fires when the data state of the TreeList is changed.

Parameters
event	`TreeListDataStateChangeEvent`

onExpandChange

Fires when the user clicks on the expand or collapse icon of a row.

Parameters
event	`TreeListExpandChangeEvent`

onFilterChange

Fires when the TreeList filter is modified through the UI (more information and examples). You have to handle the event yourself and filter the data.

Parameters
event	`TreeListFilterChangeEvent`

onHeaderSelectionChange

Fires when the user clicks the checkbox of a column header whose field matches selectedField (more information and example).

Parameters
event	`TreeListHeaderSelectionChangeEvent`

onItemChange

Fires 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 (more information and examples).

Parameters
event	`TreeListItemChangeEvent`

onKeyDown

Fires when the user press keyboard key.

Parameters
event	`TreeListKeyDownEvent`

onPageChange

Fires when the page of the TreeList is changed.

Parameters
event	`TreeListPageChangeEvent`

onRowClick

Fires when the user clicks a row.

Parameters
event	`TreeListRowClickEvent`

onRowContextMenu

Fires when the user trigger the context menu of row.

Parameters
event	`TreeListRowContextMenuEvent`

onRowDoubleClick

Fires when the user double clicks a row.

Parameters
event	`TreeListRowDoubleClickEvent`

onRowDrag

Fires when a row is dragged.

Parameters
event	`TreeListRowDragEvent`

onRowDrop

Fires when a row is dragged and dropped.

Parameters
event	`TreeListRowDragEvent`

onSelectionChange

Fires when the user tries to select or deselect a row or cell. (more information and example).

Parameters
event	`TreeListSelectionChangeEvent`

onSortChange

Fires when the sorting of the TreeList is changed (see example). You have to handle the event yourself and sort the data.

Parameters
event	`TreeListSortChangeEvent`

rowRender

Fires when a row is about to be rendered. Useful for overriding the default rendering of the row.

Parameters
row	`ReactElement<HTMLTableRowElement>`
props	`TreeListRowProps`

Returns
`ReactNode`

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Extended Reality

Free Tools

TreeListProps

In this article

Not finding the help you need?

Getting Started

Support Resources

Community