F
Filament•2mo ago
Moe

Tabs in Resource with Multiple Models

I have a Filament v3 resource that needs to display data from 3 different models in 3 separate tabs, each with completely different column structures. My Setup: Main model: Device Secondary model: DeviceCred Tertiary model: DeviceInfo Each model has different fields and I want each tab to: Query its own model Display only the relevant columns for that model Switch seamlessly between tabs Here’s my code that mostly works, but I have to double-click the tab before it loads the correct columns (there’s a noticeable lag on the first click). 
public function getTabs(): array

{

    return [

        'devices' => Tab::make('Devices')

            ->badge(Device::count())

            ->query(fn () => Device::query()),

        'Creds' => Tab::make('Creds')

            ->badge(DeviceCre::count())

            ->query(fn () => DeviceCred::query()),

        'info' => Tab::make('Info')

            ->badge(DeviceInfo::count())

            ->query(fn () => DeviceInfo::query()),

    ];

}

   public function table(Table $table): Table
    {
        $query = match ($this->activeTab) {
            'Creds' => DeviceCred::query(),
            'info' => DeviceInfo::query(),
            default => Device::query(),
        };

        return $table
            ->query($query)
            ->columns($this->getColumnsForTab($this->activeTab))
            ->striped()
            ->paginated([10, 25, 50])
            ->searchable();
    }
public function getTabs(): array

{

    return [

        'devices' => Tab::make('Devices')

            ->badge(Device::count())

            ->query(fn () => Device::query()),

        'Creds' => Tab::make('Creds')

            ->badge(DeviceCre::count())

            ->query(fn () => DeviceCred::query()),

        'info' => Tab::make('Info')

            ->badge(DeviceInfo::count())

            ->query(fn () => DeviceInfo::query()),

    ];

}

   public function table(Table $table): Table
    {
        $query = match ($this->activeTab) {
            'Creds' => DeviceCred::query(),
            'info' => DeviceInfo::query(),
            default => Device::query(),
        };

        return $table
            ->query($query)
            ->columns($this->getColumnsForTab($this->activeTab))
            ->striped()
            ->paginated([10, 25, 50])
            ->searchable();
    }
Any idea how to fix the tab refresh/double-click issue or make the table update instantly when switching?
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?