Components

On This Page

TreeView

The TreeView component displays hierarchical data in an expandable and collapsible format. It uses the TreeNode component to define the data.

Basic TreeView

  • Item 1
  • Item 2
  • Item 3
Expand/Collapse source code
Copied
Copy source sections
Copy source as is
SSR/CSR
Can be used both on the server and on the client side.
Imports
import live-web.dom
import live-web-view.content
import live-web-view.content.data
Styles
static any[] use = [TreeView]
Content
TreeView{
    data: TreeNode{
        TreeNode`Item 1`
        TreeNode{
            label: 'Item 2'

            TreeNode`Item 2.1`
            TreeNode`Item 2.2`

            TreeNode{
                label: 'Item 2.3'
                TreeNode`Item 2.3.1`
                TreeNode`Item 2.3.2`
            }
        }
        TreeNode`Item 3`
    }
}

TreeView with root node

    Root
Expand/Collapse source code
Copied
Copy source sections
Copy source as is
SSR/CSR
Can be used both on the server and on the client side.
Imports
import live-web.dom
import live-web-view.content
import live-web-view.content.data
Styles
static any[] use = [TreeView]
Content
TreeView{
    data: TreeNode{
        label: 'Root'
        TreeNode`Item 1`
        TreeNode`Item 2`
        TreeNode`Item 3`
    }
}