Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Show bulk actions below table #13530

Open
wants to merge 6 commits into
base: 3.x
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions packages/tables/docs/05-actions.md
Original file line number Diff line number Diff line change
Expand Up @@ -250,6 +250,27 @@ public function table(Table $table): Table
}
```

### Displaying bulk actions below the table

By default, the bulk actions are rendered above the table. Alternatively, you can move them below the table:

```php
use Filament\Tables\Table;
use Filament\Tables\Enums\BulkActionsPosition;

public function table(Table $table): Table
{
return $table
->bulkActions([
// ...
])
->bulkActionsPosition(BulkActionsPosition::BelowTable);
}
```

Or display bulk actions both above and below the table, with the `BulkActionsPosition::AboveAndBelowTable`
position option.

## Header actions

Both [row actions](#row-actions) and [bulk actions](#bulk-actions) can be rendered in the header of the table. You can put them in the `$table->headerActions()` method:
Expand Down
36 changes: 35 additions & 1 deletion packages/tables/resources/views/index.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
use Filament\Tables\Columns\Column;
use Filament\Tables\Columns\ColumnGroup;
use Filament\Tables\Enums\ActionsPosition;
use Filament\Tables\Enums\BulkActionsPosition;
use Filament\Tables\Enums\FiltersLayout;
use Filament\Tables\Enums\RecordCheckboxPosition;
use Illuminate\Support\Str;
Expand Down Expand Up @@ -36,6 +37,9 @@
$getBulkActions(),
fn (\Filament\Tables\Actions\BulkAction | \Filament\Tables\Actions\ActionGroup $action): bool => $action->isVisible(),
);
$bulkActionsPosition = $getBulkActionsPosition();
$hasBulkActionsAboveTable = $bulkActionsPosition->isAboveTable();
$hasBulkActionsBelowTable = $bulkActionsPosition->isBelowTable();
$groups = $getGroups();
$description = $getDescription();
$isGroupsOnly = $isGroupsOnly() && $group;
Expand Down Expand Up @@ -193,7 +197,7 @@ class="fi-ta-header-toolbar flex items-center justify-between gap-x-4 px-4 py-3

{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\Tables\View\TablesRenderHook::TOOLBAR_REORDER_TRIGGER_AFTER, scopes: static::class) }}

@if ((! $isReordering) && count($bulkActions))
@if ($hasBulkActionsAboveTable && (! $isReordering) && count($bulkActions))
<x-filament-tables::actions
:actions="$bulkActions"
x-cloak="x-cloak"
Expand Down Expand Up @@ -1250,6 +1254,36 @@ class="fi-ta-record-checkbox"
@endif
</div>

@if ($hasBulkActionsBelowTable && (! $isReordering) && count($bulkActions))
<div
Copy link
Member

@zepfietje zepfietje Jul 25, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a way to minimize duplication here and in the header?
Maintenance of the table index view is already very hard, so I don't want to introduce additional complexity.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@zepfietje please let me know what changes you think best to improve this.

Perhaps using capture blade directive? But due to it not including the reorder action in the footer I think the selection-indicator and bulk actionfilament-tables::actions would need to be captured separately?

x-cloak
x-show="selectedRecords.length"
class="fi-ta-footer-bulk-actions-wrapper relative divide-y divide-gray-200 overflow-x-auto dark:divide-white/10"
>
<div class="fi-ta-footer-bulk-actions-selections">
@if ($isSelectionEnabled && $isLoaded)
<x-filament-tables::selection.indicator
:all-selectable-records-count="$allSelectableRecordsCount"
:colspan="$columnsCount"
:page="$page"
:select-current-page-only="$selectsCurrentPageOnly"
x-bind:hidden="! selectedRecords.length"
x-show="selectedRecords.length"
/>
@endif
</div>

<div
class="fi-ta-footer-bulk-actions flex items-center px-4 py-3 sm:px-6"
>
<x-filament-tables::actions
:actions="$bulkActions"
x-show="selectedRecords.length"
/>
</div>
</div>
@endif

@if ((($records instanceof \Illuminate\Contracts\Pagination\Paginator) || ($records instanceof \Illuminate\Contracts\Pagination\CursorPaginator)) &&
((! ($records instanceof \Illuminate\Contracts\Pagination\LengthAwarePaginator)) || $records->total()))
<x-filament::pagination
Expand Down
28 changes: 28 additions & 0 deletions packages/tables/src/Enums/BulkActionsPosition.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<?php

namespace Filament\Tables\Enums;

enum BulkActionsPosition
{
case AboveTable;

case AboveAndBelowTable;

case BelowTable;

public function isAboveTable(): bool
{
return match ($this) {
self::AboveTable, self::AboveAndBelowTable => true,
self::BelowTable => false,
};
}

public function isBelowTable(): bool
{
return match ($this) {
self::BelowTable, self::AboveAndBelowTable => true,
self::AboveTable => false,
};
}
}
15 changes: 15 additions & 0 deletions packages/tables/src/Table/Concerns/HasBulkActions.php
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
use Filament\Tables\Actions\ActionGroup;
use Filament\Tables\Actions\BulkAction;
use Filament\Tables\Actions\BulkActionGroup;
use Filament\Tables\Enums\BulkActionsPosition;
use Filament\Tables\Enums\RecordCheckboxPosition;
use Illuminate\Database\Eloquent\Collection as EloquentCollection;
use Illuminate\Database\Eloquent\Model;
Expand All @@ -29,6 +30,8 @@ trait HasBulkActions

protected bool | Closure | null $selectsCurrentPageOnly = false;

protected BulkActionsPosition | Closure | null $bulkActionsPosition = null;

protected RecordCheckboxPosition | Closure | null $recordCheckboxPosition = null;

protected bool | Closure | null $isSelectable = null;
Expand Down Expand Up @@ -184,6 +187,18 @@ public function checksIfRecordIsSelectable(): bool
return $this->checkIfRecordIsSelectableUsing !== null;
}

public function bulkActionsPosition(BulkActionsPosition | Closure | null $position = null): static
{
$this->bulkActionsPosition = $position;

return $this;
}

public function getBulkActionsPosition(): BulkActionsPosition
{
return $this->evaluate($this->bulkActionsPosition) ?? BulkActionsPosition::AboveTable;
}

public function recordCheckboxPosition(RecordCheckboxPosition | Closure | null $position = null): static
{
$this->recordCheckboxPosition = $position;
Expand Down