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?

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?

Tabs in Resource with Multiple Models

Similar Threads

Tabs in Resource with Multiple Models

Similar Threads

Similar Threads

Similar Threads