Skip to content

Commit 6a20fda

Browse files
GeminiDev1danharrin
GeminiDev1
and
danharrin
authored
feat: Add configurable reset button position for table filters and column manager. (#18505)
* Option to set the reset button position next to the apply button, or by default show in top right corner. * Refactor filter action class name to better represent both action and reset buttons. * Add documentation for configuring reset button position in filters. * Clarify documentation on configuring the reset button position in filters to specify that it can be set at the table level. * Added reset button to the remaining FiltersLayout options. * Add ResetButtonPosition support to column manager and updated filters.blade.php to only render actions container when needed. * Updated documentation. * composer cs * chore: fix code style * refactor * styling * Update theme.css --------- Co-authored-by: GeminiDev1 <[email protected]> Co-authored-by: Dan Harrin <[email protected]>
1 parent cdafd6e commit 6a20fda

File tree

12 files changed

+184
-47
lines changed

12 files changed

+184
-47
lines changed

‎packages/panels/dist/theme.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/tables/docs/02-columns/01-overview.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -901,6 +901,24 @@ public function table(Table $table): Table
901901
}
902902
```
903903

904+
#### Displaying the reset action in the footer
905+
906+
By default, the reset action appears in the header of the column manager. You may move it to the footer, next to the apply action, using the `columnManagerResetActionPosition()` method:
907+
908+
```php
909+
use Filament\Tables\Enums\ColumnManagerResetActionPosition;
910+
use Filament\Tables\Table;
911+
912+
public function table(Table $table): Table
913+
{
914+
return $table
915+
->columns([
916+
// ...
917+
])
918+
->columnManagerResetActionPosition(ColumnManagerResetActionPosition::Footer);
919+
}
920+
```
921+
904922
## Adding extra HTML attributes to a column content
905923

906924
You can pass extra HTML attributes to the column content via the `extraAttributes()` method, which will be merged onto its outer HTML element. The attributes should be represented by an array, where the key is the attribute name and the value is the attribute value:

‎packages/tables/docs/03-filters/06-layout.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -212,3 +212,21 @@ public function table(Table $table): Table
212212
```
213213

214214
In this example, we have put two of the filters inside a [section](../../schemas/sections) 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.
215+
216+
## Displaying the reset action in the footer
217+
218+
By default, the reset action appears in the header of the filters form. You may move it to the footer, next to the apply action, using the `filtersResetActionPosition()` method:
219+
220+
```php
221+
use Filament\Tables\Enums\FiltersResetActionPosition;
222+
use Filament\Tables\Table;
223+
224+
public function table(Table $table): Table
225+
{
226+
return $table
227+
->filters([
228+
// ...
229+
])
230+
->filtersResetActionPosition(FiltersResetActionPosition::Footer);
231+
}
232+
```

‎packages/tables/resources/css/column-manager.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,4 +40,8 @@
4040
@apply ps-8;
4141
}
4242
}
43+
44+
& .fi-ta-col-manager-actions-ctn {
45+
@apply flex gap-3;
46+
}
4347
}

‎packages/tables/resources/css/container.css‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,10 @@
107107
@apply text-gray-400 dark:text-gray-500;
108108
}
109109
}
110+
111+
& .fi-ta-filters-actions-ctn {
112+
@apply flex gap-3;
113+
}
110114
}
111115

112116
& .fi-ta-filters-above-content-ctn {
@@ -121,7 +125,7 @@
121125
@apply mt-3;
122126
}
123127

