Back

TreeView

Default

      • Button.go
      • Input.go
      • Modal.go
      • base.templ
      • shell.templ
    • main.go
    • README.md
    • CHANGELOG.md
  • go.mod
  • Makefile

Bordered

    • colors.css
    • spacing.css
    • typography.css
    • Button
    • Card

Checkbox Selection

Set Checkable: true to add checkboxes to all nodes. Checked state is tracked in Alpine via $root.checked[id].

Drag & Drop

Set Draggable: true to enable drag-to-reorder at the root level. Children still expand/collapse normally.

    • Figma files
    • Brand guidelines
    • Icon set
    • components/
    • pages/
    • styles/
    • handlers/
    • models/
  • README.md
  • Makefile

Usage

@data.TreeView(data.TreeViewProps{
    Bordered:  true,
    Checkable: true,         // adds checkboxes + Alpine state management
    Nodes: []data.TreeNode{
        {
            ID:    "src",
            Label: "src",
            Open:  true,     // initially expanded
            Children: []data.TreeNode{
                {ID: "main", Label: "main.go", Checked: true}, // pre-checked
            },
        },
        {ID: "gomod", Label: "go.mod"},  // leaf node
    },
})