Filament•17mo ago

Make table update when variable changes

Custom page with a livewire component that has a table needs to update the table when a variable changes. There are more parts to the issue, but it boils down to the code below, when changeVar is called from livewire component the var changes (can be seen on the page), but the table header does not. If I click the button once more, the table updates - so the table is always lagging 1 event.

<?php

namespace App\Livewire;

use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Concerns\InteractsWithTable;
use Filament\Tables\Contracts\HasTable;
use Filament\Tables\Table;
use Illuminate\Contracts\View\View;
use Livewire\Component;
use Filament\Tables\Columns\ViewColumn;

class TableTest extends Component implements HasForms, HasTable
{
    use InteractsWithTable;
    use InteractsWithForms;

    public $var = "test";

    function changeVar()
    {
        $this->var = "changed";
    }

    public function table(Table $table): Table
    {
        return $table
            ->query(\App\Models\Apartment::where('name', '!=', 'O')->where('name', '!=', 'P'))
            ->columns([
                TextColumn::make('name')->label($this->var),
            ])
            ->filters([
                // ...
            ])
            ->actions([
                // ...
            ])
            ->bulkActions([
                // ...
            ])->paginated(false);
    }

    public function render()
    {
        return view('livewire.table-test');
    }
}

<?php

namespace App\Livewire;

use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Concerns\InteractsWithTable;
use Filament\Tables\Contracts\HasTable;
use Filament\Tables\Table;
use Illuminate\Contracts\View\View;
use Livewire\Component;
use Filament\Tables\Columns\ViewColumn;

class TableTest extends Component implements HasForms, HasTable
{
    use InteractsWithTable;
    use InteractsWithForms;

    public $var = "test";

    function changeVar()
    {
        $this->var = "changed";
    }

    public function table(Table $table): Table
    {
        return $table
            ->query(\App\Models\Apartment::where('name', '!=', 'O')->where('name', '!=', 'P'))
            ->columns([
                TextColumn::make('name')->label($this->var),
            ])
            ->filters([
                // ...
            ])
            ->actions([
                // ...
            ])
            ->bulkActions([
                // ...
            ])->paginated(false);
    }

    public function render()
    {
        return view('livewire.table-test');
    }
}

Solution:

So seems emit was renamed to dispatch in v3, I got the refresh working with the below code, thanks for the help. ``` class TableTest extends Component implements HasForms, HasTable...

Jump to solution

10 Replies

Patrick Boivin•17mo ago

Can you share your livewire.table-test view?

KleisOP•17mo ago

<x-filament::page>
    @livewire('TableTest')
</x-filament::page>

<x-filament::page>
    @livewire('TableTest')
</x-filament::page>

And the TableTest component

<div>
    <button type="input" wire:click="changeVar">change</button>

    {{ $this->var }}

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

<div>
    <button type="input" wire:click="changeVar">change</button>

    {{ $this->var }}

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

But I am thinking maybe I need to use filament actions instead of trying to use livewire click directly?

Patrick Boivin•17mo ago

I'm not sure an action will change anything but you could try, not a bad idea So if I understand correctly, you click the button once, then you see the updated {{ $this->var }} in the page? But your table header also reads the same variable and it's not updated. But if you click the button a second time, the table header is updated. Right?

KleisOP•17mo ago

correct

Patrick Boivin•17mo ago

I think you can force a refresh on the table... 1 sec I'll look in some code I have here

KleisOP•17mo ago

Patrick Boivin•17mo ago

My problem is a bit different from yours but here's an idea you can try:

class TableTest extends Component implements HasForms, HasTable
{
    // ...

    protected $listeners = ['refreshComponent' => '$refresh'];

    function changeVar()
    {
        $this->var = "changed";

        $this->emitSelf('refreshComponent');
    }
    
    // ...

class TableTest extends Component implements HasForms, HasTable
{
    // ...

    protected $listeners = ['refreshComponent' => '$refresh'];

    function changeVar()
    {
        $this->var = "changed";

        $this->emitSelf('refreshComponent');
    }
    
    // ...

KleisOP•17mo ago

I changed it to a filament action, just to try it out and it gives the same issue - I guess the reason is that the var is not directly a part of the table component, not that that explains why it updates if its just done 2 times though

Solution

Kleis•17mo ago

So seems emit was renamed to dispatch in v3, I got the refresh working with the below code, thanks for the help.

class TableTest extends Component implements HasForms, HasTable
{
    use InteractsWithTable;
    use InteractsWithForms;

    public $var = "test";

    protected $listeners = ['refreshTableTest' => '$refresh'];

    public function table(Table $table): Table
    {
        return $table
            ->query(\App\Models\Apartment::where('name', '!=', 'O')->where('name', '!=', 'P'))
            ->columns([
                TextColumn::make('name')->label($this->var),
            ])
            ->filters([])
            ->actions([])
            ->bulkActions([])
            ->headerActions([
                Action::make('HeaderTest')
                ->action(function($livewire){ $this->var = "headerAction"; $livewire->dispatch('refreshTableTest'); })
            ])
            ->paginated(false);
    }

    public function render()
    {
        return view('livewire.table-test');
    }
}

class TableTest extends Component implements HasForms, HasTable
{
    use InteractsWithTable;
    use InteractsWithForms;

    public $var = "test";

    protected $listeners = ['refreshTableTest' => '$refresh'];

    public function table(Table $table): Table
    {
        return $table
            ->query(\App\Models\Apartment::where('name', '!=', 'O')->where('name', '!=', 'P'))
            ->columns([
                TextColumn::make('name')->label($this->var),
            ])
            ->filters([])
            ->actions([])
            ->bulkActions([])
            ->headerActions([
                Action::make('HeaderTest')
                ->action(function($livewire){ $this->var = "headerAction"; $livewire->dispatch('refreshTableTest'); })
            ])
            ->paginated(false);
    }

    public function render()
    {
        return view('livewire.table-test');
    }
}

Patrick Boivin•17mo ago

Ah yes, my bad! I lost track of the v3 tag you added. Glad you were able to solve it 😄

Gaming

Programming

Make table update when variable changes