• Public
  • Public/Protected
  • All

Interface ITreeOptions


  • ITreeOptions



Optional actionMapping

actionMapping: any

Rewire which trigger causes which action using this attribute, or create custom actions / event bindings. See the Action Mapping Section for more details.

Optional allowDrag

allowDrag: boolean | IAllowDragFn

Specify if dragging tree nodes is allowed. This could be a boolean, or a function that receives a TreeNode and returns a boolean

Default value: false


options = {
 allowDrag: true

Optional allowDragoverStyling

allowDragoverStyling: boolean

Boolean flag to allow adding and removing is-dragging-over and is-dragging-over-disabled classes.

If set to false it will not add the above mentioned classes and you should handle the styling yourself with css and in the actionMapping -> mouse -> dragEnter, dragLeave

Default Value: true


options = {
  allowDrop: true,
  allowDragoverStyling: false

Optional allowDrop

allowDrop: boolean | IAllowDropFn

Specify whether dropping inside the tree is allowed. Optional types:

  • boolean
  • (element:any, to:{parent:TreeNode, index:number}):boolean A function that receives the dragged element, and the drop location (parent node and index inside the parent), and returns true or false.

Default Value: true


options = {
 allowDrop: (element, {parent, index}) => parent.isLeaf

Optional animateAcceleration

animateAcceleration: number

Increase of expand animation speed (described in multiply per 17 ms).

Default Value: 1.2

Optional animateExpand

animateExpand: boolean

Boolean whether or not to animate expand / collapse of nodes.

Default Value: false

Optional animateSpeed

animateSpeed: number

Speed of expand animation (described in pixels per 17 ms).

Default Value: 30

Optional childrenField

childrenField: string

A string representing the attribute of the node that contains the array of children.

Default value: children.

For example, if your nodes have a nodes attribute, that contains the children, use:

options = { childrenField: 'nodes' }

Optional displayField

displayField: string

A string representing the attribute of the node to display.

Default value: name

For example, if your nodes have a title attribute that should be displayed, use:

options = { displayField: 'title' }

Optional dropSlotHeight

dropSlotHeight: number

For use with useVirtualScroll option. Specify a height for drop slots (located between nodes) in pixels

Default Value: 2

Optional getChildren

getChildren: function

Function for loading a node's children. The function receives a TreeNode, and returns a value or a promise that resolves to the node's children.

This function will be called whenever a node is expanded, the hasChildren (options.hasChildrenField) field is true, and the children field is empty. The result will be loaded into the node's children attribute.


options = {
  getChildren: (node:TreeNode) => {
    return request('/api/children/' + node.id);

Type declaration

Optional getNodeClone

getNodeClone: function

Function to clone a node. Receives a TreeNode object, and returns a node object (only the data). This callback will be called when copying a node inside the tree, by either calling copyNode, or by dragging and holding the ctrl key

For example:

options: ITreeOptions = {
getNodeClone: (node) => ({
id: uuid.v4(),
name: `copy of ${node.data.name}`

Default Value: clone the node using Object.assign, and remove 'id' property

Type declaration

Optional hasChildrenField

hasChildrenField: string

A string representing the attribute of the node that indicates whether there are child nodes.

Default value: hasChildren.

For example, if your nodes have an isDirectory attribute that indicates whether there are children, use:

options = { hasChildrenField: 'isDirectory' }

Optional idField

idField: string

A string representing the attribute of the node that contains the unique ID. This will be used to construct the path, which is an array of IDs that point to the node.

Default value: id.

For example, if your nodes have a uuid attribute, that contains the unique key, use:

options = { idField: 'uuid' }

Optional isExpandedField

isExpandedField: string

A string representing the attribute of the node that contains whether the node starts as expanded.

Default value: isExpanded.

For example, if your nodes have an expanded attribute, that contains a boolean value, use:

options = { isExpandedField: 'expanded' }

Optional levelPadding

levelPadding: number

Specify padding per node (integer). Each node will have padding-left value of level * levelPadding, instead of using the default padding for children.

This option is good for example for allowing whole row selection, etc.

You can alternatively use the tree-node-level-X classes to give padding on a per-level basis.

Default value: 0

Optional nodeClass

nodeClass: function

Specify a function that returns a class per node. Useful for styling the nodes individually.


options = {
  nodeClass: (node:TreeNode) => {
    return 'icon-' + node.data.icon;

Type declaration

Optional nodeHeight

nodeHeight: number | INodeHeightFn

For use with useVirtualScroll option. Specify a height for nodes in pixels. Could be either:

  • number
  • (node: TreeNode) => number

Default Value: 22

Optional rootId

rootId: any

Specifies id of root node (virtualRoot)

Optional rtl

rtl: boolean

Makes the tree right-to-left. This include direction, expander style, and change key binding (right key collapse and left key expands instead of vice-versa)

Optional scrollContainer

scrollContainer: HTMLElement

The HTML element that is the scroll container for the tree. The default behaviour is to wrap the tree with a container that has overflow: hidden, and then the scrolling container is the viewport inside the tree component

Optional scrollOnActivate

scrollOnActivate: boolean

Whether to scroll to the node to make it visible when it is activated.

Default Value: true

Optional useCheckbox

useCheckbox: boolean

Whether to display a checkbox next to the node or not

Optional useTriState

useTriState: boolean

Whether to use master checkboxes mechanism if the useCheckbox is set to true

Optional useVirtualScroll

useVirtualScroll: boolean

Boolean flag to use the virtual scroll option.

To use this option, you must supply the height of the container, and the height of each node in the tree.

You can also specify height for the dropSlot which is located between nodes.

Default Value: false


options = {
  useVirtualScroll: true,
  nodeHeight: (node: TreeNode) => node.myHeight,
  dropSlotHeight: 3

Generated using TypeDoc