Tabs in custom page

[Lmntrixo]

hello there! please need a help on how to make a tabs on custompage in filament?
i have create a custom page named product linked with a resource named categoryResource.Then when i tried to use the getTabs method on this page in show nothing on the panel.

i have notice that my custom page extends page but not Listrecords, also is it possible to join it to livewire component as it is done whith the table? i mean in the blade file whe use {{$this->table}} for table, is it not possible for tabs too?

here is the code of the product page below

where('idcategorie', $this->record->id); } public function getTabs(): array { return [ 'all'=>Tab::make('nnnnnnn'),//this method does not work ]; } protected function getTableColumns(): array { return [ TextColumn::make('libelle_produit')->label('Produit'), TextColumn::make('reference')->label('REFERENCE'), ]; } public function getTitle(): string { return $this->record->libelle_categorie;; } }

[cntabana]

You can use this trait HasTabs.

Then add this line on your view: <x-filament-panels::resources.tabs />

Then your getTabs() will appear above your table.

[photojo]

How can I solve ...
<x-filament-panels::resources.tabs />

throws an error -> getRenderHookScopes does not exist.

I'm using Filament 3, but just tables and forms, not the panel.
Is ist possible to use tabs to filter the table? How get I the tabs above the table.

Thank you very much!

[yuvraj-timalsina]

Any progress on this?

[photojo]

Unfortunately not.

[cntabana]

Can you show me your Livewire page

[yuvraj-timalsina]

Just followed the documentation and added what you mentioned in previous response.

https://filamentphp.com/docs/3.x/tables/adding-a-table-to-a-livewire-component

<div>

<x-filament-panels::resources.tabs/>

   {{ $this->table }}

</div>

The error is :

getRenderHookScopes does not exist.

[photojo]

I use the same code and get exactly the same error.

[cntabana]

Livewire Page:

`<?php

namespace App\Filament\Admin\Pages;

use Filament\Forms;
use App\Models\Post;
use Filament\Tables;
use Filament\Pages\Page;
use Filament\Tables\Table;
use Illuminate\Database\Eloquent\Model;
use Filament\Resources\Concerns\HasTabs;
use Illuminate\Database\Eloquent\Builder;
use Filament\Resources\Pages\ListRecords\Tab;

class Posts extends Page implements Tables\Contracts\HasTable, Forms\Contracts\HasForms
{
use Forms\Concerns\InteractsWithForms;

use HasTabs;
use Tables\Concerns\InteractsWithTable {
    makeTable as makeBaseTable;
}

protected static ?string $navigationIcon = 'heroicon-o-document-text';

protected static string $view = 'filament.admin.pages.posts';

protected function getTableQuery(): Builder
{
    return Post::query();
}

public function table(Table $table): Table
{
    return $table
        ->query($this->getTableQuery())
        ->columns([
                Tables\Columns\TextColumn::make('title'),
        ]);
}


public function getTabs(): array
{
    return [

        'publish' => Tab::make('Published')
                    ->icon('heroicon-m-user')
                    ->badge(fn () => Post::where('status', true)->count())
                    ->modifyQueryUsing(fn (Builder $query) => $query->where('status', true)),

        'un_publish' => Tab::make('UnPublished')
                    ->icon('heroicon-m-user')
                    ->badge(fn () => Post::where('status', false)->count())
                    ->modifyQueryUsing(fn (Builder $query) => $query->where('status', false)),
    ];
}

protected function makeTable(): Table
{
    return $this->makeBaseTable()
        ->query(fn (): Builder => $this->getTableQuery())
        ->modifyQueryUsing($this->modifyQueryWithActiveTab(...))
        //->modelLabel($this->getModelLabel() ?? static::getResource()::getModelLabel())
        //->pluralModelLabel($this->getPluralModelLabel() ?? static::getResource()::getPluralModelLabel())
        ->recordAction(function (Model $record, Table $table): ?string {
            foreach (['view', 'edit'] as $action) {
                $action = $table->getAction($action);

                if (! $action) {
                    continue;
                }

                $action->record($record);

                if ($action->isHidden()) {
                    continue;
                }

                if ($action->getUrl()) {
                    continue;
                }

                return $action->getName();
            }

            return null;
        })
        //->recordTitle(fn (Model $record): string => static::getResource()::getRecordTitle($record))
        ->recordUrl($this->getTableRecordUrlUsing() ?? function (Model $record, Table $table): ?string {
            foreach (['view', 'edit'] as $action) {
                $action = $table->getAction($action);

                if (! $action) {
                    continue;
                }

                $action->record($record);

                if ($action->isHidden()) {
                    continue;
                }

                $url = $action->getUrl();

                if (! $url) {
                    continue;
                }

                return $url;
            }
            return null;
        });

}

}
`

View Page:

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

I have tested this one and it works.

[yuvraj-timalsina]

DonorList.php

<?php

namespace App\Livewire;

use App\Models\Donor;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Resources\Components\Tab;
use Filament\Resources\Concerns\HasTabs;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Concerns\InteractsWithTable;
use Filament\Tables\Contracts\HasTable;
use Filament\Tables\Table;
use Illuminate\Contracts\View\View;
use Illuminate\Database\Query\Builder;
use Livewire\Component;

class DonorsList extends Component implements HasForms, HasTable
{
    use HasTabs;
    use InteractsWithForms;
    use InteractsWithTable;

    public function getTabs(): array
    {
        return [

            'O+' => Tab::make('O+')
                ->icon('heroicon-m-user')
                ->modifyQueryUsing(fn (Builder $query) => $query->where('blood_group', 'O+')),
        ];
    }

    public function table(Table $table): Table
    {
        return $table
            ->query(Donor::query())
            ->columns([
                TextColumn::make('name'),
            ]);
    }

    public function render(): View
    {
        return view('livewire.donors-list');
    }
}

donors-list.blade.php

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

Error

[cntabana]

Try to add this function in your class

public function getRenderHookScopes(): array { return [static::class]; }

[yuvraj-timalsina]

It seems to display the tabs even if the array is empty but data are not filtered.

[photojo]

I have a similar code, but now I get
Method App\Livewire\Model::getCachedTabs does not exist.

[cntabana]

use this trait like this

use Tables\Concerns\InteractsWithTable { makeTable as makeBaseTable; }

and add this function in yr class
`
protected function makeTable(): Table
{
return $this->makeBaseTable()
->query(fn (): Builder => $this->getTableQuery())
->modifyQueryUsing($this->modifyQueryWithActiveTab(...))
//->modelLabel($this->getModelLabel() ?? static::getResource()::getModelLabel())
//->pluralModelLabel($this->getPluralModelLabel() ?? static::getResource()::getPluralModelLabel())
->recordAction(function (Model $record, Table $table): ?string {
foreach (['view', 'edit'] as $action) {
$action = $table->getAction($action);

            if (! $action) {
                continue;
            }

            $action->record($record);

            if ($action->isHidden()) {
                continue;
            }

            if ($action->getUrl()) {
                continue;
            }

            return $action->getName();
        }

        return null;
    })
    //->recordTitle(fn (Model $record): string => static::getResource()::getRecordTitle($record))
    ->recordUrl($this->getTableRecordUrlUsing() ?? function (Model $record, Table $table): ?string {
        foreach (['view', 'edit'] as $action) {
            $action = $table->getAction($action);

            if (! $action) {
                continue;
            }

            $action->record($record);

            if ($action->isHidden()) {
                continue;
            }

            $url = $action->getUrl();

            if (! $url) {
                continue;
            }

            return $url;
        }
        return null;
    });

}
`

[cntabana]

@photojo

run php artisan optimize:clear

[photojo]

Same problem.

When I use @Dump($this->getTabs()) in my blade-file, I get all tabs.

But using <x-filament-panels::resources.tabs /> I still get
getCachedTabs does not exist

[cntabana]

try this
public function getCachedTabs(): array { return $this->getTabs(); }

ref: https://discord.com/channels/883083792112300104/1181239883965157467/1181307522389377066

[yuvraj-timalsina]

@cntabana Tabs seem to work fine after using the trait but It should work just by using the trait instead I had to duplicate code fragment in both places. Can you explain me the logic behind it?

[cntabana]

The tab is a feature for resources, so to make it work on the customer page, we need to utilize the function located under Filament\Resources\Pages\ListRecords (protected function makeTable(): Table). I am confident that there is an easy way to achieve this without duplicating the code, but currently, I don't have enough time to figure it out. However, later this week, I will dedicate time to find the solution of this. If I find the solution, I will post it here

[photojo]

Would it be possible to describe wich files you are using at the moment? I'm a little bit confused now. I'm so sorry.

[yuvraj-timalsina]

Make trait as mentioned here :

Livewire\Tables\Concerns\InteractsWithTable.php

#10127 (comment)

Take reference from code at the beginning :

#10127 (comment)

[photojo]

Tank you very much!

But I get '\Tab::modifyQuery does not exist' when clicking on one of the tabs?

[cntabana]

Share yr code please

[photojo]

My component:

`<?php

namespace App\Livewire;

use Livewire\Component;
use App\Models\Teacher;
use Filament\Tables\Table;
use Filament\Forms\Contracts\HasForms;
use Filament\Forms\Components\Tabs\Tab;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Contracts\HasTable;
use Illuminate\Database\Eloquent\Builder;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Tables\Concerns\InteractsWithTable;
use Filament\Resources\Concerns\HasTabs;

class Registrations extends Component implements HasForms, HasTable
{
use HasTabs;
use InteractsWithTable;
use InteractsWithForms;

use HasTabs;
use InteractsWithTable {
    makeTable as makeBaseTable;
}


public function table(Table $table): Table
{
    return $table
        ->query(
            Teacher::query()

        )
        ->columns([
            TextColumn::make('status'),
        ])

        ->paginated([10, 'all']);
}


public function getTabs(): array
{
    return [
        'all' => Tab::make(('All')),
     

        'new' => Tab::make('new')
            ->icon('heroicon-m-user')
            ->badge(fn () => Teacher::where('status', 'new')->count())
            // ->modifyQueryUsing(fn (Builder $query) => $query->where('status', 'new'))


    ];
}

protected function makeTable(): Table
{
    return $this->makeBaseTable()
        ->query(fn (): Builder => $this->getTableQuery())
        ->modifyQueryUsing($this->modifyQueryWithActiveTab(...))
        ->recordAction(function (Teacher $record, Table $table): ?string {
            foreach (['view', 'edit'] as $action) {
                $action = $table->getAction($action);

                if (!$action) {
                    continue;
                }

                $action->record($record);

                if ($action->isHidden()) {
                    continue;
                }

                if ($action->getUrl()) {
                    continue;
                }

                return $action->getName();
            }

            return null;
        });
}

public function getCachedTabs(): array
{
    return $this->getTabs();
}

public function getRenderHookScopes(): array
{
    return [static::class];
}

}
`

My blade-file

---

'

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

'

---

And my Trait/Consern

`<?php

use App\Models\Teacher;
use Filament\Tables\Table;
use Illuminate\Database\Eloquent\Builder;

trait InteractsWithTable
{

protected function makeTable(): Table
{
    return $this->makeBaseTable()
        ->query(fn (): Builder => $this->getTableQuery())
        ->modifyQueryUsing($this->modifyQueryWithActiveTab(...))
        //->modelLabel($this->getModelLabel() ?? static::getResource()::getModelLabel())
        //->pluralModelLabel($this->getPluralModelLabel() ?? static::getResource()::getPluralModelLabel())
        ->recordAction(function (Teacher $record, Table $table): ?string {
            foreach (['view', 'edit'] as $action) {
                $action = $table->getAction($action);

                if (!$action) {
                    continue;
                }

                $action->record($record);

                if ($action->isHidden()) {
                    continue;
                }

                if ($action->getUrl()) {
                    continue;
                }

                return $action->getName();
            }

            return null;
        })
        //->recordTitle(fn (Model $record): string => static::getResource()::getRecordTitle($record))
        ->recordUrl($this->getTableRecordUrlUsing() ?? function (Teacher $record, Table $table): ?string {
            foreach (['view', 'edit'] as $action) {
                $action = $table->getAction($action);

                if (!$action) {
                    continue;
                }

                $action->record($record);

                if ($action->isHidden()) {
                    continue;
                }

                $url = $action->getUrl();

                if (!$url) {
                    continue;
                }

                return $url;
            }
            return null;
        });
}

}
`

[cntabana]

I tried to change your component like this:

`
namespace App\Livewire;

use Livewire\Component;
use App\Models\Teacher;
use Filament\Tables\Table;
use Filament\Forms\Contracts\HasForms;
use Filament\Forms\Components\Tabs\Tab;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Contracts\HasTable;
use Illuminate\Database\Eloquent\Builder;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Tables\Concerns\InteractsWithTable;
use Filament\Resources\Concerns\HasTabs;

class Registrations extends Component implements HasForms, HasTable
{

use HasTabs;
use InteractsWithForms;
use InteractsWithTable {
    makeTable as makeBaseTable;
}

public function table(Table $table): Table
{
    return $table
        ->query(
            Teacher::query()

        )
        ->columns([
            TextColumn::make('status'),
        ])

        ->paginated([10, 'all']);
}


public function getTabs(): array
{
    return [
        'all' => Tab::make(('All')),
     

        'new' => Tab::make('new')
            ->icon('heroicon-m-user')
            ->badge(fn () => Teacher::where('status', 'new')->count())
            // ->modifyQueryUsing(fn (Builder $query) => $query->where('status', 'new'))


    ];
}

protected function makeTable(): Table
{
    return $this->makeBaseTable()
        ->modifyQueryUsing($this->modifyQueryWithActiveTab(...))
        ->recordAction(function (Teacher $record, Table $table): ?string {
            foreach (['view', 'edit'] as $action) {
                $action = $table->getAction($action);

                if (!$action) {
                    continue;
                }

                $action->record($record);

                if ($action->isHidden()) {
                    continue;
                }

                if ($action->getUrl()) {
                    continue;
                }

                return $action->getName();
            }

            return null;
        });
}

public function getCachedTabs(): array
{
    return $this->getTabs();
}

public function getRenderHookScopes(): array
{
    return [static::class];
}

}
`

If it doesn't work, please create a repository, and I will take a look for you.

[cntabana]

@yuvraj-timalsina

You can create a trait looks like this
'<?php
namespace App\Filament\Traits\Filament;

use Filament\Tables;
use Filament\Tables\Table;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Database\Eloquent\Model;

trait InteractWithTabs
{

use Tables\Concerns\InteractsWithTable {
    makeTable as makeBaseTable;
}

protected function makeTable(): Table
{
    return $this->makeBaseTable()
        ->query(fn (): Builder => $this->getTableQuery())
        ->modifyQueryUsing($this->modifyQueryWithActiveTab(...));
}

}
`

Then use that trait (use InteractWithTabs) anywhere you want.

[yuvraj-timalsina]

@cntabana This is neat and works like a charm. Thank you for the support. Happy Coding!

[photojo]

Thank you everyone how wanted to help me. Now, after several hours I give up and use the usual filter-functionality.
Greetings
Jo

[yuvraj-timalsina]

You may still share your code once. It should work.

[photojo]

@yuvraj-timalsina
Here you can find my code: https://github.com/photojo/laravel3_tabs_filter

Thank you very much!

[yuvraj-timalsina]

InteractWithTabsTrait

<?php

namespace App\Traits;

use Filament\Tables\Concerns\InteractsWithTable;
use Filament\Tables\Table;
use Illuminate\Database\Eloquent\Builder;

trait InteractWithTabsTrait
{
    use InteractsWithTable {makeTable as makeBaseTable; }

    protected function makeTable(): Table
    {
        return $this->makeBaseTable()
            ->query(fn (): Builder => $this->getTableQuery())
            ->modifyQueryUsing($this->modifyQueryWithActiveTab(...));
    }
}

TeacherComponent

<?php

namespace App\Livewire;

use App\Models\Teacher;
use App\Traits\InteractWithTabsTrait;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Pages\Page;
use Filament\Resources\Concerns\HasTabs;
use Filament\Resources\Pages\ListRecords\Tab;
use Filament\Tables;
use Filament\Tables\Contracts\HasTable;
use Filament\Tables\Table;
use Illuminate\Database\Eloquent\Builder;

class TeacherComponent extends Page implements HasForms, HasTable
{
    use HasTabs;
    use InteractsWithForms;
    use InteractWithTabsTrait;

    protected static string $view = 'livewire.teacher-component';

    public function getTabs(): array
    {
        $tabs = ['All' => Tab::make()];
        $teacherStatuses = Teacher::whereNotNull('status')
            ->pluck('status')
            ->unique();

        foreach ($teacherStatuses as $teacherStatus) {
            $tabs[$teacherStatus] = Tab::make()
                ->modifyQueryUsing(function (Builder $query) use ($teacherStatus) {
                    return $query->where('status', $teacherStatus);
                });
        }

        return $tabs;
    }

    public function table(Table $table): Table
    {
        return $table
            ->query(Teacher::query())
            ->columns([
                Tables\Columns\TextColumn::make('name')
                    ->searchable(),
                Tables\Columns\TextColumn::make('status')
                    ->searchable(),
            ]);
    }
}

Note: Do not use full-page Livewire Component for the table, instead render it inside your other component or page.

<livewire:teacher-component/>

[photojo]

Oh man! It works! Thank you so much!
Just two additional Questions:

1. Note: Do not use full-page Livewire Component for the table, instead render it inside your other component or page. Why?
2. So, tabs for filter tables do only work with this trait, not out of the "filament-box"?

[yuvraj-timalsina]

Firstly, it only worked by extending the Page not the Component and if used with full-page Livewire Component gives off dashboard navigation and navbar as well so I recommended the way it works.

Secondly, it only worked by utilizing the trait for now so be it, maybe it will work out of the box in later releases.

Happy Coding!

[photojo]

Ok! All right!
Tanks a lot!

[ShaungBhone]

It's not working for me. I got getAttribute not defined in javascript browser console.

[yuvraj-timalsina]

Did you follow the instructions mentioned?

#10127 (comment)

[ShaungBhone]

Yes

[yuvraj-timalsina]

Could you share your code?

[ShaungBhone]

Currently I skip this step. I will try later.

[KhairulAzmi21]

Can we use tabs inside livewire component ? not inside filament pages.

[ZerrudOrtiz]

Cool it works, but how can we set it to have a default selected tabs?

This seems not working

public function getDefaultActiveTab(): string | int | null
{
    // not working
    return 'June';
}

[yuvraj-timalsina]

@ZerrudOrtiz

Try the following method :
https://filamentphp.com/docs/3.x/infolists/layout/tabs#setting-the-default-active-tab

->activeTab(2)

[ZerrudOrtiz]

Hi @yuvraj-timalsina thanks for the response just to confirm will it work on this? the tab is above the table header, like what the discussion is about.

[yuvraj-timalsina]

Not sure, you may try with int value as well.Else, if it didn't work, feel free to share code and we will work something out together.

[shaheenfawzy]

You need to call $this->loadDefaultActiveTab() in the mount method inside the page like this:

public function mount(): void
{
    $this->loadDefaultActiveTab();
}

public function getDefaultActiveTab(): string|int|null
{
    return 'June';
}