How to do auto refresh of table at fixed interval?

[jigapate]

Hello,

I have created powergrid table, but I need to refresh that table at certain interval say 5 min, without any user interaction,
Table should fetch new data from DB and show changes,

How to do that?

[marineusde]

The powergrid tables got event listeners for refresh:

Include your table in a livewire component with this method:

    public function refreshMyTable(): void
    {
        $this->dispatch('pg:eventRefresh-YOURTABLENAME');
    }

then add a div with wire:

<div wire:poll.5s="refreshMyTable">
  <livewire:path.your-table />
</div>

Documentation:
Wire-Poll: https://livewire.laravel.com/docs/wire-poll

PG-Event-Listeners: https://livewire-powergrid.com/table/component-settings.html#event-listeners

[jigapate]

It is sending update request, but table values are not getting updated,

Do I need to give path in $this->dispatch('pg:eventRefresh-YOURTABLENAME'); as table is in sub-folder,?

{
    "returns": [
        null
    ],
    "html": "<div wire:id=\"rAZu8KYY3XLd934EFEgD\" wire:poll.30s=\"refreshMyTable\">\n    <div wire:id=\"9n3BQMYjKKovhZLkRrzc\"></div></div>\n\n",
    "dispatches": [
        {
            "name": "pg:eventRefresh-LiveFutureDataTable",
            "params": []
        }
    ]
}

[marineusde]

Add a "now()" in one of your columns, so you can see if the table updated. In my test, it works. Be sure, that your "livewire component" with the div and the dispatch is NOT the page cause livewire dont works there. Example:

PageClass -> TableRefreshComponent (wire:poll and refreshMyTable-Method) -> PowergridTable

If it doesnt work, please insert your code here.

[jigapate]

Here is the code,

//Main page from controller, where live-future-data-table-comp in inserted.

        <div class="card-body py-4">
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="pane_futures" role="tabpanel">
                    <livewire:future.live-future-data-table-comp />
                </div>
                <div class="tab-pane fade show" id="pane_future_price_oi" role="tabpanel">
                    <livewire:future.live-price-oi-chart />
                </div>
            </div>
        </div>

//Component
<?php

namespace App\Livewire\Future;

use Livewire\Component;

class LiveFutureDataTableComp extends Component
{
    public function refreshMyTable()
    {
        $this->dispatch('pg:eventRefresh-LiveFutureDataTable');
    }

    public function render()
    {
        return view('livewire.future.live-future-data-table-comp');
    }
}

//Blade of live-future-data-table-comp component.
<div wire:poll.30s="refreshMyTable">
    <livewire:future.live-future-data-table />
</div>

//Powergrid table..

<?php

namespace App\Livewire\Future;

use App\Models\LiveFuture;
use Illuminate\Support\Carbon;
use Illuminate\Support\Facades\Blade;
use Illuminate\Database\Eloquent\Builder;
use PowerComponents\LivewirePowerGrid\Button;
use PowerComponents\LivewirePowerGrid\Column;
use PowerComponents\LivewirePowerGrid\Footer;
use PowerComponents\LivewirePowerGrid\Header;
use PowerComponents\LivewirePowerGrid\PowerGrid;
use PowerComponents\LivewirePowerGrid\Exportable;
use PowerComponents\LivewirePowerGrid\Facades\Filter;
use PowerComponents\LivewirePowerGrid\PowerGridFields;
use PowerComponents\LivewirePowerGrid\Traits\WithExport;
use PowerComponents\LivewirePowerGrid\PowerGridComponent;

final class LiveFutureDataTable extends PowerGridComponent
{
    use WithExport;

    public $symbol;

    public string $sortField = 'time';
    
    public string $sortDirection = 'desc';
    public int $perPage = 25;

    public function setUp(): array
    {
        return [
            Footer::make()
                ->showPerPage($this->perPage)
                ->showRecordCount(),
        ];
    }

    public function datasource(): Builder
    {
        $date = Carbon::now()->format('Y-m-d');

        return LiveFuture::query()->where('date', $date)->where('asset_symbol', 'BANKNIFTY')->where('expiry', '2024-04-24');
    }

    public function relationSearch(): array
    {
        return [];
    }

    public function fields(): PowerGridFields
    {
        return PowerGrid::fields()
                ->add('asset_symbol')
                ->add('date')
                ->add('time')
                ->add('open')
                ->add('high')
                ->add('low')
                ->add('last_price')
                ->add('net_change', function (LiveFuture $quote) {
                    return Blade::render('pages/badges._badge_change', ['change' => $quote->net_change]);
                })
                ->add('pchange', function (LiveFuture $quote) {
                    return Blade::render('pages/badges._badge_pchange', ['pchange' => $quote->pchange]);
                })
                ->add('volume')
                ->add('oi')
                ->add('oi_change')
                ->add('oi_pchange', function (LiveFuture $quote) {
                    return Blade::render('pages/badges._badge_oi_pchange', ['oi_pchange' => $quote->oi_pchange]);
                })
                ->add('oi_sense', function (LiveFuture $quote) {
                    return Blade::render('pages/badges._badge_oi_sense', ['sense' => $quote->oi_sense]);
                });
    }

    public function columns(): array
    {
        return [
            Column::make('Asset', 'asset_symbol')->searchable(),
            Column::make('Date', 'date')
                ->sortable()
                ->searchable(),
            Column::make('Time', 'time')
                ->sortable(),
            Column::make('Open', 'open'),
            Column::make('High', 'high'),
            Column::make('Low', 'low'),
            Column::make('LTP', 'last_price'),
            Column::make('Change', 'net_change'),
            Column::make('% Change', 'pchange')->sortable(),
            Column::make('Volume', 'volume'),
            Column::make('OI', 'oi'),
            Column::make('Change', 'oi_change'),
            Column::make('% OI Change', 'oi_pchange')->sortable(),
            Column::make('OI Sense', 'oi_sense')->sortable()->searchable(),
        ];
    }

    public function filters(): array
    {
        return [
            /*Filter::select('asset_symbol')
            ->dataSource(LiveFuture::all())
            ->optionLabel('asset_symbol')
            ->optionValue('asset_symbol'),*/
        ];
    }

}

[marineusde]

I think I found the problem: you have to use the value of the attribute $tableName of your table-component-class in the dispatch:

$this->dispatch('pg:eventRefresh-futureDataTable');

you can set it up in your TableComponent:

public string $tableName = 'futureDataTable';

[jigapate]

Ok, i will check this on Monday, when it will run Live, will update with results.

[jigapate]

@marineusde , it's working fine, it refresh correctly at the given poll time, thank you.

[marineusde]

very good! :) please mark the answer as solved for other peoples