How to add Tabs on custom filament page?

In this guide, we will explore how we can add tabs on custom filament page.

Create a page to add tabs on custom filament page

To create a new filament page, just hit the following commad:

php artisan make:filament-page TabViewPage

You can explore more about creating filament custom page in this article.

Implement HasTable

Second step will be to implement the HasTable and use the trait. Also define your table() methods in your page.

class TabViewPage extends Page implements HasForms, HasTable
{
    use InteractsWithForms, InteractsWithTable;
.......
}

Implement HasTabs

Now to implement the tabs on our custom page, you also need to use the HasTabs trait.

class TabViewPage extends Page implements HasForms, HasTable
{
    use InteractsWithForms, InteractsWithTable,HasTabs;
.......
}

Read more getTabs() method.

Define getTabs() method on page

Now its time to define the getTabs(). The key will be used as identifiers and label and query can be modified.

public function getTabs(): array
{
    return [
        'all' => Tab::make('All customers'),
        'active' => Tab::make('Active customers')
            ->modifyQueryUsing(fn (Builder $query) => $query->where('active', true)),
        'inactive' => Tab::make('Inactive customers')
            ->modifyQueryUsing(fn (Builder $query) => $query->where('active', false)),
    ];
}

Finally in Blade component

Finally, after we implemented the getTabs to add tabs on custom filament page, we need to add the following code on filament page blade file to show the tabs:

<x-filament-panels::page>
<x-filament-panels::resources.tabs/> // this line
    {{$this->table}}
</x-filament-panels::page>

Read more about creating custom action button on filament custom page.