Filament•7mo ago

Is there a way to intercept the activeTab parameter in the resource table function?

I want to change the table structure depending on the tab that was just clicked. I can get the value after you leave the tab using $table->getLivewire()->activeTab (as the tab is probably only available after the table has rendered). I would like to do something like:

public static function table(Table $table): Table
{
  if ($activeTab === 'Tab One') {
    return (new TableConfigurationOne($table));
  } // and more...
  
  return (new TableConfigurationDefault($table));
}

public static function table(Table $table): Table
{
  if ($activeTab === 'Tab One') {
    return (new TableConfigurationOne($table));
  } // and more...
  
  return (new TableConfigurationDefault($table));
}

TIA

4 Replies

LeandroFerreira•7mo ago

Would you like to show/hide columns on a specific tab?

TextColumn::make('column')
->hidden(fn ($livewire) => $livewire->activeTab === 'Tab One')

TextColumn::make('column')
->hidden(fn ($livewire) => $livewire->activeTab === 'Tab One')

Nate•7mo ago

It may be enough wish you could do $table->hidden(). Let me see if the above is enough. Thanks.

Ola A•7mo ago

No. It isn't. We want to swap out the entire table because the columns to be displayed are different. Different table headers, different parent eloquent query. Also, it is cleaner to not have to load all that data if the view isn't using it.

Nate•7mo ago

@Ola A @Leandro Ferreira Yeah the problem is this doesn't change the underlying query. Be better if we can pull in a different table. Ok I have found a "hacky" way around this. I overrode the vendor/filament/components/tabs/item.blade.php so I could add a click event (there is already a wire:click on there but it just sets and not dispatched).

@click="$dispatch('tabChange', { tab: '{{ $slot->toHtml() }}' })"

@click="$dispatch('tabChange', { tab: '{{ $slot->toHtml() }}' })"

I then listen for the event in the list page like so:

#[On('tabChange')]
public function tabChange(): void
{
    $this->resetTable();
}

#[On('tabChange')]
public function tabChange(): void
{
    $this->resetTable();
}

This refreshed the table again so you can get the current tab value (without it you can only get the previous tab value as the page doesn't refresh between tab changes). I now have access to the current active tab and can then switch tables based on this.

public function table(Table $table): Table
{
    if ($table->getLivewire()->activeTab === 'Dispatch certificates') {
        return $this->batchedTable($table);
    }

    return $this->defaultTable($table);
}

public function table(Table $table): Table
{
    if ($table->getLivewire()->activeTab === 'Dispatch certificates') {
        return $this->batchedTable($table);
    }

    return $this->defaultTable($table);
}

Gaming

Programming

Is there a way to intercept the activeTab parameter in the resource table function?