TreeView

TreeView provides a hierarchical tree structure for displaying nested data with expand/collapse functionality, selection management, and customisable rendering. Perfect for file systems, folder hierarchies, navigation menus, and any nested data structure.

Key Features

• Automatic tree building from flat data with parent_id relationships
• Expand/collapse nodes with smooth animations
• Single or multi-select node selection
• Custom node rendering with badges and icons
• Action buttons on hover for CRUD operations
• Comprehensive API for programmatic control
• Event callbacks for all interactions
• Theme-aware with light/dark mode support

When to Use TreeView

• File Systems: Display folders and files with hierarchical structure
• Navigation: Multi-level navigation menus and sitemap structures
• Organisation: Category hierarchies, taxonomies, org charts
• Data Management: Hierarchical data browsing and selection

Basic Usage

// Simple hierarchical data
const folders = [
    { id: 1, name: 'Documents', parent_id: null },
    { id: 2, name: 'Work', parent_id: 1 },
    { id: 3, name: 'Personal', parent_id: 1 },
    { id: 4, name: 'Reports', parent_id: 2 }
];

// Create TreeView
const tree = Domma.elements.treeView('#tree', {
    data: folders,
    expandedByDefault: true,
    selectable: true,
    onSelect: (nodeId, node) => {
        console.log('Selected:', node.name);
    }
});

// Control programmatically
tree.expandAll();      // Expand all nodes
tree.collapseAll();    // Collapse all nodes
tree.select(nodeId);   // Select a node
tree.refresh();        // Re-render tree

Add a hierarchical tree view to your page in three simple steps

Step 1: Add Container Element

Create a container div for the tree:

<div id="my-tree"></div>

Step 2: Include Domma

Add Domma CSS and JavaScript to your page:

<!-- CSS -->
<link rel="stylesheet" href="dist/domma.css">
<link rel="stylesheet" href="dist/elements.css">

<!-- JavaScript -->
<script src="dist/domma.min.js"></script>

Step 3: Initialize the TreeView

Call Domma.elements.treeView() with hierarchical data:

// Prepare hierarchical data (flat structure with parent_id)
const folders = [
    { id: 1, name: 'Documents', parent_id: null },
    { id: 2, name: 'Work', parent_id: 1 },
    { id: 3, name: 'Personal', parent_id: 1 },
    { id: 4, name: 'Projects', parent_id: 2 },
    { id: 5, name: 'Reports', parent_id: 2 }
];

// Initialize the tree
const tree = Domma.elements.treeView('#my-tree', {
    data: folders,           // Hierarchical data array
    expandedByDefault: true, // Start with nodes expanded
    selectable: true,        // Allow node selection
    onSelect: (nodeId, node) => {
        console.log('Selected:', node.name);
    },
    onExpand: (nodeId) => {
        console.log('Node expanded:', nodeId);
    }
});

// Programmatic control
tree.expandAll();    // Expand all nodes
tree.collapseAll();  // Collapse all nodes
tree.select(nodeId); // Select a node

A simple hierarchical tree with default styling. Click nodes to select them, click the chevron to expand/collapse.

const tree = Domma.elements.treeView('#tree1', {
    data: [
        { id: 1, name: 'Root', parent_id: null },
        { id: 2, name: 'Child 1', parent_id: 1 },
        { id: 3, name: 'Child 2', parent_id: 1 },
        { id: 4, name: 'Grandchild', parent_id: 2 }
    ]
});

Add custom icons to tree nodes using the icon property. Uses Domma's icon system.

Domma.elements.treeView('#tree2', {
    data: [
        { id: 1, name: 'Documents', parent_id: null, icon: 'folder' },
        { id: 2, name: 'Images', parent_id: null, icon: 'folder' },
        { id: 3, name: 'Report.pdf', parent_id: 1, icon: 'file-text' },
        { id: 4, name: 'Photo.jpg', parent_id: 2, icon: 'image' }
    ]
});

Display counts or status indicators using the getBadge callback. Perfect for showing item counts.

