Persist current tab while using Tabs Blade component

Hello,

I am using Tabs Blade component inside the filament panel page,

<x-filament::tabs>
    <x-filament::tabs.item
        :active="$activeTab === 'tab1'"
        wire:click="$set('activeTab', 'tab1')"
    >
        Tab 1
    </x-filament::tabs.item>
 
    {{-- Other tabs --}}
</x-filament::tabs>

<x-filament::tabs>
    <x-filament::tabs.item
        :active="$activeTab === 'tab1'"
        wire:click="$set('activeTab', 'tab1')"
    >
        Tab 1
    </x-filament::tabs.item>
 
    {{-- Other tabs --}}
</x-filament::tabs>

Is there any way i can Persist the current tab in the URL's query string?

Thank you

Solution

For those who are looking for this solution,

There is no direct filament way to do this, you need some manual alpine to make this work.

in page class,

public function mount(int|string $record): void
{
    $this->record = $this->resolveRecord($record);
    
    //Add this code
    if (request()->has('tab')) {
        $this->activeTab = request('tab');
    }
}

public function mount(int|string $record): void
{
    $this->record = $this->resolveRecord($record);
    
    //Add this code
    if (request()->has('tab')) {
        $this->activeTab = request('tab');
    }
}

in the view file,

<div class="rounded-lg lg:col-span-2" x-data="{
    activeTab: @entangle('activeTab'),
    updateUrl() {
        const url = new URL(window.location.href);
        url.searchParams.set('tab', this.activeTab);
        history.pushState(null, '', url);
    }
}"
x-init="$watch('activeTab', () => updateUrl());">

<div class="rounded-lg lg:col-span-2" x-data="{
    activeTab: @entangle('activeTab'),
    updateUrl() {
        const url = new URL(window.location.href);
        url.searchParams.set('tab', this.activeTab);
        history.pushState(null, '', url);
    }
}"
x-init="$watch('activeTab', () => updateUrl());">

Jump to solution

Persist current tab while using Tabs Blade component

Hello,

I am using Tabs Blade component inside the filament panel page,

<x-filament::tabs>
    <x-filament::tabs.item
        :active="$activeTab === 'tab1'"
        wire:click="$set('activeTab', 'tab1')"
    >
        Tab 1
    </x-filament::tabs.item>
 
    {{-- Other tabs --}}
</x-filament::tabs>

<x-filament::tabs>
    <x-filament::tabs.item
        :active="$activeTab === 'tab1'"
        wire:click="$set('activeTab', 'tab1')"
    >
        Tab 1
    </x-filament::tabs.item>
 
    {{-- Other tabs --}}
</x-filament::tabs>

Is there any way i can Persist the current tab in the URL's query string?

Thank you

Solution

For those who are looking for this solution,

There is no direct filament way to do this, you need some manual alpine to make this work.

in page class,

public function mount(int|string $record): void
{
    $this->record = $this->resolveRecord($record);
    
    //Add this code
    if (request()->has('tab')) {
        $this->activeTab = request('tab');
    }
}

public function mount(int|string $record): void
{
    $this->record = $this->resolveRecord($record);
    
    //Add this code
    if (request()->has('tab')) {
        $this->activeTab = request('tab');
    }
}

in the view file,

<div class="rounded-lg lg:col-span-2" x-data="{
    activeTab: @entangle('activeTab'),
    updateUrl() {
        const url = new URL(window.location.href);
        url.searchParams.set('tab', this.activeTab);
        history.pushState(null, '', url);
    }
}"
x-init="$watch('activeTab', () => updateUrl());">

<div class="rounded-lg lg:col-span-2" x-data="{
    activeTab: @entangle('activeTab'),
    updateUrl() {
        const url = new URL(window.location.href);
        url.searchParams.set('tab', this.activeTab);
        history.pushState(null, '', url);
    }
}"
x-init="$watch('activeTab', () => updateUrl());">

Jump to solution

Persist current tab while using Tabs Blade component

Persist current tab while using Tabs Blade component

Similar Threads

Similar Threads

Similar Threads