santigarcor / laravel-vuetable
Vuetable laravel backend package
Installs: 49 780
Dependents: 0
Suggesters: 0
Security: 0
Stars: 27
Watchers: 2
Forks: 6
Open Issues: 0
Requires
- php: >=7.2.5
- illuminate/database: ^5.7|^6.0|^7.0|^8.0
- illuminate/http: ^5.7|^6.0|^7.0|^8.0
- illuminate/support: ^5.7|^6.0|^7.0|^8.0
Requires (Dev)
- mockery/mockery: ^1.2.0
- orchestra/testbench: ^3.7|^6.0
- phpunit/phpunit: ^9.0
README
Laravel Vuetable is the backend component that can work with the Vuetable component.
The latest release requires PHP 7.2.5-7.4 and supports Laravel 5.7, 5.8, 6.* ,7.* and 8.*
Installation
-
Run the composer require command from your terminal:
composer require "santigarcor/laravel-vuetable"
-
If you laravel version not supported the package discovery, set in your
config/app.php
:-
In the providers array add:
Vuetable\VuetableServiceProvider::class,
-
In the aliases array add:
'Vuetable' => Vuetable\VuetableFacade::class,
-
Usage
Your request to the controller should have this data:
{ sort: '', // column_name|asc or column_name|desc page: 1, per_page: 10, searchable: [ // This array should have the names of the columns in the database ], filter: '' //The text that is going to be used to filter the data }
You can also specify the sorting order using the "order" attribute (required by https://mannyyang.github.io/vuetable-3/ ):
{ sort: '', // column_name order: '', // asc or desc }
So for example lets create the table for the users with their companies. Then in the javascript we should have:
data = { sort: 'users.name|asc', page: 1, per_page: 10, searchable: [ // This means the 'users.name', 'users.email' and 'companies.name' columns can be filtered through the 'filter' attribute in the data. 'users.name', 'users.email', 'companies.name', ] } axios.get('http://url.com/users-with-companies', data)
In Controller we can provide Eloquent:
class UsersDataController extends Controller { public function index() { $query = User::select([ 'users.id', 'users.name', 'users.email', 'companies.name as company', 'companies.company_id' ]) ->leftJoin('companies', 'users.company_id', '=', 'companies.id'); return Vuetable::of($query) ->editColumn('company', function ($user) { if ($user->company) { return $user->company; } return '-'; }) ->addColumn('urls', function ($user) { return [ 'edit' => route('users.edit', $user->id), 'delete' => route('users.destroy', $user->id), ]; }) ->make(); } }
Or Collection
class UsersDataController extends Controller { public function index() { $query = new Collection([ ['name' => 'John Doe', 'email' => 'john@mail.com'], ['name' => 'Jane Doe', 'email' => 'jane@mail.com'], ['name' => 'Test John', 'email' => 'test@mail.com'] ]); return Vuetable::of($query) ->editColumn('name', function ($user) { return Str::lower($user['name']); }) ->addColumn('urls', function ($user) { return [ 'edit' => route('users.edit', $user['id']), 'delete' => route('users.destroy', $user['id']), ]; }) ->make(); } }
This controller is going to return:
{ "current_page": 1, "from": 1, "to": 10, "total": 150, "per_page": 10, "last_page": 15, "first_page_url": "http://url.com/users-with-companies?page=1", "last_page_url": "http://url.com/users-with-companies?page=15", "next_page_url": "http://url.com/users-with-companies?page=2", "prev_page_url": null, "path": "http://url.com/users-with-companies", "data": [ { "id": 1, "name": "Administrator", "email": "administrator@app.com", "company": "-", "company_id": null, "urls": { "edit": "http://url.com//users/1/edit", "delete": "http://url.com//users/1" }, }, { "id": 2, "name": "Company Administrator", "email": "company_administrator@app.com", "company": "-", "company_id": null, "urls": { "edit": "http://url.com//users/2/edit", "delete": "http://url.com//users/2" }, ... } ], }
What does Laravel Vuetable support?
Using the Eloquent Builder you can:
- Filter/Sort by model columns.
- Make joins and filter/sort by them.
- Define the length of the pagination.
- Add columns.
- Edit columns (if the column has a cast defined, it doesn't work).
Using the Collection you can:
- Filter/Sort by model columns.
- Define the length of the pagination.
- Add columns.
- Edit columns.
License
Laravel Vuetable is open-sourced software licensed under the MIT license.
Contributing
Please report any issue you find in the issues page. Pull requests are more than welcome.