Filament•2mo ago

Get current table data for widget

Hi, I'm using a widget on a view page with a table and need the widget to access the current data in the table. I've followed the instructions here https://filamentphp.com/docs/3.x/panels/resources/widgets#accessing-page-table-data-in-the-widget and it works when the page first loads but when you filter or change page the widget still seems to be getting the old data. The widget view uses javascript which needs to rerun with the new data. I've got this bit of code in the blade file which I'm not sure is the best way to rerun the javascript but it works (the javascript is rerunning but recieving the old data): {{$this->js('loadData()');}} Then within the loadData function I have this javascript to get the new data: var all = {{ $this->all() }}; And this is the widget file

<?php
namespace App\Filament\Resources\MapResource\Widgets;
use App\Filament\Resources\MapResource\Pages\ListMaps;
use Filament\Widgets\Concerns\InteractsWithPageTable;
use Filament\Widgets\Widget;

class CustomerMap extends Widget
{
    use InteractsWithPageTable;
    protected function getTablePage(): string
    {
        return ListMaps::class;
    }
    protected static bool $isLazy = false;

    public function all(){
        return $this->getPageTableRecords()->toJson();
    }
    protected static string $view = 'filament.resources.map-resource.widgets.customer-map';
}

<?php
namespace App\Filament\Resources\MapResource\Widgets;
use App\Filament\Resources\MapResource\Pages\ListMaps;
use Filament\Widgets\Concerns\InteractsWithPageTable;
use Filament\Widgets\Widget;

class CustomerMap extends Widget
{
    use InteractsWithPageTable;
    protected function getTablePage(): string
    {
        return ListMaps::class;
    }
    protected static bool $isLazy = false;

    public function all(){
        return $this->getPageTableRecords()->toJson();
    }
    protected static string $view = 'filament.resources.map-resource.widgets.customer-map';
}

But every time its called the $this->getPageTableRecords()->toJson() seems to return the data of the original page you start on rather than the current page or filtered data

7 Replies

tinyman1199•2mo ago

bumping

LeandroFerreira•2mo ago

You could create a mini repo on github to reproduce the issue..

tinyman1199•2mo ago

Tried a few different methods, current attempt is in this github repo: https://github.com/ohhdeer/TableIssue I've removed alot of the unnecessary code. On the map page (show-map.blade.php) its the data being console logged on line 16 that needs to update but it stays the same even when the table updates

GitHub

GitHub - ohhdeer/TableIssue

Contribute to ohhdeer/TableIssue development by creating an account on GitHub.

LeandroFerreira•2mo ago

where is the widget?

tinyman1199•2mo ago

I changed it from a widget to a livewire component to see if that would work

LeandroFerreira•2mo ago

could you provide the api key? DM me please

tinyman1199•2mo ago

Solution provided by Leandro Livewire Component:

<?php

namespace App\Livewire;

use App\Models\Map;
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\Filters\SelectFilter;
use Filament\Tables\Table;
use Filament\Widgets\Concerns\CanPoll;
use Illuminate\Contracts\View\View;
use Livewire\Component;

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

    public function updatedTableFilters(): void
    {
        $this->dispatch('update-records', data: $this->getTableRecords()->toJson());
    }

    public function table(Table $table): Table
    {
        return $table
            ->query(Map::query())
            ->columns([
                TextColumn::make('name'),
                TextColumn::make('rating')
                    ->badge(),
            ])
            ->filters([
                SelectFilter::make('rating')
                    ->options([
                        'ACTIVE' => 'Active',
                        'INACTIVE' => 'Inactive',
                        'DORMANT' => 'Dormant',
                    ]),

            ]);
    }

    public function render(): View
    {
        return view('livewire.show-map');
    }
}

<?php

namespace App\Livewire;

use App\Models\Map;
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\Filters\SelectFilter;
use Filament\Tables\Table;
use Filament\Widgets\Concerns\CanPoll;
use Illuminate\Contracts\View\View;
use Livewire\Component;

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

    public function updatedTableFilters(): void
    {
        $this->dispatch('update-records', data: $this->getTableRecords()->toJson());
    }

    public function table(Table $table): Table
    {
        return $table
            ->query(Map::query())
            ->columns([
                TextColumn::make('name'),
                TextColumn::make('rating')
                    ->badge(),
            ])
            ->filters([
                SelectFilter::make('rating')
                    ->options([
                        'ACTIVE' => 'Active',
                        'INACTIVE' => 'Inactive',
                        'DORMANT' => 'Dormant',
                    ]),

            ]);
    }

    public function render(): View
    {
        return view('livewire.show-map');
    }
}

Blade file:

<div
    x-data="{ records: @js($this->getTableRecords()->toJson()), init() { console.log(this.records) } }"
    x-init="$watch('records', value => console.log(value))"
    @update-records.window="records = $event.detail.data">

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

</div>

<div
    x-data="{ records: @js($this->getTableRecords()->toJson()), init() { console.log(this.records) } }"
    x-init="$watch('records', value => console.log(value))"
    @update-records.window="records = $event.detail.data">

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

</div>

Gaming

Programming

Get current table data for widget