From 101728cc2f3bc5319c96153e313bb200fdac0e8e Mon Sep 17 00:00:00 2001 From: Dan Harrin Date: Sat, 13 Jan 2024 21:56:45 +0000 Subject: [PATCH 1/2] feature: Filter layout --- packages/tables/docs/04-filters/06-layout.md | 34 +++++++++++++++++++ packages/tables/src/Concerns/HasFilters.php | 22 +----------- .../tables/src/Table/Concerns/HasFilters.php | 29 ++++++++++++++++ 3 files changed, 64 insertions(+), 21 deletions(-) diff --git a/packages/tables/docs/04-filters/06-layout.md b/packages/tables/docs/04-filters/06-layout.md index b0e5a23b56..73c6c0c9c6 100644 --- a/packages/tables/docs/04-filters/06-layout.md +++ b/packages/tables/docs/04-filters/06-layout.md @@ -144,3 +144,37 @@ public function table(Table $table): Table ->hiddenFilterIndicators(); } ``` + +### Customizing the filter form schema + +You may customize the [form schema](../../forms/layout) of the entire filter form at once, in order to rearrange filters into your desired layout, and use any of the [layout components](../../forms/layout) available to forms. To do this, use the `filterFormSchema()` method, passing a closure function that receives the array of defined `$filters` that you can insert: + +```php +use Filament\Forms\Components\Section; +use Filament\Tables\Filters\Filter; +use Filament\Tables\Table; + +public function table(Table $table): Table +{ + return $table + ->filters([ + Filter::make('is_featured'), + Filter::make('published_at'), + Filter::make('author'), + ]) + ->filtersFormColumns(2) + ->filtersFormSchema(fn (array $filters): array => [ + Section::make('Visibility') + ->description('These filters affect the visibility of the records in the table.') + ->schema([ + $filters['is_featured'], + $filters['published_at'], + ]) + ->columns(2) + ->columnSpanFull(), + $filters['author'], + ]); +} +``` + +In this example, we have put two of the filters inside a [section](../../forms/layout/section) component, and used the `columns()` method to specify that the section should have two columns. We have also used the `columnSpanFull()` method to specify that the section should span the full width of the form, which is also 2 columns wide. We have inserted each filter into the form schema by using the filter's name as the key in the `$filters` array. diff --git a/packages/tables/src/Concerns/HasFilters.php b/packages/tables/src/Concerns/HasFilters.php index 17b8147001..2acd087944 100644 --- a/packages/tables/src/Concerns/HasFilters.php +++ b/packages/tables/src/Concerns/HasFilters.php @@ -2,7 +2,6 @@ namespace Filament\Tables\Concerns; -use Filament\Forms; use Filament\Forms\Form; use Filament\Tables\Filters\BaseFilter; use Illuminate\Database\Eloquent\Builder; @@ -29,7 +28,7 @@ trait HasFilters } return $this->makeForm() - ->schema($this->getTableFiltersFormSchema()) + ->schema($this->getTable()->getFiltersFormSchema()) ->columns($this->getTable()->getFiltersFormColumns()) ->model($this->getTable()->getModel()) ->statePath($this->getTable()->hasDeferredFilters() ? 'tableDeferredFilters' : 'tableFilters') @@ -160,25 +159,6 @@ trait HasFilters return $name::getDefaultName(); } - /** - * @return array - */ - public function getTableFiltersFormSchema(): array - { - $schema = []; - - foreach ($this->getTable()->getFilters() as $filter) { - $schema[$filter->getName()] = Forms\Components\Group::make() - ->schema($filter->getFormSchema()) - ->statePath($filter->getName()) - ->columnSpan($filter->getColumnSpan()) - ->columnStart($filter->getColumnStart()) - ->columns($filter->getColumns()); - } - - return $schema; - } - public function getTableFiltersSessionKey(): string { $table = class_basename($this::class); diff --git a/packages/tables/src/Table/Concerns/HasFilters.php b/packages/tables/src/Table/Concerns/HasFilters.php index a77f114be9..d71a45f6b8 100644 --- a/packages/tables/src/Table/Concerns/HasFilters.php +++ b/packages/tables/src/Table/Concerns/HasFilters.php @@ -3,6 +3,7 @@ namespace Filament\Tables\Table\Concerns; use Closure; +use Filament\Forms\Components\Group; use Filament\Forms\Form; use Filament\Support\Enums\ActionSize; use Filament\Support\Enums\MaxWidth; @@ -18,6 +19,8 @@ trait HasFilters */ protected array $filters = []; + protected ?Closure $filtersFormSchema = null; + /** * @var int | array | Closure */ @@ -160,6 +163,32 @@ trait HasFilters return $this->getLivewire()->getTableFiltersForm(); } + public function filtersFormSchema(?Closure $schema): static + { + $this->filtersFormSchema = $schema; + + return $this; + } + + /** + * @return array + */ + public function getFiltersFormSchema(): array + { + $filters = []; + + foreach ($this->getFilters() as $filterName => $filter) { + $filters[$filterName] = Group::make() + ->schema($filter->getFormSchema()) + ->statePath($filterName) + ->columnSpan($filter->getColumnSpan()) + ->columnStart($filter->getColumnStart()) + ->columns($filter->getColumns()); + } + + return $this->evaluate($this->filtersFormSchema, ['filters' => $filters]) ?? $filters; + } + public function getFiltersTriggerAction(): Action { $action = Action::make('openFilters') From bcc76ed084d21240219b99efd4db65fdd8245984 Mon Sep 17 00:00:00 2001 From: Dan Harrin Date: Sat, 13 Jan 2024 22:00:26 +0000 Subject: [PATCH 2/2] Update 06-layout.md --- packages/tables/docs/04-filters/06-layout.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tables/docs/04-filters/06-layout.md b/packages/tables/docs/04-filters/06-layout.md index 73c6c0c9c6..1ef3fc479f 100644 --- a/packages/tables/docs/04-filters/06-layout.md +++ b/packages/tables/docs/04-filters/06-layout.md @@ -177,4 +177,4 @@ public function table(Table $table): Table } ``` -In this example, we have put two of the filters inside a [section](../../forms/layout/section) component, and used the `columns()` method to specify that the section should have two columns. We have also used the `columnSpanFull()` method to specify that the section should span the full width of the form, which is also 2 columns wide. We have inserted each filter into the form schema by using the filter's name as the key in the `$filters` array. +In this example, we have put two of the filters inside a [section](../../forms/layout/section) component, and used the `columns()` method to specify that the section should have two columns. We have also used the `columnSpanFull()` method to specify that the section should span the full width of the filter form, which is also 2 columns wide. We have inserted each filter into the form schema by using the filter's name as the key in the `$filters` array.