Download the PHP package solution-forest/filament-tree without Composer

[!IMPORTANT] Please note that we will only be updating to version 4.x, excluding any bug fixes.

Filament Tree

Filament Tree is a plugin for Filament Admin that creates hierarchical tree management with drag-and-drop functionality. Perfect for building menus, categories, organizational structures, and any nested data relationships.

🎯 Key Features:

• Drag-and-drop tree interface with unlimited depth
• Support for Widgets, Pages, and Resources
• Customizable actions, icons, and styling
• Translation support with Spatie Translatable
• Built-in create, edit, delete, and view actions
• Toolbar actions for global operations

🚀 Demo: https://filament-cms-website-demo.solutionforest.net/admin
Credentials: [email protected] / 12345678 (Auto-reset every hour)

Version Compatibility

[!IMPORTANT] We only provide updates for versions 3.x, excluding bug fixes for older versions.

Which Package Should I Use?

• Need a simple tree solution with quick setup? Use this package (filament-tree).
• Need to handle heavy-load menus or large, complex trees? Consider filament-nestable-tree.

Installation

1. Install the package:

2. Publish and register assets:

3. Publish configuration (optional):

4. For custom themes: Add to your tailwind.config.js:

Quick Start

1. Database Setup

Create your migration with the required tree structure:

2. Model Setup

Add the ModelTree trait to your Eloquent model:

3. Generate Tree Components

Choose your implementation:

Implementation Options

Tree Widgets

Perfect for embedding trees within existing resource pages or dashboard.

1. Generate the widget:

2. Configure the widget:

3. Display in resource pages:

Tree Pages

Standalone pages dedicated to tree management.

1. Generate the page:

2. Register the page:

Resource Tree Pages

Integrated tree pages within Filament resources.

1. Generate for resource:

2. Register in resource:

Tree Customization

Record Display

Customize how records appear in the tree:

Custom record titles:

Record icons:

Tree Actions

Configure actions that appear for each tree record:

Quick setup with boolean methods:

Advanced action configuration:

Toolbar Actions

Add global actions displayed above the tree (v3.1.0+):

Note: Toolbar actions are only supported in version 3.1.0 and later.

Icons and Styling

Tree depth control:

Node collapsed state:

Form Schemas

Define forms for different operations:

Advanced Features

Translation Support

1. Follow the instruction from Translatable Plugin.

2. Setup your model:

3. Configure your tree page:

Customizing Data Display in Tree Widgets

For advanced use cases, you may want to limit or customize the data displayed in your tree widget: for example, showing only items matching specific criteria or related to a parent resource.

You can achieve this by overriding the getTreeQuery method in your widget, allowing full control over the Eloquent query used to fetch records.

Custom Column Names

Override default column names if your table structure differs:

Node State Management

Performance optimization for large trees:

Conditional record display:

Configuration

The configuration file config/filament-tree.php allows you to customize default behavior:

Publish additional resources:

Best Practices

Database Design

• Always use -1 as default for parent_id - required for proper tree functionality
• Index the parent_id and order columns for better performance
• Consider adding is_active or status columns for soft filtering

Performance

• Limit tree depth with $maxDepth for better user experience
• Use eager loading when accessing tree relationships in custom code
• Consider starting with collapsed nodes for large trees

User Experience

• Provide clear icons to distinguish node types
• Use descriptive action labels and confirmation dialogs
• Group related toolbar actions logically

Development

• Use the Artisan generators for consistent code structure
• Extend configuration methods rather than overriding entire actions
• Test with deeply nested data to ensure performance

Development

Frontend Build Process

Testing

Contributing

See CONTRIBUTING for development guidelines.

Changelog

See the CHANGELOG for more information on what has changed recently.

Contributing

See CONTRIBUTING for details.

Security Vulnerabilities

If you discover any security related issues, please email [email protected] instead of using the issue tracker.

Credits

• [Carly]
• All Contributors

License

Filament Tree is open-sourced software licensed under the MIT license.

About Solution Forest

Solution Forest Web development agency based in Hong Kong. We help customers to solve their problems. We Love Open Sources.

We have built a collection of best-in-class products:

• VantagoAds: A self manage Ads Server, Simplify Your Advertising Strategy.
• GatherPro.events: A Event Photos management tools, Streamline Your Event Photos.
• Website CMS Management: Website CMS Management - Filament CMS Plugin
• Filaletter: Filaletter - Filament Newsletter Plugin