Table Header & Footer

• Introduction
• Header Elements
• Footer Elements
• Include Views

Introduction

The header holds search, column toggles, filter controls, and bulk actions. The footer holds pagination and record counts.

Header Elements

Chain methods on PowerGrid::header().

Search Input

Chain showSearchInput() on PowerGrid::header(). See Searching Data.

app/Livewire/ProductTable.php

use PowerComponents\LivewirePowerGrid\PowerGridComponent;
use PowerComponents\LivewirePowerGrid\Facades\PowerGrid; 

class ProductTable extends PowerGridComponent
{
    public function setUp(): array
    {
        return [
            PowerGrid::header()
                ->showSearchInput(),
        ];
    }
}

INFO

Header search does not match Enum labels. See Searching Data - Enum.

Toggle Column Visibility

Chain showToggleColumns() on PowerGrid::header().

app/Livewire/ProductTable.php

use PowerComponents\LivewirePowerGrid\PowerGridComponent;
use PowerComponents\LivewirePowerGrid\Facades\PowerGrid; 

class ProductTable extends PowerGridComponent
{
    public function setUp(): array
    {
        return [
             PowerGrid::header() 
                ->showToggleColumns(),
        ];
    }
}

Header Alignment

Align the header controls group with left(), center(), right(), or align('left'|'center'|'right'). The default is right.

app/Livewire/ProductTable.php

PowerGrid::header()
    ->left()
    ->showSearchInput();

Header Element Configuration

Header buttons resolve icon, title, and label in this order: your setUp() configuration, then the theme token, then the package default.

Pass a closure to showToggleColumns(), showSearchInput(), showSoftDeletes(), filtersToggle(), clearFiltersPill(), or searchClearIcon().

app/Livewire/ProductTable.php

use PowerComponents\LivewirePowerGrid\Facades\PowerGrid;

public function setUp(): array
{
    return [
        PowerGrid::header()
            ->showToggleColumns(fn ($element) => $element
                ->icon('columns')
                ->title('Columns')
                ->showLabel())
            ->showSearchInput(fn ($element) => $element
                ->title('Search products...'))
            ->filtersToggle(fn ($element) => $element
                ->icon('funnel')
                ->showLabel())
            ->clearFiltersPill(fn ($element) => $element
                ->hideLabel())
            ->searchClearIcon(fn ($element) => $element
                ->icon('x-mark')),

        PowerGrid::filterBuilder()->title('Filter')->icon('funnel'),
        PowerGrid::exportable('report')->title('Export')->icon('icons.download'),
    ];
}

Method	Description
icon(string $icon, array $iconAttributes = [])	Icon name. funnel renders <x-funnel />. icons.funnel renders <x-icons.funnel />. Packaged icons use livewire-powergrid::icons.filter. Unknown components render nothing.
withoutIcon()	Hide the icon
title(string $title)	Literal text or a lang key. Always used as title / aria-label. Becomes visible text only with showLabel().
showLabel() / hideLabel()	Show or hide the label next to the icon
view(string $view)	Replace the element Blade view

Style the same controls from the theme (header.toggle_columns.*, header.filters.*, header.export.*). See Custom Theme.

Loading Icon

Chain withoutLoading() on PowerGrid::header() to hide the loading indicator.

app/Livewire/ProductTable.php

use PowerComponents\LivewirePowerGrid\PowerGridComponent;
use PowerComponents\LivewirePowerGrid\Facades\PowerGrid; 

class ProductTable extends PowerGridComponent
{
    public function setUp(): array
    {
        return [
            PowerGrid::header()
                ->withoutLoading(),
        ];
    }
}

Display Soft Deleted Records

Adds a header control for With deleted records, Without deleted records, or Only deleted records.

Chain showSoftDeletes() on PowerGrid::header(). Pass showMessage: false to hide the status message (default true).

app/Livewire/ProductTable.php

use PowerComponents\LivewirePowerGrid\PowerGridComponent;
use PowerComponents\LivewirePowerGrid\Facades\PowerGrid; 

class ProductTable extends PowerGridComponent
{
    public function setUp(): array
    {
        return [
            PowerGrid::header()
                ->showSoftDeletes(showMessage: true),
        ];
    }
}

Multi-row Bulk Actions

See Bulk Actions.

Footer Elements

Chain methods on PowerGrid::footer().

Method	Description
showPerPage(int $perPage = 10, array $perPageValues = [10, 25, 50, 100, 0])	Per-page dropdown. 0 is "show all".
showRecordCount(string $mode = 'full')	Record count (full, short, min).
pagination(string $viewPath)	Custom pagination view.
pageName(string $pageName = 'page')	Query-string page key (alphanumeric only).
includeViewOnTop(string $viewPath)	Blade view above the footer.
includeViewOnBottom(string $viewPath)	Blade view below the footer.

See Pagination.

Include Views

includeViewOnTop() and includeViewOnBottom() render a Blade view above or below the header or footer. Chain them on PowerGrid::header() or PowerGrid::footer(). The view can read the component's public properties.

app/Livewire/ProductTable.php

use PowerComponents\LivewirePowerGrid\PowerGridComponent;
use PowerComponents\LivewirePowerGrid\Facades\PowerGrid; 

class ProductTable extends PowerGridComponent
{
    public string $someProperty =  "foobar"; 

    public function setUp(): array
    {
        return [
            PowerGrid::header()
                ->includeViewOnTop('components.datatable.header-top')
                ->includeViewOnBottom('components.datatable.header-bottom'),

            PowerGrid::footer()
                ->includeViewOnTop('components.datatable.footer-top')
                ->includeViewOnBottom('components.datatable.footer-bottom'),
        ];
    }
}

resources/views/components/datatable/header-bottom.blade.php

<div>
    This is my property: {{ $someProperty }}
</div>

Custom pagination views are covered in Custom Pagination Component.