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))
        ];
    }
}


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>
Was this page helpful?