Filament•11mo ago

Apply filament tab query filter to table on custom ViewRecord page

I have built a custom filament resource page (View type). I have added a separate table which get's its data using an api via sushi. I'm able to display the table and the tabs, but when I click on the tabs for filtering, it just refreshes the table, rather the applying the query. What I want is very similar to the filament's demo order page. orders

class ViewReport extends ViewRecord implements HasInfolists, HasTable, HasForms
{
    use InteractsWithRecord;
    use InteractsWithTable;
    use ExposesTableToWidgets;
    use HasTabs;

    protected static string $resource = PortalsResource::class;
    #[Url] public ?string $activeTab = null;

    private static array $reportClasses = [
        1 => FirstReport::class,
        2 => SecondReport::class
    ];

    public function table(Table $table): Table
    {
        $query = static::$reportClasses[$this->record->id]::query();
        return $table
            ->query($query)
            ->columns([
                TextColumn::make('crn'),
            ])
            ->bulkActions([
                BulkAction::make("Renew")
            ]);
    }
    public function getTabs(): array
    {
        return [
            null => Tab::make('All'),
            'prepaid' => Tab::make()->query(fn ($query) => $query->where('isPrepaid', 1))
        ];
    }
}

class ViewReport extends ViewRecord implements HasInfolists, HasTable, HasForms
{
    use InteractsWithRecord;
    use InteractsWithTable;
    use ExposesTableToWidgets;
    use HasTabs;

    protected static string $resource = PortalsResource::class;
    #[Url] public ?string $activeTab = null;

    private static array $reportClasses = [
        1 => FirstReport::class,
        2 => SecondReport::class
    ];

    public function table(Table $table): Table
    {
        $query = static::$reportClasses[$this->record->id]::query();
        return $table
            ->query($query)
            ->columns([
                TextColumn::make('crn'),
            ])
            ->bulkActions([
                BulkAction::make("Renew")
            ]);
    }
    public function getTabs(): array
    {
        return [
            null => Tab::make('All'),
            'prepaid' => Tab::make()->query(fn ($query) => $query->where('isPrepaid', 1))
        ];
    }
}

My view file

 // view_report.blade.php 
    <div class="flex flex-col gap-y-6">
        <x-filament-panels::resources.tabs />
        {{ $this->table }} 
    </div>
</x-filament-panels::page>

 // view_report.blade.php 
    <div class="flex flex-col gap-y-6">
        <x-filament-panels::resources.tabs />
        {{ $this->table }} 
    </div>
</x-filament-panels::page>

2 Replies

ArrowOP•11mo ago

If I add the following code to the start of table method. I do get the filtering done when a page is refreshed but not when livewire makes a request, as the value for $this->activeTab is still the same from the previous request.

    public function table(Table $table): Table
    {
        switch ($this->activeTab) {
            case 'unpaid':
                $query = $query->where('isPrepaid', '=', 0)->where('balance', '>', 0);
                break;

            case 'paid':
                $query = $query->where('isPrepaid', '=', 0)->where('balance', '<=', 0);
                break;
            case 'prepaid':
                $query = $query->where('isPrepaid', '=', 1);
                break;
        }

    public function table(Table $table): Table
    {
        switch ($this->activeTab) {
            case 'unpaid':
                $query = $query->where('isPrepaid', '=', 0)->where('balance', '>', 0);
                break;

            case 'paid':
                $query = $query->where('isPrepaid', '=', 0)->where('balance', '<=', 0);
                break;
            case 'prepaid':
                $query = $query->where('isPrepaid', '=', 1);
                break;
        }

Igor•10mo ago

I'm with the same need, There are some columns that I want to hide depending of active tab

Gaming

Programming

Apply filament tab query filter to table on custom ViewRecord page