PHPackages beholdr/filament-trilist - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. beholdr/filament-trilist ActiveLibrary[Utility & Helpers](/categories/utility) beholdr/filament-trilist ======================== Filament plugin that adds components for working with tree data: treeselect and treeview v1.1.0(3mo ago)1120.6k↓10.7%[1 issues](https://github.com/beholdr/filament-trilist/issues)MITPHPPHP ^8.2CI passing Since Nov 21Pushed 3mo ago1 watchersCompare [ Source](https://github.com/beholdr/filament-trilist)[ Packagist](https://packagist.org/packages/beholdr/filament-trilist)[ Docs](https://github.com/beholdr/filament-trilist)[ GitHub Sponsors](https://github.com/beholdr)[ RSS](/packages/beholdr-filament-trilist/feed)WikiDiscussions 4.x Synced 1mo ago READMEChangelog (10)Dependencies (13)Versions (25)Used By (0) Filament Trilist ☘️ =================== [](#filament-trilist-️) [![Latest Version on Packagist](https://camo.githubusercontent.com/8616e73e50a5178bb2061cd96125142fa545933a00c198a301b469ade880e1e0/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6265686f6c64722f66696c616d656e742d7472696c6973742e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/beholdr/filament-trilist)[![Total Downloads](https://camo.githubusercontent.com/ca10fcd65fb9ed82b20a508cf7662619455f6879df0693d9b3cd4b584bfc05cb/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6265686f6c64722f66696c616d656e742d7472696c6973742e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/beholdr/filament-trilist) Filament plugin for working with tree data: **treeselect input** and **treeview page**. Based on [Trilist package](https://github.com/beholdr/trilist/). Support ------- [](#support) Do you like **Filament Trilist**? Please support me via [Boosty](https://boosty.to/beholdr). Features -------- [](#features) - Treeselect input and treeview page - Tree items can have multiple parents - Works with relationship or custom hierarchical data Installation ------------ [](#installation) Filament versionPackage version^5.x^1.1.x^4.x1.x.x^3.x0.5.xYou can install the package via composer: ``` composer require beholdr/filament-trilist ``` Optionally, you can publish the views using ``` php artisan vendor:publish --tag="filament-trilist-views" ``` Tree data --------- [](#tree-data) You can use hierarchical data from any source when it follows format: ``` [ ['id' => 'ID', 'label' => 'Item label', 'children' => [ ['id' => 'ID', 'label' => 'Item label', 'children' => [...]], ... ] ] ``` For example, you can use special library like [staudenmeir/laravel-adjacency-list](https://github.com/staudenmeir/laravel-adjacency-list) to get tree data: ``` Category::tree()->get()->toTree() ``` Or use custom relationship schema and methods, even with `ManyToMany` (multiple parents) relationship. Example for self-referencing entity#### Migrations [](#migrations) ``` use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; return new class extends Migration { public function up(): void { Schema::create('professions', function (Blueprint $table) { $table->id(); $table->string('label'); }); Schema::create('profession_profession', function (Blueprint $table) { $table->primary(['parent_id', 'child_id']); $table->foreignId('parent_id')->constrained('professions')->cascadeOnDelete(); $table->foreignId('child_id')->constrained('professions')->cascadeOnDelete(); }); } public function down(): void { Schema::dropIfExists('professions'); Schema::dropIfExists('profession_profession'); } }; ``` #### Model [](#model) ``` namespace App\Models; use Illuminate\Contracts\Database\Eloquent\Builder; use Illuminate\Database\Eloquent\Model; class Profession extends Model { protected $with = ['children']; public function parents() { return $this->belongsToMany(Profession::class, 'profession_profession', 'child_id', 'parent_id'); } public function children() { return $this->belongsToMany(Profession::class, 'profession_profession', 'parent_id', 'child_id'); } public function scopeRoot(Builder $builder) { $builder->doesntHave('parents'); } } ``` With given model you can generate tree data like this: ``` Profession::root()->get(); ``` Treeselect input ---------------- [](#treeselect-input) [![Treeselect input](https://private-user-images.githubusercontent.com/741973/284497640-fcb8803a-dc92-4c6b-a140-cf3bb12deb0b.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQ2NTE1MjEsIm5iZiI6MTc3NDY1MTIyMSwicGF0aCI6Ii83NDE5NzMvMjg0NDk3NjQwLWZjYjg4MDNhLWRjOTItNGM2Yi1hMTQwLWNmM2JiMTJkZWIwYi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwMzI3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDMyN1QyMjQwMjFaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0xYmU0Yzg5MWE0YzRiZTMzMjJiZDlmYWNkMDljYWFhNTcwYWVhZTZmYzY2NTcxZGM3OWIzNDMzZGY3NTFiYmEyJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.Hf200aI7ZFebdTQV_YkwvQPuEjOR33SOSS18mrE1OoM)](https://private-user-images.githubusercontent.com/741973/284497640-fcb8803a-dc92-4c6b-a140-cf3bb12deb0b.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQ2NTE1MjEsIm5iZiI6MTc3NDY1MTIyMSwicGF0aCI6Ii83NDE5NzMvMjg0NDk3NjQwLWZjYjg4MDNhLWRjOTItNGM2Yi1hMTQwLWNmM2JiMTJkZWIwYi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwMzI3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDMyN1QyMjQwMjFaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0xYmU0Yzg5MWE0YzRiZTMzMjJiZDlmYWNkMDljYWFhNTcwYWVhZTZmYzY2NTcxZGM3OWIzNDMzZGY3NTFiYmEyJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.Hf200aI7ZFebdTQV_YkwvQPuEjOR33SOSS18mrE1OoM) Import `TrilistSelect` class and use it on your Filament form: ``` use Beholdr\FilamentTrilist\Components\TrilistSelect // with custom tree data TrilistSelect::make('category_id') ->options($treeData), // or with relationship TrilistSelect::make('categories') ->relationship('categories') ->options($treeData) ->multiple(), ``` Full options list: ``` TrilistSelect::make(string $fieldName) ->label(string $fieldLabel) ->placeholder(string | Closure $placeholder) ->disabled(bool | Closure $condition) // array of tree items ->options(array | Closure $options), // first argument defines name of the relationship, second can be used to modify relationship query ->relationship(string | Closure $relationshipName, ?Closure $modifyQueryUsing = null) // array of ids (or single id) of disabled items ->disabledOptions(string | int | array | Closure $value) // multiple selection mode, default: false ->multiple(bool | Closure $condition) // animate expand/collapse, default: true ->animated(bool | Closure $condition) // expand initial selected options, default: true ->expandSelected(bool | Closure $condition) // in independent mode children auto selected when parent is selected, default: false ->independent(bool | Closure $condition) // in leafs mode, the selected value is not grouped as the parent when all child elements are selected, default: false ->leafs(bool | Closure $condition) // tree item id field name, default: 'id' ->fieldId(string | Closure $value) // tree item label field name, default: 'label' ->fieldLabel(string | Closure $value) // tree item children field name, default: 'children' ->fieldChildren(string | Closure $value) // hook for generating custom labels, default: '(item) => item.label' ->labelHook(string | Closure $value) // enable filtering of items, default: false ->searchable(bool | Closure $condition) // enable autofocus on filter field, default: false ->autofocus(bool | Closure $condition) // search input placeholder ->searchPrompt(string | Htmlable | Closure $message) // select button label ->selectButton(string | Htmlable | Closure $message) // cancel button label ->cancelButton(string | Htmlable | Closure $message) ``` ### Custom labels [](#custom-labels) If you want to customize labels you can use `labelHook` method. It should return a string that will be processed as JS (pay attention to escaping quotes and special characters): ``` TrilistSelect::make('parent_id') ->labelHook(fn () => form([ TrilistSelect::make('category_id') ->multiple() ->independent() ->options(Category::tree()->get()->toTree()) ]) ->query(function (Builder $query, array $data) { $query->when( $data['category_id'], function (Builder $query, $values) { $ids = Category::query() ->whereIn('id', $values) ->get() ->map ->descendantsAndSelf ->flatten() ->pluck('id') ->toArray(); $query->whereIn('category_id', $ids); } ); }) ->indicateUsing(function (array $data) { if (! $data['category_id']) return null; return Category::whereIn('id', $data['category_id'])->pluck('name')->toArray(); }), ``` Treeview page ------------- [](#treeview-page) [![Treeview page](https://private-user-images.githubusercontent.com/741973/287007439-225ea768-3c42-45c3-a80d-88bdb159a4e5.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQ2NTE1MjEsIm5iZiI6MTc3NDY1MTIyMSwicGF0aCI6Ii83NDE5NzMvMjg3MDA3NDM5LTIyNWVhNzY4LTNjNDItNDVjMy1hODBkLTg4YmRiMTU5YTRlNS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwMzI3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDMyN1QyMjQwMjFaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT00Y2ZmMDUxODQxZTE4ZGRlZjU5NWI1NjVmODA0MDhjYTU1NmU1MzJmZGVmYjRkYmMwOTUxOWUwMjk0NmZhMTg4JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.9dtRGAw_F-virUx-95kq6c5pOqsI7mKmH-DWZnQQdLI)](https://private-user-images.githubusercontent.com/741973/287007439-225ea768-3c42-45c3-a80d-88bdb159a4e5.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQ2NTE1MjEsIm5iZiI6MTc3NDY1MTIyMSwicGF0aCI6Ii83NDE5NzMvMjg3MDA3NDM5LTIyNWVhNzY4LTNjNDItNDVjMy1hODBkLTg4YmRiMTU5YTRlNS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwMzI3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDMyN1QyMjQwMjFaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT00Y2ZmMDUxODQxZTE4ZGRlZjU5NWI1NjVmODA0MDhjYTU1NmU1MzJmZGVmYjRkYmMwOTUxOWUwMjk0NmZhMTg4JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.9dtRGAw_F-virUx-95kq6c5pOqsI7mKmH-DWZnQQdLI) Create [custom page class](https://filamentphp.com/docs/4.x/navigation/custom-pages) inside `Pages` directory of your Filament directory. Note that page class extends `Beholdr\FilamentTrilist\Components\TrilistPage`: > If you create custom page with `php artisan make:filament-page` command, then select `No` option for creating this page in a resource. After page creation you can delete created page view file and `$view` property of the page class. ``` namespace App\Filament\Pages; use App\Filament\Resources\PostResource; use App\Models\Post; use Beholdr\FilamentTrilist\Components\TrilistPage; class TreePosts extends TrilistPage { // optional resource class if you want to link tree items to a resource edit page protected static ?string $resource = PostResource::class; // optional, if you want to override default title protected static ?string $title = 'Posts Tree'; // optional navigation parent page title protected static ?string $navigationParentItem = 'Categories'; // return array of tree items (see below about tree data) public function getTreeOptions(): array { return Post::root()->get()->toArray(); } } ``` ### Treeview options [](#treeview-options) You can set some tree options by overriding static methods in the custom page class: ``` class TreeCategories extends TrilistPage { public static function getFieldLabel(): string { return 'name'; } } ``` - `getFieldId()`: tree item id field name - `getFieldLabel()`: tree item label field name - `getFieldChildren()`: tree item children field name - `isAnimated()`: animate expand/collapse, default: true - `isSearchable()`: enable filtering of items, default: false - `getSearchPrompt()`: search input placeholder ### Custom labels [](#custom-labels-1) If you want to customize labels of the tree items, you can override `getLabelHook()` method of the `TrilistPage`. ExampleSay, model for your tree items has a `description` field that you want to output below the item name. All additional properties of your model are under `item.data` property, so description will be at `item.data.description`: ``` public function getLabelHook(): string { if (! $editRoute = $this->getEditRoute()) { return 'undefined'; } $template = route($editRoute, ['record' => '#ID#'], false); return \${item.label} \${item.data?.description ? '' + item.data.description + '' : ''}` JS; } ``` License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 50 — FairBetter than 96% of packages Maintenance77 Regular maintenance activity Popularity34 Limited adoption so far Community7 Small or concentrated contributor base Maturity65 Established project with proven stability Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~33 days Total 25 Last Release 116d ago Major Versions v0.5.3 → 3.x-dev2025-05-21 v0.5.4 → v1.0.02025-08-27 v1.1.0 → 4.x-dev2026-01-22 PHP version history (2 changes)v0.1.0PHP ^8.1 v1.0.0PHP ^8.2 ### Community Maintainers ![](https://www.gravatar.com/avatar/7c2acd8f17973138881ff45f60bfa042b6bfa0623af69be06660992aea22c358?d=identicon)[beholdr](/maintainers/beholdr) --- Top Contributors [![beholdr](https://avatars.githubusercontent.com/u/741973?v=4)](https://github.com/beholdr "beholdr (52 commits)") --- Tags filamentlaraveltreetreeselecttreeviewlaraveltreetreeviewfilamenttrilisttreeselect ### Code Quality TestsPest Static AnalysisPHPStan Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/beholdr-filament-trilist/health.svg) ``` [![Health](https://phpackages.com/badges/beholdr-filament-trilist/health.svg)](https://phpackages.com/packages/beholdr-filament-trilist) ``` ### Alternatives [codewithdennis/filament-select-tree The multi-level select field enables you to make single selections from a predefined list of options that are organized into multiple levels or depths. 320392.1k17](/packages/codewithdennis-filament-select-tree)[pboivin/filament-peek Full-screen page preview modal for Filament 253319.6k12](/packages/pboivin-filament-peek)[dotswan/filament-map-picker Easily pick and retrieve geo-coordinates using a map-based interface in your Filament applications. 124139.3k2](/packages/dotswan-filament-map-picker)[creagia/filament-code-field A Filamentphp input field to edit or view code data. 58289.3k3](/packages/creagia-filament-code-field)[swisnl/filament-backgrounds Beautiful backgrounds for Filament auth pages 54149.2k6](/packages/swisnl-filament-backgrounds)[guava/calendar Adds support for vkurko/calendar to Filament PHP. 298241.0k3](/packages/guava-calendar) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)