https://github.com/rizkhal/inertable
🍟 A headless datatable with inertiajs
https://github.com/rizkhal/inertable
datatable inertiajs laravel php react serverside svelte vue
Last synced: 4 months ago
JSON representation
🍟 A headless datatable with inertiajs
- Host: GitHub
- URL: https://github.com/rizkhal/inertable
- Owner: rizkhal
- License: mit
- Created: 2022-02-19T10:43:06.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-09-08T08:24:13.000Z (almost 2 years ago)
- Last Synced: 2025-05-19T13:14:16.773Z (about 1 year ago)
- Topics: datatable, inertiajs, laravel, php, react, serverside, svelte, vue
- Language: PHP
- Homepage:
- Size: 436 KB
- Stars: 13
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
## INSTALATION
```bash
composer require rizkhal/inertable
```
## USAGE
```bash
php artisan make:inertable UserTable
```
```php
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
```php
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
```php
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
```php
public function __invoke() {
return inertia('/path/to/file.{vue|jsx|svelte}')->inertable(new UserTable());
}
```
Response example
Click view
```json
{
"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": "nyundt@example.com",
"email_verified_at": "18/10/2022",
"created_at": "18/10/2022"
},
{
"id": 2,
"name": "Alfredo Langworth",
"email": "sofia.krajcik@example.com",
"email_verified_at": "18/10/2022",
"created_at": "18/10/2022"
},
{
"id": 3,
"name": "Deron Carroll",
"email": "considine.jevon@example.net",
"email_verified_at": "18/10/2022",
"created_at": "18/10/2022"
},
{
"id": 4,
"name": "Mr. Geoffrey Ritchie Sr.",
"email": "baumbach.alysha@example.net",
"email_verified_at": "18/10/2022",
"created_at": "18/10/2022"
},
{
"id": 5,
"name": "Miss Beth Kirlin IV",
"email": "mauricio.abernathy@example.net",
"email_verified_at": "18/10/2022",
"created_at": "18/10/2022"
},
{
"id": 6,
"name": "Davon Huel MD",
"email": "orland78@example.net",
"email_verified_at": "18/10/2022",
"created_at": "18/10/2022"
},
{
"id": 7,
"name": "Colleen Welch",
"email": "mertz.chad@example.com",
"email_verified_at": "18/10/2022",
"created_at": "18/10/2022"
},
{
"id": 8,
"name": "Alvah Crona",
"email": "albert78@example.org",
"email_verified_at": "18/10/2022",
"created_at": "18/10/2022"
},
{
"id": 9,
"name": "Verlie Streich",
"email": "lubowitz.mckayla@example.com",
"email_verified_at": "18/10/2022",
"created_at": "18/10/2022"
},
{
"id": 10,
"name": "Ms. Kristy Yost",
"email": "sauer.justina@example.org",
"email_verified_at": "18/10/2022",
"created_at": "18/10/2022"
},
{
"id": 11,
"name": "Jazmyn Blick",
"email": "corkery.nella@example.net",
"email_verified_at": "18/10/2022",
"created_at": "18/10/2022"
},
{
"id": 12,
"name": "Dr. Hyman Hauck",
"email": "tvonrueden@example.net",
"email_verified_at": "18/10/2022",
"created_at": "18/10/2022"
},
{
"id": 13,
"name": "Miss Heather Ernser DDS",
"email": "kozey.dana@example.com",
"email_verified_at": "18/10/2022",
"created_at": "18/10/2022"
},
{
"id": 14,
"name": "Jovan Kiehn Jr.",
"email": "bette.barton@example.org",
"email_verified_at": "18/10/2022",
"created_at": "18/10/2022"
},
{
"id": 15,
"name": "Mr. Florencio Huel",
"email": "greynolds@example.com",
"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
}
}
```