Workflow
Auto Refresh
PLEASE WAIT: This page refreshes every 10 seconds.

This example demonstrates how to automatically reload the table at regular time interval.

The PowerGrid Table is displayed within the TableRefresher component's View

Learn more about the Auto-Refresh feature in our documentation.

Last Update: 03/07/2024 10:36:30 UTC
Index
ID
Name
Balance
Last Seen
1
29
Luan
R$ 241,86
9 minutes ago
2
57
Daniel
R$ 166,51
23 minutes from now
3
93
Claudio
R$ 219,01
18 minutes from now
4
104
Vitor
R$ 44,28
1 hour from now
Disclaimer: Table data is randomly generated for illustrative purposes only. The information here is not a reflection of the actual market and does not constitute business, financial, or medical advice.
<?php
 
namespace App\Livewire\Examples\AutoRefreshTable;
 
use Illuminate\Support\Carbon;
use Illuminate\Support\Collection;
use Illuminate\Support\Number;
use PowerComponents\LivewirePowerGrid\Column;
use PowerComponents\LivewirePowerGrid\Footer;
use PowerComponents\LivewirePowerGrid\Header;
use PowerComponents\LivewirePowerGrid\PowerGrid;
use PowerComponents\LivewirePowerGrid\PowerGridComponent;
use PowerComponents\LivewirePowerGrid\PowerGridFields;
 
final class AutoRefreshTable extends PowerGridComponent
{
public string $tableName = 'dishTable';
 
public function setUp(): array
{
return [
Header::make()
->withoutLoading()
->includeViewOnTop('components.header.last-update'),
 
Footer::make()
->showPerPage()
->showRecordCount(),
];
}
 
public function datasource(): Collection
{
return collect([
[
'id' => 29,
'name' => 'Luan',
'balance' => 241.86,
'last_seen' => $this->_fakeLastSeen(),
],
[
'id' => 57,
'name' => 'Daniel',
'balance' => 166.51,
'last_seen' => $this->_fakeLastSeen(),
],
[
'id' => 93,
'name' => 'Claudio',
'balance' => 219.01,
'last_seen' => $this->_fakeLastSeen(),
],
[
'id' => 104,
'name' => 'Vitor',
'balance' => 44.28,
'last_seen' => $this->_fakeLastSeen(),
],
]);
}
 
public function fields(): PowerGridFields
{
return PowerGrid::fields()
->add('id')
->add('name')
->add('last_seen')
->add('balance', fn ($item) => Number::currency($item->balance, in: 'BRL', locale: 'pt-BR'));
}
 
public function columns(): array
{
return [
Column::make('Index', 'id')->index(),
 
Column::make('ID', 'id'),
 
Column::add()
->title('Name')
->field('name')
->searchable()
->sortable(),
 
Column::add()
->title('Balance')
->field('balance')
->sortable(),
 
Column::add()
->title('Last Seen')
->field('last_seen'),
];
}
 
// 😎 Populate the table with fake data
public function _fakeLastSeen(): string
{
return Carbon::parse(fake()->dateTimeBetween('-1 hour', '+2 hours'))->diffForHumans();
}
}
Code highlighting provided by Torchlight.dev

Here you can find all relevant packages installed on this demo.

Name
Version
Description
laravel/framework
v11
The Laravel Framework.
livewire/livewire
v3.5.0
A front-end framework for Laravel.
openspout/openspout
v4.24.1
PHP Library to read and write spreadsheet files (CSV, XLSX and ODS), in a fast and scalable way
power-components/livewire-powergrid
5.x-dev
PowerGrid generates Advanced Datatables using Laravel Livewire.