Skip to content

Customization ​

FlexTree lets you customize key fields and extend node fields.

Key Fields ​

In FlexTree, by default every node has the five key fields id, level, leftValue, rightValue, and name. To store multiple trees in a single table, you additionally need the treeId field.

You can customize the key fields with the following approach:

ts

const tree = new FlexTreeManager<{},
// Generic parameter: node extension fields
    {
        id:['pk',string],      // id field name and type
        treeId:['tree',number],
        name:string
    }
>('tree', {
    // Custom field names
    fields:{
        id:'pk',
        treeId:'tree',
        name:'title',
        leftValue:'lft',
        rightValue:"rgt",
        level:'lv'
    }
})
  • The above renames the id field to pk, treeId to tree, name to title, leftValue to lft, rightValue to rgt, and level to lv.
  • The generic parameter re-declares the names and types of the key fields.
  • The type of the treeId field can be number or string. When a tree's identifier is a string in your business domain (such as "org" or "dept"), you can declare it as treeId:['tree',string].

Extension Fields ​

In addition to the five key fields id, level, leftValue, rightValue, and name, you can declare other fields via the first generic parameter, for example:

ts

const tree = new FlexTreeManager<{
    size:number
    color:string
    icon:string
},
// Generic parameter: node extension fields
    {
        id:['pk',string],      // id field name and type
        treeId:['tree',number],
        name:string
    }
>('tree', {
    // Custom field names
    fields:{
        id:'pk',
        treeId:'tree',
        name:'title',
        leftValue:'lft',
        rightValue:"rgt",
        level:'lv'
    }
})