README

A Filament v4 plugin that provides tree form components including a cascading tree selector (Wunderbaum style) and a dropdown tree select.

Requirements

• PHP 8.2+
• Filament 4.0+
• Laravel 11+

Installation

composer require geekstek/filament-tree

The package will auto-register via Laravel's package discovery.

Components

1. Tree (Cascading Tree Selector)

A flat tree component with checkbox selection and cascade behavior - when you select a parent, all children are automatically selected.

use Geekstek\FilamentTree\Forms\Components\Tree;

Tree::make('permissions')
    ->label('Permissions')
    ->helperText('Click on a parent to select all children')
    ->options([
        [
            'id' => 1,
            'label' => 'System',
            'children' => [
                ['id' => 2, 'label' => 'Users'],
                ['id' => 3, 'label' => 'Roles'],
                ['id' => 4, 'label' => 'Settings'],
            ],
        ],
        [
            'id' => 5,
            'label' => 'Content',
            'children' => [
                ['id' => 6, 'label' => 'Posts'],
                ['id' => 7, 'label' => 'Pages'],
            ],
        ],
    ])
    ->disabledOptions([3]) // Disable specific node IDs
    ->live() // Enable reactive updates
    ->columnSpanFull()

Available Methods

Height Control Example

// Limit tree height to show approximately 10 rows
Tree::make('permissions')
    ->options($options)
    ->maxHeight('360px') // ~36px per row × 10 rows

// Use viewport height
Tree::make('permissions')
    ->options($options)
    ->maxHeight('50vh')

// Using integer (will be converted to pixels)
Tree::make('permissions')
    ->options($options)
    ->maxHeight(400)

2. TreeSelect (Dropdown Tree)

A dropdown component with tree structure support, powered by TreeselectJS.

use Geekstek\FilamentTree\Forms\Components\TreeSelect;

TreeSelect::make('category_id')
    ->label('Category')
    ->placeholder('Select a category...')
    ->options([
        [
            'value' => 1,
            'name' => 'Electronics',
            'children' => [
                ['value' => 2, 'name' => 'Phones'],
                ['value' => 3, 'name' => 'Laptops'],
            ],
        ],
        [
            'value' => 4,
            'name' => 'Clothing',
            'children' => [
                ['value' => 5, 'name' => 'Men'],
                ['value' => 6, 'name' => 'Women'],
            ],
        ],
    ])
    ->required()

Available Methods

Height Control Example

// Limit dropdown height
TreeSelect::make('category_id')
    ->options($options)
    ->maxHeight('250px')

// For large datasets
TreeSelect::make('category_id')
    ->options($largeDataset)
    ->maxHeight('400px')
    ->searchable() // Enable search for easier navigation

3. TreeEntry (Infolist Display)

Display tree data in infoolists with selected items highlighted.

use Geekstek\FilamentTree\Infolists\Components\TreeEntry;

TreeEntry::make('permissions')
    ->label('Assigned Permissions')
    ->options([
        [
            'id' => 1,
            'label' => 'System',
            'children' => [
                ['id' => 2, 'label' => 'Users'],
                ['id' => 3, 'label' => 'Roles'],
            ],
        ],
    ])
    ->collapsed() // Start collapsed

Available Methods

Data Structure

Tree & TreeEntry

The Tree and TreeEntry components expect data in this format:

[
    [
        'id' => 1,           // Unique identifier
        'label' => 'Node 1', // Display text
        'children' => [      // Optional nested children
            [
                'id' => 2,
                'label' => 'Child 1',
            ],
        ],
    ],
]

TreeSelect

The TreeSelect component uses TreeselectJS format:

[
    [
        'value' => 1,         // Unique identifier
        'name' => 'Node 1',   // Display text
        'children' => [       // Optional nested children
            [
                'value' => 2,
                'name' => 'Child 1',
            ],
        ],
    ],
]

Features

• ✅ Full Filament v4 compatibility
• ✅ Inherits all standard Field methods (label(), helperText(), required(), live(), etc.)
• ✅ Dark mode support
• ✅ Cascade selection (select parent → auto-select children)
• ✅ Individual node disabling
• ✅ Expand/collapse all functionality
• ✅ Select all / Deselect all
• ✅ Alpine.js powered (no jQuery dependency)

License

MIT License. See LICENSE for more information.