Skip to content

feat: add headerToolbar() for inline filter/search in page header#95

Merged
ManukMinasyan merged 10 commits into4.xfrom
feat/header-toolbar
Mar 16, 2026
Merged

feat: add headerToolbar() for inline filter/search in page header#95
ManukMinasyan merged 10 commits into4.xfrom
feat/header-toolbar

Conversation

@ManukMinasyan
Copy link
Contributor

Summary

  • Adds ->headerToolbar() method to Board that moves the filter/search toolbar inline with the page heading
  • Uses Filament's native getHeader() override — no CSS hacking, no fighting the framework
  • Active filter indicator badges render below the heading row

Usage

public function board(Board $board): Board
{
    return $board
        ->headerToolbar()  // filter + search inline with title
        ->query(...)
        ->searchable(['name'])
        ->filters([...])
        ->columns([...]);
}

How it works

  • Board::headerToolbar(bool) — sets the flag
  • BaseBoard::getHeader() — overrides Filament's page header when enabled, rendering a custom view with title + filter + search in one row
  • index.blade.php — skips rendering its own filter toolbar when headerToolbar is active (avoids duplicates)
  • board-header.blade.php — new view that renders the combined header with proper Filament component reuse

Default behavior unchanged

When headerToolbar() is not called, the board renders exactly as before — filters in their own row above the columns.

Test plan

  • PHPStan passes
  • 112 tests pass
  • Pint passes
  • Manual test: board with headerToolbar() shows filter + search next to title
  • Manual test: board without headerToolbar() renders unchanged
  • Manual test: active filters show indicator badges below heading

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.
Copilot AI review requested due to automatic review settings March 16, 2026 09:36
Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

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

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.php and suppress the existing filters include in index.blade.php to 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
@ManukMinasyan ManukMinasyan merged commit ae4a003 into 4.x Mar 16, 2026
3 checks passed
@ManukMinasyan ManukMinasyan deleted the feat/header-toolbar branch March 16, 2026 15:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants