feat: add headerToolbar() for inline filter/search in page header#95
Merged
ManukMinasyan merged 10 commits into4.xfrom Mar 16, 2026
Merged
feat: add headerToolbar() for inline filter/search in page header#95ManukMinasyan merged 10 commits into4.xfrom
ManukMinasyan merged 10 commits into4.xfrom
Conversation
When `->headerToolbar()` is enabled on a Board, the filter trigger
and search field render inline with the page heading instead of in
a separate row between the title and columns.
This uses Filament's native `getHeader()` override in the BaseBoard
trait to render a custom header view that combines:
- Page heading + subheading
- Filter dropdown (right-aligned)
- Search field (right-aligned)
- Active filter indicator badges (below heading)
Usage:
```php
return $board
->headerToolbar()
->query(...)
->columns(...)
```
The default behavior (no headerToolbar) is unchanged — filters
render in their own row above the board columns.
There was a problem hiding this comment.
Pull request overview
Adds an opt-in headerToolbar() mode for Flowforge boards that renders Filament’s filter/search controls inline with the page heading by overriding the Filament page header and introducing a dedicated header view.
Changes:
- Add
Board::headerToolbar()/hasHeaderToolbar()and pass the flag through view config. - Override
BaseBoard::getHeader()to render a custom header view when enabled. - Add
board-header.blade.phpand suppress the existing filters include inindex.blade.phpto avoid duplicate toolbars.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| src/Concerns/BaseBoard.php | Overrides Filament page header to render a custom header view when enabled. |
| src/Board.php | Introduces the headerToolbar flag API and exposes it to Blade config. |
| resources/views/index.blade.php | Skips the existing filters UI when headerToolbar is active. |
| resources/views/filament/pages/board-header.blade.php | New combined header view that renders heading + filter/search + indicators. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Inline filter/search in the page header is now the default for all boards. Opt out with `->headerToolbar(false)` for the classic stacked layout. This is a breaking change appropriate for the 4.x major version.
- Change heading container to flex-1 to push it left instead of centering - Fix filter indicators to use inline flex layout with proper gap - Remove nested div wrappers that caused line-break issues
Filament's dropdown panel CSS relies on Tailwind utility classes that may not cascade properly when rendered outside the table context. Added explicit CSS styles to ensure the filter dropdown has a visible white background, shadow, and border when rendered in the board header toolbar.
Replace inline CSS and JS stylePanel() hack with proper Filament CSS context. Wrapping the filter dropdown in fi-ta-ctn + fi-ta-header-toolbar (display: contents) lets Filament's scoped table CSS apply natively: padding, grid layout, heading styles, and dropdown panel visuals. Also tightens header spacing (pt-4 pb-0 gap-y-2) and increases filter/search gap (gap-x-6).
- Branch between modal and dropdown based on FiltersLayout::Modal or slide-over trigger action config (mirrors old filters view) - Respect TablesRenderHook::FILTER_INDICATORS for filter indicator customization - Remove stale mt-3 on indicators since gap-y-2 handles spacing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
->headerToolbar()method toBoardthat moves the filter/search toolbar inline with the page headinggetHeader()override — no CSS hacking, no fighting the frameworkUsage
How it works
Board::headerToolbar(bool)— sets the flagBaseBoard::getHeader()— overrides Filament's page header when enabled, rendering a custom view with title + filter + search in one rowindex.blade.php— skips rendering its own filter toolbar whenheaderToolbaris active (avoids duplicates)board-header.blade.php— new view that renders the combined header with proper Filament component reuseDefault behavior unchanged
When
headerToolbar()is not called, the board renders exactly as before — filters in their own row above the columns.Test plan
headerToolbar()shows filter + search next to titleheaderToolbar()renders unchanged