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');
    }
}

<?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
{
    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');
    }
}

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');
    }
}

Jump to solution

Patrick Boivin•7/26/23, 4:10 PM

Can you share your livewire.table-testlivewire.table-test view?

KleisOP•7/26/23, 6:57 PM

<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•7/26/23, 7:05 PM

I'm not sure an action will change anything but you could try, not a bad idea

Patrick Boivin•7/26/23, 7:06 PM

So if I understand correctly, you click the button once, then you see the updated {{ $this->var }}{{ $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•7/26/23, 7:06 PM

correct

Patrick Boivin•7/26/23, 7:07 PM

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

KleisOP•7/26/23, 7:07 PM

Patrick Boivin•7/26/23, 7:10 PM

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•7/26/23, 7:12 PM

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•7/26/23, 8:52 PM

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•7/26/23, 8:56 PM

Ah yes, my bad! I lost track of the

v3

v3

tag you added.

Patrick Boivin•7/26/23, 8:56 PM

Glad you were able to solve it