Domma.elements.treeView('#tree3', {
    data: [
        { id: 1, name: 'Projects', parent_id: null, count: 12 },
        { id: 2, name: 'Work', parent_id: 1, count: 5 },
        { id: 3, name: 'Personal', parent_id: 1, count: 7 },
        { id: 4, name: 'Archive', parent_id: null, count: 25 }
    ],
    getBadge: (node) => node.count || null
});

Add action buttons that appear on hover. Perfect for CRUD operations like add, edit, and delete.

Domma.elements.treeView('#tree4', {
    data: [
        { id: 1, name: 'Folder 1', parent_id: null },
        { id: 2, name: 'Folder 2', parent_id: null },
        { id: 3, name: 'Subfolder', parent_id: 1 }
    ],
    actions: [
        { name: 'add', icon: 'plus', tooltip: 'Add subfolder' },
        { name: 'edit', icon: 'edit', tooltip: 'Edit' },
        { name: 'delete', icon: 'trash', tooltip: 'Delete' }
    ],
    onAction: (action, nodeId, node) => {
        Domma.elements.toast(`${action}: ${node.name}`, { type: 'info' });
    }
});

Fully customise node appearance using the renderNode callback. Add file sizes, metadata, or any custom HTML.

Domma.elements.treeView('#tree5', {
    data: [
        { id: 1, name: 'index.js', parent_id: null, icon: 'file-text', size: '2.4 KB' },
        { id: 2, name: 'package.json', parent_id: null, icon: 'package', size: '1.2 KB' },
        { id: 3, name: 'src', parent_id: null, icon: 'folder', size: '' },
        { id: 4, name: 'utils.js', parent_id: 3, icon: 'file-text', size: '3.1 KB' }
    ],
    renderNode: (node, depth, state) => {
        const iconColor = node.icon === 'folder' ? '#f59e0b' : '#6b7280';
        return `
            <span data-icon="${node.icon}" style="color: ${iconColor};"></span>
            <span style="flex: 1;">${node.name}</span>
            ${node.size ? `<span style="color: var(--dm-slate-500); font-size: 0.75rem;">${node.size}</span>` : ''}
        `;
    }
});

React to user interactions with event callbacks. Monitor selections, expansions, and custom actions.

Domma.elements.treeView('#tree6', {
    data: [
        { id: 1, name: 'Node 1', parent_id: null },
        { id: 2, name: 'Node 2', parent_id: null },
        { id: 3, name: 'Child', parent_id: 1 }
    ],
    onSelect: (nodeId, node) => {
        console.log('Selected:', node.name);
    },
    onExpand: (nodeId, node) => {
        console.log('Expanded:', node.name);
    },
    onCollapse: (nodeId, node) => {
        console.log('Collapsed:', node.name);
    }
});

Control the tree programmatically using the comprehensive API. Expand, collapse, select, and navigate nodes.

const tree = Domma.elements.treeView('#tree', { data });

// Expansion
tree.expandAll();           // Expand all nodes
tree.collapseAll();         // Collapse all nodes
tree.toggle(nodeId);        // Toggle specific node
tree.expand(nodeId);        // Expand specific node
tree.collapse(nodeId);      // Collapse specific node

// Selection
tree.select(nodeId);        // Select a node
tree.deselect(nodeId);      // Deselect a node
tree.selectAll();           // Select all (multiSelect only)
tree.deselectAll();         // Clear all selections
tree.getSelected();         // Get array of selected IDs

// Navigation
tree.getParent(nodeId);     // Get parent node
tree.getChildren(nodeId);   // Get child nodes
tree.getAncestors(nodeId);  // Get path to root
tree.getDescendants(nodeId);// Get all descendants
tree.getLevel(nodeId);      // Get depth level

// Data
tree.setData(newData);      // Replace tree data
tree.refresh();             // Re-render tree
tree.updateNode(id, data);  // Update specific node
tree.getData();             // Get hierarchical data
tree.getFlatData();         // Get flat array

// Utilities
tree.find(predicate);       // Find first matching node
tree.filter(predicate);     // Find all matching nodes
tree.scrollToNode(nodeId);  // Scroll into view

Data Configuration

Behaviour Options

Callback Options

Override these CSS variables to customise TreeView appearance and match your design system.

Example Override

:root {
    /* Highlight selected nodes */
    --dm-primary: #059669;
}

Full CSS Customisation Cheat-Sheet →