sagaryonjan/vue-datatable

Bootstrap Table with vue js.

Laravel Vue Js Datatable.

The sagaryonjan/vue-datatable package provides easy to create table with vue js. It makes easy to customize your table., _(*1)

Installation

You can install the package via composer:, _(*2)

``` bash composer require sagaryonjan/vue-datatable, <sub>(*3)</sub>

You can publish the migration with:
```bash
php artisan vendor:publish --tag="vue-datatable"

Register Vue-datable in resources app.js ``` bash Vue.component('data-table', require('./components/datatable/DataTable.vue'));, <sub>(*4)</sub>

Create Datatable Controller.
``` bash
php artisan datatable:controller CategoryController App\Model\Category

View Table ``` bash renderDatable($data), <sub>(*5)</sub>

Pagination Limit
``` bash
 public $pagination = 20;

Show Quick Search default false ``` bash protected $quick_search = true;, <sub>(*6)</sub>

Display column
``` bash
  public $displayColumn = [
        'name',
        'email',
        'full_name',
        'profession',
        'status',
        'action',
    ];

Rename Column ``` bash public $displayColumn = [ 'name' => 'Name', 'email' => 'Email', 'full_name' => 'Full Name', 'profession' => 'Profession', 'status' => 'Status', 'action' => 'Action', ];, <sub>(*7)</sub>

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 

``` bash
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, <sub>(*8)</sub>

``` bash public function query() {, <sub>(*9)</sub>

    $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
``` bash
  public $quick_search_filter = ['users.name', 'users.email'];

Adding Action Column, <sub>(*10)</sub>

``` bash public function addColumn() {, <sub>(*11)</sub>

    $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']
            ]
        ],
    ];
}

```, <sub>(*12)</sub>

License

The MIT License (MIT). Please see License File for more information., <sub>(*13)</sub>