124-
&:has(.fi-ta-filters-apply-action-ctn) {
128+
&:has(.fi-ta-filters-actions-ctn) {
125129
& .fi-ta-filters-trigger-action-ctn {
126130
@apply -mt-7;
127131
}

‎packages/tables/resources/views/components/column-manager.blade.php‎

Lines changed: 40 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
1+
@php
2+
use Filament\Support\Enums\GridDirection;
3+
use Filament\Tables\Enums\ColumnManagerResetActionPosition;
4+
use Illuminate\View\ComponentAttributeBag;
5+
@endphp
6+
17
@props([
28
'applyAction',
39
'columns' => null,
410
'hasReorderableColumns',
511
'hasToggleableColumns',
612
'headingTag' => 'h3',
713
'reorderAnimationDuration' => 300,
14+
'resetActionPosition' => ColumnManagerResetActionPosition::Header,
815
])
916

10-
@php
11-
use Filament\Support\Enums\GridDirection;
12-
use Illuminate\View\ComponentAttributeBag;
13-
@endphp
14-
1517
<div class="fi-ta-col-manager">
1618
<div
1719
x-data="filamentTableColumnManager({
@@ -25,23 +27,25 @@ class="fi-ta-col-manager-ctn"
2527
{{ __('filament-tables::table.column_manager.heading') }}
2628
</{{ $headingTag }}>
2729

28-
<div>
29-
<x-filament::link
30-
:attributes="
31-
\Filament\Support\prepare_inherited_attributes(
32-
new ComponentAttributeBag([
33-
'color' => 'danger',
34-
'tag' => 'button',
35-
'wire:click' => 'resetTableColumnManager',
36-
'wire:loading.remove.delay.' . config('filament.livewire_loading_delay', 'default') => '',
37-
'wire:target' => 'resetTableColumnManager',
38-
])
39-
)
40-
"
41-
>
42-
{{ __('filament-tables::table.column_manager.actions.reset.label') }}
43-
</x-filament::link>
44-
</div>
30+
@if ($resetActionPosition === ColumnManagerResetActionPosition::Header)
31+
<div>
32+
<x-filament::link
33+
:attributes="
34+
\Filament\Support\prepare_inherited_attributes(
35+
new ComponentAttributeBag([
36+
'color' => 'danger',
37+
'tag' => 'button',
38+
'wire:click' => 'resetTableColumnManager',
39+
'wire:loading.remove.delay.' . config('filament.livewire_loading_delay', 'default') => '',
40+
'wire:target' => 'resetTableColumnManager',
41+
])
42+
)
43+
"
44+
>
45+
{{ __('filament-tables::table.column_manager.actions.reset.label') }}
46+
</x-filament::link>
47+
</div>
48+
@endif
4549
</div>
4650

4751
<div
@@ -184,9 +188,20 @@ class="fi-ta-col-manager-reorder-handle fi-icon-btn"
184188
</template>
185189
</div>
186190

187-
@if ($applyAction->isVisible())
188-
<div class="fi-ta-col-manager-apply-action-ctn">
189-
{{ $applyAction }}
191+
@if ($applyAction->isVisible() || $resetActionPosition === ColumnManagerResetActionPosition::Footer)
192+
<div class="fi-ta-col-manager-actions-ctn">
193+
@if ($applyAction->isVisible())
194+
{{ $applyAction }}
195+
@endif
196+
197+
@if ($resetActionPosition === ColumnManagerResetActionPosition::Footer)
198+
<x-filament::button
199+
color="danger"
200+
wire:click="resetTableColumnManager"
201+
>
202+
{{ __('filament-tables::table.column_manager.actions.reset.label') }}
203+
</x-filament::button>
204+
@endif
190205
</div>
191206
@endif
192207
</div>

‎packages/tables/resources/views/components/filters.blade.php‎

Lines changed: 38 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
1+
@php
2+
use Filament\Tables\Enums\FiltersResetActionPosition;
3+
@endphp
4+
15
@props([
26
'applyAction',
37
'form',
48
'headingTag' => 'h3',
9+
'resetActionPosition' => FiltersResetActionPosition::Header,
510
])
611

712
<div {{ $attributes->class(['fi-ta-filters']) }}>
@@ -10,30 +15,43 @@
1015
{{ __('filament-tables::table.filters.heading') }}
1116
</{{ $headingTag }}>
1217

13-
<div>
14-
<x-filament::link
15-
:attributes="
16-
\Filament\Support\prepare_inherited_attributes(
17-
new \Illuminate\View\ComponentAttributeBag([
18-
'color' => 'danger',
19-
'tag' => 'button',
20-
'wire:click' => 'resetTableFiltersForm',
21-
'wire:loading.remove.delay.' . config('filament.livewire_loading_delay', 'default') => '',
22-
'wire:target' => 'resetTableFiltersForm',
23-
])
24-
)
25-
"
26-
>
27-
{{ __('filament-tables::table.filters.actions.reset.label') }}
28-
</x-filament::link>
29-
</div>
18+
@if ($resetActionPosition === FiltersResetActionPosition::Header)
19+
<div>
20+
<x-filament::link
21+
:attributes="
22+
\Filament\Support\prepare_inherited_attributes(
23+
new \Illuminate\View\ComponentAttributeBag([
24+
'color' => 'danger',
25+
'tag' => 'button',
26+
'wire:click' => 'resetTableFiltersForm',
27+
'wire:loading.remove.delay.' . config('filament.livewire_loading_delay', 'default') => '',
28+
'wire:target' => 'resetTableFiltersForm',
29+
])
30+
)
31+
"
32+
>
33+
{{ __('filament-tables::table.filters.actions.reset.label') }}
34+
</x-filament::link>
35+
</div>
36+
@endif
3037
</div>
3138

3239
{{ $form }}
3340

34-
@if ($applyAction->isVisible())
35-
<div class="fi-ta-filters-apply-action-ctn">
36-
{{ $applyAction }}
41+
@if ($applyAction->isVisible() || $resetActionPosition === FiltersResetActionPosition::Footer)
42+
<div class="fi-ta-filters-actions-ctn">
43+
@if ($applyAction->isVisible())
44+
{{ $applyAction }}
45+
@endif
46+
47+
@if ($resetActionPosition === FiltersResetActionPosition::Footer)
48+
<x-filament::button
49+
color="danger"
50+
wire:click="resetTableFiltersForm"
51+
>
52+
{{ __('filament-tables::table.filters.actions.reset.label') }}
53+
</x-filament::button>
54+
@endif
3755
</div>
3856
@endif
3957
</div>

‎packages/tables/resources/views/index.blade.php‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@
66
use Filament\Tables\Actions\HeaderActionsPosition;
77
use Filament\Tables\Columns\Column;
88
use Filament\Tables\Columns\ColumnGroup;
9+
use Filament\Tables\Enums\ColumnManagerResetActionPosition;
910
use Filament\Tables\Enums\FiltersLayout;
11+
use Filament\Tables\Enums\FiltersResetActionPosition;
1012
use Filament\Tables\Enums\RecordActionsPosition;
1113
use Filament\Tables\Enums\RecordCheckboxPosition;
1214
use Filament\Tables\View\TablesRenderHook;
@@ -36,6 +38,8 @@
3638
$filtersApplyAction = $getFiltersApplyAction();
3739
$filtersForm = $getFiltersForm();
3840
$filtersFormWidth = $getFiltersFormWidth();
41+
$filtersResetActionPosition = $getFiltersResetActionPosition();
42+
$columnManagerResetActionPosition = $getColumnManagerResetActionPosition();
3943
$hasColumnGroups = $hasColumnGroups();
4044
$hasColumnsLayout = $hasColumnsLayout();
4145
$hasSummary = $hasSummary($this->getAllTableSummaryQuery());
@@ -194,6 +198,7 @@
194198
:form="$filtersForm"
195199
:heading-tag="$secondLevelHeadingTag"
196200
class="fi-ta-filters-before-content"
201+
:reset-action-position="$filtersResetActionPosition"
197202
/>
198203
</div>
199204
@endif
@@ -262,6 +267,7 @@ class="fi-ta-actions fi-align-start fi-wrapped"
262267
:heading-tag="$secondLevelHeadingTag"
263268
x-cloak
264269
:x-show="$hasCollapsibleFilters ? 'areFiltersOpen' : null"
270+
:reset-action-position="$filtersResetActionPosition"
265271
/>
266272

267273
@if ($hasCollapsibleFilters)
@@ -548,6 +554,7 @@ class="fi-ta-filters-dropdown"
548554
:apply-action="$filtersApplyAction"
549555
:form="$filtersForm"
550556
:heading-tag="$secondLevelHeadingTag"
557+
:reset-action-position="$filtersResetActionPosition"
551558
/>
552559
</x-filament::dropdown>
553560
@endif
@@ -589,6 +596,7 @@ class="fi-ta-col-manager-dropdown"
589596
<x-filament-tables::column-manager
590597
:apply-action="$columnManagerApplyAction"
591598
:columns="$columnManagerColumns"
599+
:reset-action-position="$columnManagerResetActionPosition"
592600
:has-reorderable-columns="$hasReorderableColumns"
593601
:has-toggleable-columns="$hasToggleableColumns"
594602
:heading-tag="$secondLevelHeadingTag"
@@ -2195,6 +2203,7 @@ class="fi-ta-actions fi-align-center fi-wrapped"
21952203
:form="$filtersForm"
21962204
:heading-tag="$secondLevelHeadingTag"
21972205
class="fi-ta-filters-below-content"
2206+
:reset-action-position="$filtersResetActionPosition"
21982207
/>
21992208
@endif
22002209
</div>
@@ -2216,6 +2225,7 @@ class="fi-ta-filters-below-content"
22162225
:form="$filtersForm"
22172226
:heading-tag="$secondLevelHeadingTag"
22182227
class="fi-ta-filters-after-content"
2228+
:reset-action-position="$filtersResetActionPosition"
22192229
/>
22202230
</div>
22212231
@endif

‎packages/tables/src/Enums/ColumnManagerResetActionPosition.php‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<?php
2+
3+
namespace Filament\Tables\Enums;
4+
5+
enum ColumnManagerResetActionPosition
6+
{
7+
case Header;
8+
9+
case Footer;
10+
}

‎packages/tables/src/Enums/FiltersResetActionPosition.php‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<?php
2+
3+
namespace Filament\Tables\Enums;
4+
5+
enum FiltersResetActionPosition
6+
{
7+
case Header;
8+
9+
case Footer;
10+
}

0 commit comments

Comments
 (0)