sagaryonjan / vue-datatable
Bootstrap Table with vue js.
1.0.3
2018-04-01 18:21 UTC
Requires
- php: >=7.1.3
- illuminate/support: ~5.6
This package is not auto-updated.
Last update: 2025-03-31 16:32:44 UTC
README
The sagaryonjan/vue-datatable
package provides easy to create table with vue js. It makes easy to customize your table.
Installation
You can install the package via composer:
composer require sagaryonjan/vue-datatable
You can publish the migration with:
php artisan vendor:publish --tag="vue-datatable"
Register Vue-datable in resources app.js
Vue.component('data-table', require('./components/datatable/DataTable.vue'));
Create Datatable Controller.
php artisan datatable:controller CategoryController App\Model\Category
View Table
renderDatable($data)
Pagination Limit
public $pagination = 20;
Show Quick Search default false
protected $quick_search = true;
Display column
public $displayColumn = [ 'name', 'email', 'full_name', 'profession', 'status', 'action', ];
Rename Column
public $displayColumn = [ 'name' => 'Name', 'email' => 'Email', 'full_name' => 'Full Name', 'profession' => 'Profession', 'status' => 'Status', 'action' => 'Action', ];
Customizing Table Let status field be boolean if you want to show your status active or inactive instead of boolean add this function to your datatable controller
public function status($value) { if($value->status == 1) return "<span class='label label-info'>Active</span>"; else return "<span class='label label-warning'>Warning</span>"; }
Using join
public function query() { $this->query = $this->builder ->select( 'users.name', 'users.email', 'users.status', 'user_details.full_name', 'user_details.profession' ) ->leftjoin( 'user_details', 'user_details.user_id', '=', 'users.id' ); }
Quick Search filter for join
public $quick_search_filter = ['users.name', 'users.email'];
Adding Action Column
public function addColumn() { $this->add_column = [ "action" =>[ 'edit' => [ "a" =>[ 'href' => [ 'route' => 'admin.user.edit', 'param' => ['id'] ], 'title' => 'Edit', 'class' => 'hero starter massive', 'id' => 'stranger-{id}', 'data-attr' => 'mistake-{id}' ], "i" => [ 'class' => 'glyphicon glyphicon-edit'], ], 'delete' => [ "a" =>[ 'href' => [ 'route' => 'admin.user.delete', 'param' => ['id'] ], 'title' => 'Edit', 'class' => 'hero starter massive', 'id' => 'stranger-{id}-{slug}', 'data-attr' => 'mistake-{id}' ], "i" => [ 'class' => 'glyphicon glyphicon-trash'] ] ], ]; }
License
The MIT License (MIT). Please see License File for more information.