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 }}') to set the type, and I will load type in my $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.

5 Replies

toeknee•14mo ago

Hmm, did you mount and fill on boot of the component first? If it's not been filled then that would likely explain that scenario

Phuc LeOP•14mo ago

@toeknee I am not sure what you mean, but I do have a mount method in that component and no boot method

public function mount()
{
    $this->authorize('view', $this->keywordReport);
}

public function mount()
{
    $this->authorize('view', $this->keywordReport);
}

toeknee•14mo ago

In mount put: $this->form->fill();

Phuc LeOP•14mo ago

I just did, but it doesn't work

public function mount()
{
    $this->authorize('view', $this->keywordReport);

    $this->form->fill();
}

public function mount()
{
    $this->authorize('view', $this->keywordReport);

    $this->form->fill();
}

toeknee•14mo ago

Then I am unsure, sorry

Gaming

Programming

Using Tab component with Table Builder