Using Tab component with Table Builder

I am using the Blade Tab component with Table Builder in my project:

<div>
    <x-filament::tabs label="Content tabs">
        @foreach($this->types as $key => $count)
            <x-filament::tabs.item
                    :active="$key === $type"
                    wire:click="$set('type', '{{ $key }}')"
            >
                {{ $typeOptions[$key] ?? str($key)->headline() }}

                <span class="sm:inline hidden">
                    ({{ number_format($count) }})
                </span>
            </x-filament::tabs.item>
        @endforeach
    </x-filament::tabs>

    {{ $this->table }}
</div>

<div>
    <x-filament::tabs label="Content tabs">
        @foreach($this->types as $key => $count)
            <x-filament::tabs.item
                    :active="$key === $type"
                    wire:click="$set('type', '{{ $key }}')"
            >
                {{ $typeOptions[$key] ?? str($key)->headline() }}

                <span class="sm:inline hidden">
                    ({{ number_format($count) }})
                </span>
            </x-filament::tabs.item>
        @endforeach
    </x-filament::tabs>

    {{ $this->table }}
</div>

The issue is when I click the tab, it will run

$set('type', '{{ $key }}')

$set('type', '{{ $key }}')

to set the type, and I will load type in my

$table->relationship()

$table->relationship()

method like this:

$table
  ->relationship(fn() => $this->when($this->type), fn(Builder $query) => $query->where('type', $this->type)))

$table
  ->relationship(fn() => $this->when($this->type), fn(Builder $query) => $query->where('type', $this->type)))

The issue the table is not re-render when I click the tab in the 1st click, it only re-re-render when I click 2nd click (feel like defer effect).

For example: If I click tab A, it doesn't show content of tab A in the table, but when I click tab B, then it show the content of tab A. And if I click tab C, it shows content of tab B.

Using Tab component with Table Builder

I am using the Blade Tab component with Table Builder in my project:

<div>
    <x-filament::tabs label="Content tabs">
        @foreach($this->types as $key => $count)
            <x-filament::tabs.item
                    :active="$key === $type"
                    wire:click="$set('type', '{{ $key }}')"
            >
                {{ $typeOptions[$key] ?? str($key)->headline() }}

                <span class="sm:inline hidden">
                    ({{ number_format($count) }})
                </span>
            </x-filament::tabs.item>
        @endforeach
    </x-filament::tabs>

    {{ $this->table }}
</div>

<div>
    <x-filament::tabs label="Content tabs">
        @foreach($this->types as $key => $count)
            <x-filament::tabs.item
                    :active="$key === $type"
                    wire:click="$set('type', '{{ $key }}')"
            >
                {{ $typeOptions[$key] ?? str($key)->headline() }}

                <span class="sm:inline hidden">
                    ({{ number_format($count) }})
                </span>
            </x-filament::tabs.item>
        @endforeach
    </x-filament::tabs>

    {{ $this->table }}
</div>

The issue is when I click the tab, it will run

$set('type', '{{ $key }}')

$set('type', '{{ $key }}')

to set the type, and I will load type in my

$table->relationship()

$table->relationship()

method like this:

$table
  ->relationship(fn() => $this->when($this->type), fn(Builder $query) => $query->where('type', $this->type)))

$table
  ->relationship(fn() => $this->when($this->type), fn(Builder $query) => $query->where('type', $this->type)))

Using Tab component with Table Builder

Similar Threads

Using Tab component with Table Builder

Similar Threads

Similar Threads

Similar Threads