The multi-level select field lets you pick one or multiple options from a list that is neatly organized into different levels.
License: MIT License
Hey there! I'm thrilled to have you visit my GitHub profile. I'm Dennis, and I'm passionate about coding, creativity, and collaboration. Here's a little bit about me:
If you find my work valuable or just want to show your appreciation, you can buy me a coffee! โ๏ธ
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "github-actions[bot]")
What is independent, expandSelected, grouped?
Switching these options I didn't notice any difference :(
Need more examples plz :)
public static function form(Form $form): Form
{
return $form
->schema([
TextInput::make('name')->maxLength(255)->required(),
TextInput::make('slug')->maxLength(255)->required(),
TextInput::make('position')->numeric(),
SelectTree::make('parent_id')
->withCount()
->enableBranchNode()
->relationship('parent', 'name', 'parent_id')
]);
}3.1
8.3
10.43
No response
No response
The triat \Concerns\HasPivotData; is no longer there availible in Filament Checkout the link
https://github.com/filamentphp/filament/tree/3.x/packages/forms/src/Concerns
Triat Not Found
3.1.40
8.2
10.0
No response
No response
Please add the options to disable multiple items selection and set the max / min options
I found a serious but weird issue. ๐ซจ
My models are Category and Product where the category has child categories.
I used this code to select a category for the product and this was working fine but for the last couple of days it is not working as expected.
SelectTree::make('category_id')
->label('Category')
->required()
->relationship('category', 'name', 'parent_id')
->defaultOpenLevel(5)
->placeholder('Select category'),This renders the field as I wanted:
I've selected the category and submitted the form but got this response:
SelectTree::make('category_id')
->label('Category')
->required()
->relationship('category', 'name', 'parent_id')
->defaultOpenLevel(5)
->placeholder('Select category'),3.1.32
8.2
10.4
Windows, Linux
I can provide you the website link privately so that you can have a look.
I want to change select after create new item
Example:
SelectTree::make('zone')
->relationship(
relationship: 'parent',
titleAttribute: 'name',
parentAttribute: 'parent_id',
)
->live()
->createOptionForm([
TextInput::make('name')
->required()
->maxLength(255),
])
->createOptionUsing(function ($data, $get, $set) {
$zone = Zone::create($data);
$set('zone', $zone->id);
})
->afterStateUpdated(function (?string $state, ?string $old) {
dd($state, $old);
})
->expandSelected()
->searchable()
->enableBranchNode()
->withCount()
->required(),
3.1.41
8.2.0
11
No response
No response
Code Sample
Forms\Components\Section::make('Store Info')->schema([
Forms\Components\Select::make('store_code')
->options(Store::query()->pluck('name', 'code'))
->preload()
->live()
->required()
->native(false)
->afterStateUpdated(function (SelectTree $component, Set $set, Get $get, ?Model $record) {
$storeCode = $get('store_code');
if ($storeCode === null) {
return $set('categories', null);
}
if ($record === null || $record->store_code !== $storeCode) {
return $set('categories', null);
}
return $set('categories', $record->categories()->pluck('category_id'));
}),
SelectTree::make('categories')
->relationship('categories', 'name', 'parent_id')
->withCount()
->independent(false)
->enableBranchNode()
->direction('top')
->disabled(function (Get $get, Set $set): bool {
if ($get('store_code') === null) {
$set('categories', null);
return true;
}
return false;
})
->disabledOptions(function (Get $get, ?Model $record): array {
// omitted
})
->saveRelationshipsUsing(function (Model $record, ?array $state) {
// omitted
}),
])->columns()3.1.14
8.1
10.10
Linux
No response
Hello,
Love this plugin! I managed to get this working as a filter as well, only closing an indicator does not feed back to the selected values.
So if I close the active filter (by clicking the X), the values are still displayed in the categories field.
(They are correctly linked, active filters showing the ID instead of the name.)
I tried several thing, but did not manage to get it to work. Any thoughts on this?
Is it possible to add this option
Just same as Select input
3.1.14
8.2
10.x
Linux
No response
Thank you for this package, it's great! I wanted to use it in my "Category" form to select the parent category. It's working very well, but I have one issue. When editing a category, it is included in the select tree. Of course, a category cannot be parent to itself. Is it possible to hide it from the tree or make it unclickable? Or maybe you would consider adding this feature to the package. Thanks again.
https://code.jquery.com/jquery-3.6.0.min.js is loaded from external link ,
thats make panel so slow
3.1
8.3.4
11
macOS
No response
SelectTree component, when used in the AreaResource, does not save the selected parent area into the database. There are no error messages displayed, making it difficult to diagnose the issue.
Component/Area:
public static function form(Form $form): Form
{
return $form
->schema([
TextInput::make('arabic_title')->required(),
TextInput::make('kurdish_title')->required(),
SelectTree::make('parentArea')
->relationship('parentArea', 'arabic_title', 'parent_id')
->placeholder(__('Please select a Area'))
->withCount()
->direction('buttom')
->label(__('Parent Area'))->nullable(),
TextInput::make('latitude')
->required()
->rules('numeric'),
TextInput::make('longitude')
->required()
->rules('numeric'),
]);
}Model:
class Area extends Model
{
use HasFactory;
protected $fillable = [
'arabic_title', 'kurdish_title', 'parent_id', 'latitude', 'longitude'
];
public function parentArea()
{
return $this->belongsTo(Area::class, 'parent_id');
}
}migration:
Schema::create('areas', function (Blueprint $table) {
$table->id();
$table->string('arabic_title');
$table->string('kurdish_title');
$table->unsignedBigInteger('parent_id')->nullable();
$table->foreign('parent_id')->references('id')->on('areas')->onDelete('cascade');
$table->decimal('latitude', 13, 9);
$table->decimal('longitude', 13, 9);
$table->timestamps();
});
Steps to Reproduce:
Expected Result:
The selected parent area should be saved into the database and be visible when retrieving or refreshing the Area details.
Actual Result:
The parent area selection is not saved into the database, and no errors are displayed, indicating a silent failure.
3.1
8.1
10.10
Windows
No response
When a field (a native select) value is set, the select-tree component does not function and is always disabled forever.
Forms\Components\Section::make('Store Info')->schema([
Forms\Components\Select::make('store_code')
->options(Store::query()->pluck('name', 'code'))
->live()
->required()
->placeholder('Select Store'),
SelectTree::make('categories')
->relationship('categories', 'name', 'parent_id')
->withCount()
->independent(false)
->enableBranchNode()
->searchable()->noSearchResultsMessage('No categories found')
->placeholder(
fn(Get $get): string => !$get(
'store_code'
) ? 'Select Store First..' : 'Select Categories..'
)
->disabled(fn(Get $get): bool => empty($get('store_code'))),
])->columns(), 3.1.12
8.1
10.10
Linux
No response
After installing and configuring the package, the checkboxes are not visible, as shown below:
My code is as follows:
SelectTree::make('parent_id')
->label(__('Categoria Mรฃe'))
->relationship('parent', 'name', 'parent_id')
->placeholder(__('Selecione uma categoria'))
->withCount()
->enableBranchNode()
->defaultOpenLevel(2)
->clearable(false)
->searchable()
->expandSelected(true)
->disabledOptions(
fn ($record) =>
$record ?
array_merge(
[$record->id],
$record->children ? $record->children()->get()->pluck('id')->toArray() : []
) : []
),3.1
8.2.14
10.10
macOS
I have a custom theme.
I have just added SelectTree to my ProductResource table as a filter. Every product belongs to one category. I think it is a pretty typical situation, so it could be of help to have a sample code in the documentation. If you find this idea relevant, here is my code that works well in my project:
->filters([
Filter::make('tree')
->form([
SelectTree::make('category_id')
->relationship('category', 'name', 'parent_id'),
])
->query(function (Builder $query, array $data): Builder
{
return $query->when(
$data['category_id'],
fn ($query, $category_id) => $query->whereRelation('category', 'id', $category_id)
);
})
->indicateUsing(function (array $data): ?string
{
if (!$data['category_id']) return null;
return __('Category') . ': ' . Category::find($data['category_id'])->name;
})
])
I am facing a strange issue while using SelectTree component.
It is working fine on my local machine (Windows 11) but while pushing the code to production the default selected value is not showing.
โ
This is on localhost working as expected:
๐ซ This is on the production the parent category is not showing:
I've seen browser's console for any errors but there wasn't any, all the css/js are loading fine.
Here is the code:
SelectTree::make('parent_id')
->label('Parent Category')
->relationship('parent', 'name', 'parent_id')
->defaultOpenLevel(5)
->enableBranchNode(),I don't know, The code is working fine on localhost but not in production ๐
3.1
8.2
10.41
Linux
No response
A category cannot be its own parent.
If I select the current edited category as its parent, then I get an unpredictable binding:
And real parent not display (need an extra click):
public static function form(Form $form): Form
{
return $form
->schema([
TextInput::make('name')->maxLength(255)->required(),
TextInput::make('slug')->maxLength(255)->required(),
TextInput::make('position')->numeric(),
SelectTree::make('parent_id')
->withCount()
->enableBranchNode()
->relationship('parent', 'name', 'parent_id')
]);
}3.1.25
8.3
10.43
No response
No response
Trying to save category in main table
https://github.com/ajay-ag/select-tree.git
^3.1
8.2
10.10
Windows
No response
Sorry, this is not a bug, but I couldn't find another way to ask this question. I'm new to Filament in general.
I have my ProductCategories working fine with the SelectTree.
Now I have a Product model which has one of these ProductCategories and I want to add the SelectTree as a Table Filter and the new product form, but I can't get around how to.
As you would expect, my Products have a product_category_id and a belongsTo relationship to ProductCategories and a simple ->relationship('product_categories', 'title', 'id')ย in a Select works just fine, but you can imagine that all Product Categories show up, all levels, no tree.
So, I don't know, maybe it can't be used like this? Has anyone used this plugin in this manner?
Thanks in advance.
3.1
8.2.13
10.10
macOS
No response
If there are no additional record of category_id in category_product table - filament-select-tree doesn't select that records using filter. Main Category has to be added also on belongsToMany table, for provided Filter example
I'm saving in:
static::created(function ($this) {
$cp = new CategoryProduct();
$cp->category_id = $this->category_id;
$cp->product_id = $this->id;
$cp->save();
}
record is saved on category_product, but then somehow deleted by Filament pipeline I asume so.
2.0
8.2
10
No response
No response
How to use afterStateUpdated in SelectTree?
in Select
->afterStateUpdated(fn (string $operation, Forms\Components\Select $component, Forms\Set $set) => 'create' === $operation ? $set('name_alias', $component->getOptionLabel()) : null)but this method "getOptionLabel" no exist in SelectTree
I need to make some tree with data based on datas from 3 db tables
categories - has id, name fields,
user_quiz_requests - has quiz_category_id and user_email fields
users - has id, email fields
I tried to make a container resource with command :
php artisan make:filament-resource UserQuizRequestTree
I have installed "^3.1.18" on laravel 10.31.0 / filament ^3.0-stable app.
But inserting SelectTree into generated UserQuizRequestTreeResource.php file in โtableโ block:
<?php
namespace App\Filament\Resources;
use App\Filament\Resources\UserQuizRequestTreeResource\Pages;
use App\Filament\Resources\UserQuizRequestTreeResource\RelationManagers;
use App\Models\QuizCategory;
use Filament\Forms;
use Filament\Forms\Form;
use Filament\Resources\Resource;
use Filament\Tables;
use Filament\Tables\Table;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Database\Eloquent\SoftDeletingScope;
use CodeWithDennis\FilamentSelectTree\SelectTree;
class UserQuizRequestTreeResource extends Resource
{
protected static ?string $model = QuizCategory::class;
protected static ?string $navigationIcon = 'heroicon-o-rectangle-stack';
public static function form(Form $form): Form
{
return $form
->schema([
//
]);
}
public static function table(Table $table): Table
{
return $table
->columns([
\CodeWithDennis\FilamentSelectTree\SelectTree::make('userQuizRequests')
->relationship('userQuizRequests', 'user_name', 'quiz_category_id', function ($query) {
return $query;
})
])
->filters([
I got error :
Method CodeWithDennis\FilamentSelectTree\SelectTree::table does not exist.
What must be a container for SelectTree component and how to start using it ?
When putting live() method on the SelectTree form component, and selecting one of the optioons, it starts flickering unexpectedly, and I can't change my selection.
Crate a SelectTree component like this:
SelectTree::make('groups')
->relationship('groups', 'name', 'parent_id')
->hiddenOn('edit')
->enableBranchNode()
->live(),
For the groups relation, i'm using lazychaser/laravel-nestedset. Data looks like this:
Now, when I select one of the groups, it just starts flickering:
After that, I can't change the selected option. I have to refresh the page in order for the component to work again.
3.1.21
8.2.14
10.35.0
macOS
I see that there was a fix for this in #66 but it was later reverted in #67. What was reason for that? Was that fix breaking something else?
I am unable to save category_id. On browser console I get following error.
Livewire Entangle Error: Livewire property ['data.category_id'] cannot be found on component: ['app.filament.contractor.resources.project-template-resource.pages.create-project-template']
module_default.interceptor.Object.defineProperty.get.isLive @ livewire.js?id=a27c4ca2:3846
Adding SelectTree input filed in Resource.
3.1.26
8.1.0
10.0
macOS
No response
I have product model BelongsToMany collections model,
Here's my code :
ProductResource
SelectTree::make('collections')
->label(__('Collections'))
->emptyLabel(__('No results found'))
->relationship('collections', 'name', 'parent_id', function ($query) {
return $query->whereLocale('name', app()->getLocale());
})
->searchable()
->withCount(),
After saving the product record, it saves the relationship ids in product_collection, but an error appears :
SQLSTATE[42S22]: Column not found: 1054 Unknown column 'collections' in 'field list'
update
`products`
set
`has_variants` = 0,
`collections` = [ 1,
2,
3 ],
`products`.`updated_at` = 2023 -12 -06 15: 44: 09
where
`id` = 1
3.1.14
8.2
10.x
Linux
No response
Modal
Responsive Mode
I've encountered an issue where the selected category in my application is overflowing outside of its designated element when the category name is too long.
some kind of auto text truncate functionality would be great in here!
This issue occurs consistently when selecting categories with longer names.
3.1
8.2
11.9
No response
No response
When the SelectTree field is used within a sortable Repeater a duplication behaviour happens.
Have a look at the video attached:
Simply use the SelectTree field in any repeater.
3.1
8.2
10
No response
No response
When editing the user that shares the disabled options.
Forms\Components\Section::make('Store Info')->schema([
Forms\Components\Select::make('store_code')
->options(Store::query()->pluck('name', 'code'))
->preload()
->live()
->required()
->native(false)
->placeholder('Select Store')
->afterStateUpdated(function (Set $set, Get $get, ?Model $record) {
$storeCode = $get('store_code');
if ($storeCode === null) {
return $set('categories', null);
}
if ($record === null || $record->store_code !== $storeCode) {
return $set('categories', null);
}
return $set('categories', $record->categories()->pluck('category_id'));
}),
SelectTree::make('categories')
->relationship('categories', 'name', 'parent_id')
->withCount()
->independent(false)
->enableBranchNode()
->searchable()->noSearchResultsMessage('No categories found')
->placeholder(
fn(Get $get): string => !$get(
'store_code'
) ? 'Select Store First..' : 'Select Categories..'
)
->disabled(function (Get $get, Set $set): bool {
if ($get('store_code') === null) {
$set('categories', null);
return true;
}
return false;
})
->disabledOptions(function (Get $get): array {
return Category::query()->whereHas(
'users',
fn($query) => $query->where('store_code', $get('store_code'))
)->pluck('id')->toArray();
}),
])->columns(),
Create a user and attach categories to the user.
Try to edit the created user, the options on the same store are disabled and not shown
3.1.13
8.1
10.10
Linux
No response
i have a tree which consists of for example roles :
-team leads
i want the select to show the hierarchy and be able to locate the users inside each level
each level should be allowed to be selected
create hierarchy and try to choose the second option or any one in the middle , you can't
3.1.6
8.2
10
Linux
No response
I seem to see it in the picture.
But the code doesn't exist.
Add the possibility to change the null value for the parentAttribute
With large trees it will be tedious to open everything manually :(
public static function form(Form $form): Form
{
return $form
->schema([
TextInput::make('name')->maxLength(255)->required(),
TextInput::make('slug')->maxLength(255)->required(),
TextInput::make('position')->numeric(),
SelectTree::make('parent_id')
->withCount()
->enableBranchNode()
->relationship('parent', 'name', 'parent_id')
]);
}3.1
8.3
10.43
No response
No response
In this case, only the last SelectTree save on create and edit page
I have two types of category and need two SelectTrees
3.1
8.3.4
11
macOS
No response
I have installed the repository and tried to use like this
SelectTree::make('categories')
->relationship('categories', 'title', 'parent_id')
->columnSpanFull(),
But i am facing this error
Trait "Filament\Forms\Components\Concerns\HasPivotData" not found
Install and try to use SELECT TREE AS
SelectTree::make('categories')
->relationship('categories', 'title', 'parent_id')
->columnSpanFull(),
2.0.0
8.2.0
10.48
No response
No response
3.1.39
8.3.2
10.48.7
macOS
i get this error in my create form page.
it work properly in my local project i pushed it into git repo and pull in another system. in another system got this error
3.1
8.0.2
10.10
No response
No response
Hi, i really like this component, but i'm trying to use it with a massive set of data, which makes it really slow.
Is it possible to add an option to only load the first level on startup and make a separate query to load the children once a node is expanded?
I can see that you query the full set of data in the buildTree method and build the tree there but in my case this creates a huge js object and slows down everything.
Thanks!
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google โค๏ธ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.