Inertable
🍟 A headless datatable with inertiajs
INSTALATION
composer require rizkhal/inertable
USAGE
php artisan make:inertable UserTable
<?php
declare(strict_types=1);
namespace App\Inertable;
use App\Models\User;
use Rizkhal\Inertable\Column;
use Illuminate\Support\Carbon;
use Rizkhal\Inertable\Inertable;
use Illuminate\Database\Eloquent\Builder;
class UserTable extends Inertable
{
public function query(): Builder
{
return User::query();
}
public function columns(): array
{
return [
Column::checkbox(),
Column::make(__('Name'), 'name')->sortable()->searchable(),
Column::make(__('Email'), 'email')->sortable()->searchable(),
Column::make(__('Verified'), 'email_verified_at')->sortable()->searchable()->format(fn (Carbon $value): string => $value->format('d/m/Y')),
Column::make(__('status'), 'status')->sortable()->searchable(),
Column::action(),
];
}
}
Add hidden response
protected $hiddens = [
'office'
];
The response will include office object in response to inertable props.
Hidden response also accept relatoin, for example if you have HasMany relation from user to posts
protected $hiddens = [
'user.posts'
];
That's will return hidden user posts inside inertable props.
Usage inside controller
You can use this with reactjs, svelte or vue with inertajs
public function __invoke() {
return inertia('/path/to/file.{vue|jsx|svelte}')->inertable(new UserTable());
}
Response example
Click view
{
"columns": [
{
"na": false,
"blank": false,
"sortable": true,
"searchable": true,
"checkbox": false,
"sortCallback": null,
"searchCallback": null,
"formatCallback": null,
"text": "name",
"column": "name"
},
{
"na": false,
"blank": false,
"sortable": true,
"searchable": true,
"checkbox": false,
"sortCallback": null,
"searchCallback": null,
"formatCallback": null,
"text": "email",
"column": "email"
},
{
"na": false,
"blank": false,
"sortable": true,
"searchable": false,
"checkbox": false,
"sortCallback": null,
"searchCallback": null,
"formatCallback": {},
"text": "email_verified_at",
"column": "email_verified_at"
},
{
"na": false,
"blank": false,
"sortable": true,
"searchable": false,
"checkbox": false,
"sortCallback": null,
"searchCallback": null,
"formatCallback": {},
"text": "created_at",
"column": "created_at"
}
],
"data": {
"current_page": 1,
"data": [
{
"id": 1,
"name": "Robbie Abernathy",
"email": "[email protected]",
"email_verified_at": "18/10/2022",
"created_at": "18/10/2022"
},
{
"id": 2,
"name": "Alfredo Langworth",
"email": "[email protected]",
"email_verified_at": "18/10/2022",
"created_at": "18/10/2022"
},
{
"id": 3,
"name": "Deron Carroll",
"email": "[email protected]",
"email_verified_at": "18/10/2022",
"created_at": "18/10/2022"
},
{
"id": 4,
"name": "Mr. Geoffrey Ritchie Sr.",
"email": "[email protected]",
"email_verified_at": "18/10/2022",
"created_at": "18/10/2022"
},
{
"id": 5,
"name": "Miss Beth Kirlin IV",
"email": "[email protected]",
"email_verified_at": "18/10/2022",
"created_at": "18/10/2022"
},
{
"id": 6,
"name": "Davon Huel MD",
"email": "[email protected]",
"email_verified_at": "18/10/2022",
"created_at": "18/10/2022"
},
{
"id": 7,
"name": "Colleen Welch",
"email": "[email protected]",
"email_verified_at": "18/10/2022",
"created_at": "18/10/2022"
},
{
"id": 8,
"name": "Alvah Crona",
"email": "[email protected]",
"email_verified_at": "18/10/2022",
"created_at": "18/10/2022"
},
{
"id": 9,
"name": "Verlie Streich",
"email": "[email protected]",
"email_verified_at": "18/10/2022",
"created_at": "18/10/2022"
},
{
"id": 10,
"name": "Ms. Kristy Yost",
"email": "[email protected]",
"email_verified_at": "18/10/2022",
"created_at": "18/10/2022"
},
{
"id": 11,
"name": "Jazmyn Blick",
"email": "[email protected]",
"email_verified_at": "18/10/2022",
"created_at": "18/10/2022"
},
{
"id": 12,
"name": "Dr. Hyman Hauck",
"email": "[email protected]",
"email_verified_at": "18/10/2022",
"created_at": "18/10/2022"
},
{
"id": 13,
"name": "Miss Heather Ernser DDS",
"email": "[email protected]",
"email_verified_at": "18/10/2022",
"created_at": "18/10/2022"
},
{
"id": 14,
"name": "Jovan Kiehn Jr.",
"email": "[email protected]",
"email_verified_at": "18/10/2022",
"created_at": "18/10/2022"
},
{
"id": 15,
"name": "Mr. Florencio Huel",
"email": "[email protected]",
"email_verified_at": "18/10/2022",
"created_at": "18/10/2022"
}
],
"first_page_url": "http://example.test/users?page=1",
"from": 1,
"last_page": 134,
"last_page_url": "http://example.test/users?page=134",
"links": [
{
"url": null,
"label": "« Previous",
"active": false
},
{
"url": "http://example.test/users?page=1",
"label": "1",
"active": true
},
{
"url": "http://example.test/users?page=2",
"label": "2",
"active": false
},
{
"url": "http://example.test/users?page=3",
"label": "3",
"active": false
},
{
"url": "http://example.test/users?page=4",
"label": "4",
"active": false
},
{
"url": "http://example.test/users?page=5",
"label": "5",
"active": false
},
{
"url": "http://example.test/users?page=6",
"label": "6",
"active": false
},
{
"url": "http://example.test/users?page=7",
"label": "7",
"active": false
},
{
"url": "http://example.test/users?page=8",
"label": "8",
"active": false
},
{
"url": "http://example.test/users?page=9",
"label": "9",
"active": false
},
{
"url": "http://example.test/users?page=10",
"label": "10",
"active": false
},
{
"url": null,
"label": "...",
"active": false
},
{
"url": "http://example.test/users?page=133",
"label": "133",
"active": false
},
{
"url": "http://example.test/users?page=134",
"label": "134",
"active": false
},
{
"url": "http://example.test/users?page=2",
"label": "Next »",
"active": false
}
],
"next_page_url": "http://example.test/users?page=2",
"path": "http://example.test/users",
"per_page": 15,
"prev_page_url": null,
"to": 15,
"total": 2000
},
"filters": {
"column": null,
"search": null,
"direction": null,
"filters": null,
"perpage": null
}
}
Top categories
Need a Svelte website built?
Hire a professional Svelte developer today.