Examples
Table view examples
Error!
Success!
ID | Avatar | User | Active | Type | Created | |
---|---|---|---|---|---|---|
1 | belal ddx | daadadakk | Writer | 1 year ago | ||
2 | hello | 2132tytyiu | Admin | 1 year ago | ||
3 | cdcsdc | keykha asfd2 | Admin | 1 year ago | ||
4 | Just for testt adsf | test | Writer | 1 year ago | ||
5 | test123 | dwadwad | Admin | 1 year ago | ||
6 | sdsd | test@test.test | Admin | 1 year ago | ||
7 | tesdasda | javonte.kutch@example.comxfz | Writer | 1 year ago | ||
8 | Bande de iok | qcollier@example.uk | Admin | 1 year ago | ||
9 | Brycen Schade | celestinoprenner@example.net | Admin | 1 year ago | ||
10 | Mrs. Kassandra Stiedemann | griffin.aufderha00r@example.net | Admin | 1 year ago |
<?php
namespace App\Http\Livewire;
use App\Models\User;
use Illuminate\Database\Eloquent\Builder;
use LaravelViews\Facades\UI;
use LaravelViews\Views\TableView;
class UsersTableView extends TableView
{
protected $paginate = 10;
protected function repository()
{
return User::query();
}
/**
* Sets the headers of the table as you want to be displayed
*
* @return array<string> Array of headers
*/
public function headers(): array
{
return [
'ID',
'Avatar',
'User',
'Email',
'Active',
'Type',
'Created'
];
}
/**
* Sets the data to every cell of a single row
*
* @param $user Current model for each row
*/
public function row(User $user): array
{
return [
$user->id,
UI::avatar(asset('storage/' . $user->avatar)),
$user->name,
$user->email,
$user->active ? UI::icon('check', 'success') : '',
ucfirst($user->type),
$user->created_at->diffforHumans()
];
}
}
Error!
Success!
Avatar | Active | Type | ||||
---|---|---|---|---|---|---|
1 | belal ddx | daadadakk | Writer | 1 year ago | ||
2 | hello | 2132tytyiu | Admin | 1 year ago | ||
3 | cdcsdc | keykha asfd2 | Admin | 1 year ago | ||
4 | Just for testt adsf | test | Writer | 1 year ago | ||
5 | test123 | dwadwad | Admin | 1 year ago | ||
6 | sdsd | test@test.test | Admin | 1 year ago | ||
7 | tesdasda | javonte.kutch@example.comxfz | Writer | 1 year ago | ||
8 | Bande de iok | qcollier@example.uk | Admin | 1 year ago | ||
9 | Brycen Schade | celestinoprenner@example.net | Admin | 1 year ago | ||
10 | Mrs. Kassandra Stiedemann | griffin.aufderha00r@example.net | Admin | 1 year ago |
<?php
namespace App\Http\Livewire;
use DB;
use LaravelViews\Facades\Header;
class UsersWithSortColumnsTableView extends UsersTableView
{
/**
* Sets the headers of the table as you want to be displayed
*
* @return array<string> Array of headers
*/
public function headers(): array
{
return [
Header::title('ID')->sortBy('id'),
'Avatar',
Header::title('User')->sortBy('name'),
Header::title('Email')->sortBy('email'),
'Active',
'Type',
Header::title('Created')->sortBy('created_at')
];
}
}
Error!
Success!
Avatar | Active | Type | ||||
---|---|---|---|---|---|---|
1 | belal ddx | daadadakk | Writer | 1 year ago | ||
2 | hello | 2132tytyiu | Admin | 1 year ago | ||
3 | cdcsdc | keykha asfd2 | Admin | 1 year ago | ||
4 | Just for testt adsf | test | Writer | 1 year ago | ||
5 | test123 | dwadwad | Admin | 1 year ago | ||
6 | sdsd | test@test.test | Admin | 1 year ago | ||
7 | tesdasda | javonte.kutch@example.comxfz | Writer | 1 year ago | ||
8 | Bande de iok | qcollier@example.uk | Admin | 1 year ago | ||
9 | Brycen Schade | celestinoprenner@example.net | Admin | 1 year ago | ||
10 | Mrs. Kassandra Stiedemann | griffin.aufderha00r@example.net | Admin | 1 year ago |
<?php
namespace App\Http\Livewire;
use App\Filters\UsersActiveFilter;
use App\Filters\UsersCreatedAtFilter;
use App\Filters\UsersTypeFilter;
class UsersWithFiltersTableView extends UsersWithSortColumnsTableView
{
public $searchBy = ['name', 'email'];
protected function filters()
{
return [
new UsersActiveFilter,
new UsersTypeFilter,
new UsersCreatedAtFilter
];
}
}
Error!
Success!
Avatar | Active | Type | |||||
---|---|---|---|---|---|---|---|
1 | belal ddx | daadadakk | Writer | 1 year ago |
Change user as admin
Change user as writer
Activate / Deactivate
|
||
2 | hello | 2132tytyiu | Admin | 1 year ago |
Change user as admin
Change user as writer
Activate / Deactivate
|
||
3 | cdcsdc | keykha asfd2 | Admin | 1 year ago |
Change user as admin
Change user as writer
Activate / Deactivate
|
||
4 | Just for testt adsf | test | Writer | 1 year ago |
Change user as admin
Change user as writer
Activate / Deactivate
|
||
5 | test123 | dwadwad | Admin | 1 year ago |
Change user as admin
Change user as writer
Activate / Deactivate
|
||
6 | sdsd | test@test.test | Admin | 1 year ago |
Change user as admin
Change user as writer
Activate / Deactivate
|
||
7 | tesdasda | javonte.kutch@example.comxfz | Writer | 1 year ago |
Change user as admin
Change user as writer
Activate / Deactivate
|
||
8 | Bande de iok | qcollier@example.uk | Admin | 1 year ago |
Change user as admin
Change user as writer
Activate / Deactivate
|
||
9 | Brycen Schade | celestinoprenner@example.net | Admin | 1 year ago |
Change user as admin
Change user as writer
Activate / Deactivate
|
||
10 | Mrs. Kassandra Stiedemann | griffin.aufderha00r@example.net | Admin | 1 year ago |
Change user as admin
Change user as writer
Activate / Deactivate
|
<?php
namespace App\Http\Livewire;
use App\Actions\ChangeUserAsAdmin;
use App\Actions\ChangeUserAsWriter;
use App\Actions\ToggleUserAction;
class UsersWithActions extends UsersWithFiltersTableView
{
protected function actionsByRow()
{
return [
new ChangeUserAsAdmin,
new ChangeUserAsWriter,
new ToggleUserAction,
];
}
}
Error!
Success!
Avatar | Active | Type | ||||||
---|---|---|---|---|---|---|---|---|
1 | belal ddx | daadadakk | Writer | 1 year ago |
Change user as admin
Change user as writer
Activate / Deactivate
|
|||
2 | hello | 2132tytyiu | Admin | 1 year ago |
Change user as admin
Change user as writer
Activate / Deactivate
|
|||
3 | cdcsdc | keykha asfd2 | Admin | 1 year ago |
Change user as admin
Change user as writer
Activate / Deactivate
|
|||
4 | Just for testt adsf | test | Writer | 1 year ago |
Change user as admin
Change user as writer
Activate / Deactivate
|
|||
5 | test123 | dwadwad | Admin | 1 year ago |
Change user as admin
Change user as writer
Activate / Deactivate
|
|||
6 | sdsd | test@test.test | Admin | 1 year ago |
Change user as admin
Change user as writer
Activate / Deactivate
|
|||
7 | tesdasda | javonte.kutch@example.comxfz | Writer | 1 year ago |
Change user as admin
Change user as writer
Activate / Deactivate
|
|||
8 | Bande de iok | qcollier@example.uk | Admin | 1 year ago |
Change user as admin
Change user as writer
Activate / Deactivate
|
|||
9 | Brycen Schade | celestinoprenner@example.net | Admin | 1 year ago |
Change user as admin
Change user as writer
Activate / Deactivate
|
|||
10 | Mrs. Kassandra Stiedemann | griffin.aufderha00r@example.net | Admin | 1 year ago |
Change user as admin
Change user as writer
Activate / Deactivate
|
<?php
namespace App\Http\Livewire;
use App\Actions\Bulk\ChangeUsersAsAdmin;
use App\Actions\Bulk\ChangeUsersAsWriter;
class UsersWithBulkActions extends UsersWithActions
{
protected function bulkActions()
{
return [
new ChangeUsersAsWriter,
new ChangeUsersAsAdmin
];
}
}
Error!
Success!
Avatar | Active | Type | ||||||
---|---|---|---|---|---|---|---|---|
1 |
{$refs.input.focus()})"
x-html="value"
class='transition-all duration-300 ease-in-out px-2 py-1 rounded cursor-pointer focus:outline-none hover:bg-white hover:border-gray-500 border border-transparent'>
belal ddx
|
{$refs.input.focus()})"
x-html="value"
class='transition-all duration-300 ease-in-out px-2 py-1 rounded cursor-pointer focus:outline-none hover:bg-white hover:border-gray-500 border border-transparent'>
daadadakk
|
Writer | 1 year ago |
Change user as admin
Change user as writer
Activate / Deactivate
|
|||
2 |
{$refs.input.focus()})"
x-html="value"
class='transition-all duration-300 ease-in-out px-2 py-1 rounded cursor-pointer focus:outline-none hover:bg-white hover:border-gray-500 border border-transparent'>
hello
|
{$refs.input.focus()})"
x-html="value"
class='transition-all duration-300 ease-in-out px-2 py-1 rounded cursor-pointer focus:outline-none hover:bg-white hover:border-gray-500 border border-transparent'>
2132tytyiu
|
Admin | 1 year ago |
Change user as admin
Change user as writer
Activate / Deactivate
|
|||
3 |
{$refs.input.focus()})"
x-html="value"
class='transition-all duration-300 ease-in-out px-2 py-1 rounded cursor-pointer focus:outline-none hover:bg-white hover:border-gray-500 border border-transparent'>
cdcsdc
|
{$refs.input.focus()})"
x-html="value"
class='transition-all duration-300 ease-in-out px-2 py-1 rounded cursor-pointer focus:outline-none hover:bg-white hover:border-gray-500 border border-transparent'>
keykha asfd2
|
Admin | 1 year ago |
Change user as admin
Change user as writer
Activate / Deactivate
|
|||
4 |
{$refs.input.focus()})"
x-html="value"
class='transition-all duration-300 ease-in-out px-2 py-1 rounded cursor-pointer focus:outline-none hover:bg-white hover:border-gray-500 border border-transparent'>
Just for testt adsf
|
{$refs.input.focus()})"
x-html="value"
class='transition-all duration-300 ease-in-out px-2 py-1 rounded cursor-pointer focus:outline-none hover:bg-white hover:border-gray-500 border border-transparent'>
test
|
Writer | 1 year ago |
Change user as admin
Change user as writer
Activate / Deactivate
|
|||
5 |
{$refs.input.focus()})"
x-html="value"
class='transition-all duration-300 ease-in-out px-2 py-1 rounded cursor-pointer focus:outline-none hover:bg-white hover:border-gray-500 border border-transparent'>
test123
|
{$refs.input.focus()})"
x-html="value"
class='transition-all duration-300 ease-in-out px-2 py-1 rounded cursor-pointer focus:outline-none hover:bg-white hover:border-gray-500 border border-transparent'>
dwadwad
|
Admin | 1 year ago |
Change user as admin
Change user as writer
Activate / Deactivate
|
|||
6 |
{$refs.input.focus()})"
x-html="value"
class='transition-all duration-300 ease-in-out px-2 py-1 rounded cursor-pointer focus:outline-none hover:bg-white hover:border-gray-500 border border-transparent'>
sdsd
|
{$refs.input.focus()})"
x-html="value"
class='transition-all duration-300 ease-in-out px-2 py-1 rounded cursor-pointer focus:outline-none hover:bg-white hover:border-gray-500 border border-transparent'>
test@test.test
|
Admin | 1 year ago |
Change user as admin
Change user as writer
Activate / Deactivate
|
|||
7 |
{$refs.input.focus()})"
x-html="value"
class='transition-all duration-300 ease-in-out px-2 py-1 rounded cursor-pointer focus:outline-none hover:bg-white hover:border-gray-500 border border-transparent'>
tesdasda
|
{$refs.input.focus()})"
x-html="value"
class='transition-all duration-300 ease-in-out px-2 py-1 rounded cursor-pointer focus:outline-none hover:bg-white hover:border-gray-500 border border-transparent'>
javonte.kutch@example.comxfz
|
Writer | 1 year ago |
Change user as admin
Change user as writer
Activate / Deactivate
|
|||
8 |
{$refs.input.focus()})"
x-html="value"
class='transition-all duration-300 ease-in-out px-2 py-1 rounded cursor-pointer focus:outline-none hover:bg-white hover:border-gray-500 border border-transparent'>
Bande de iok
|
{$refs.input.focus()})"
x-html="value"
class='transition-all duration-300 ease-in-out px-2 py-1 rounded cursor-pointer focus:outline-none hover:bg-white hover:border-gray-500 border border-transparent'>
qcollier@example.uk
|
Admin | 1 year ago |
Change user as admin
Change user as writer
Activate / Deactivate
|
|||
9 |
{$refs.input.focus()})"
x-html="value"
class='transition-all duration-300 ease-in-out px-2 py-1 rounded cursor-pointer focus:outline-none hover:bg-white hover:border-gray-500 border border-transparent'>
Brycen Schade
|
{$refs.input.focus()})"
x-html="value"
class='transition-all duration-300 ease-in-out px-2 py-1 rounded cursor-pointer focus:outline-none hover:bg-white hover:border-gray-500 border border-transparent'>
celestinoprenner@example.net
|
Admin | 1 year ago |
Change user as admin
Change user as writer
Activate / Deactivate
|
|||
10 |
{$refs.input.focus()})"
x-html="value"
class='transition-all duration-300 ease-in-out px-2 py-1 rounded cursor-pointer focus:outline-none hover:bg-white hover:border-gray-500 border border-transparent'>
Mrs. Kassandra Stiedemann
|
{$refs.input.focus()})"
x-html="value"
class='transition-all duration-300 ease-in-out px-2 py-1 rounded cursor-pointer focus:outline-none hover:bg-white hover:border-gray-500 border border-transparent'>
griffin.aufderha00r@example.net
|
Admin | 1 year ago |
Change user as admin
Change user as writer
Activate / Deactivate
|
<?php
namespace App\Http\Livewire\TableView;
use App\Http\Livewire\UsersWithBulkActions;
use App\Models\User;
use LaravelViews\Facades\UI;
use LaravelViews\Views\Traits\WithAlerts;
class UsersWithInlineEditing extends UsersWithBulkActions
{
use WithAlerts;
/**
* Sets the data to every cell of a single row
*
* @param $user Current model for each row
*/
public function row(User $user): array
{
return [
$user->id,
UI::avatar(asset('storage/' . $user->avatar)),
UI::editable($user, 'name'),
UI::editable($user, 'email'),
$user->active ? UI::icon('check', 'success') : '',
ucfirst($user->type),
$user->created_at->diffforHumans()
];
}
/**
* Method fired by the `editable` component, it
* gets the model instance and a key value array
* with the modified
*/
public function update(User $user, $data)
{
$user->update(collect($data)->map(function ($value) {
return strip_tags($value);
})->toArray());
$this->success();
}
}