Vue Datatable

Example of a custom datatable with blazing fast server-side processing for 100k records.

For more action visit laravel-enso.com and use admin@laravel-enso.com & password for login.

{{ props.row.project }}
    
vue-table class="box is-paddingless raises-on-hover is-rounded"
    path="/examples/table/init"
    :filters="filters"
    :intervals="intervals"
    @clicked="clicked"
    @excel="$toastr.info('You just pressed Excel', 'Event')"
    @create="$toastr.success('You just pressed Create', 'Event')"
    @edit="$toastr.warning('You just pressed Edit', 'Event')"
    @destroy="$toastr.error('You just pressed Delete', 'Event')"
    id="example"
    
        {{ props.row.project }}
    
vue-table
    
    
vue-filter class="box"
    :options="activeOptions"
    icons
    title="Active"
    v-model="filters.examples.is_active"
vue-filter
    
    
vue-select-filter class="box"
    title="Seniority"
    multiple
    :options="seniorityOptions"
    v-model="filters.examples.seniority"
vue-select-filter
    
    
date-interval-filter class="box"
    title="Hired Between"
    @update="
        intervals.examples.hired_at.min = $event.min;
        intervals.examples.hired_at.max = $event.max;
    "
date-interval-filter
    
    
interval-filter class="box"
    title="Salary"
    type="number"
    @update="
        intervals.examples.hired_at.min = $event.min;
        intervals.examples.hired_at.max = $event.max;
    "
interval-filter
    
    
import Vue from 'vue';
import axios from 'axios';
import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { faVuejs } from '@fortawesome/free-brands-svg-icons';
import { faCheck, faTimes } from '@fortawesome/free-solid-svg-icons';
import store from './store';
import VueTable from './components/enso/tables/VueTable.vue';
import VueFilter from './components/enso/bulma/VueFilter.vue';
import VueSelectFilter from './components/enso/select/VueSelectFilter.vue';
import IntervalFilter from './components/enso/bulma/IntervalFilter.vue';
import DateIntervalFilter from './components/enso/bulma/DateIntervalFilter.vue';
import Toastr from './components/enso/bulma/toastr';
import './modules/enso/directives/hljs';

import './modules/enso/mixins/errorHandler';

require('highlight.js/styles/atom-one-light.css');

library.add(faVuejs, faCheck, faTimes);

Vue.component('fa', FontAwesomeIcon);

Vue.use(Toastr, {
    position: 'right',
    duration: 3000,
    closeButton: true,
});

window.axios = axios;

new Vue({
    store,

    components: {
        VueTable, VueFilter, VueSelectFilter,
        IntervalFilter, DateIntervalFilter,
    },

    data() {
        return {
            activeOptions: [
                { value: true, label: 'check', class: 'has-text-success' },
                { value: false, label: 'times', class: 'has-text-danger' },
            ],
            seniorityOptions: [
                { id: 1, name: 'Assistant' },
                { id: 2, name: 'Associate' },
                { id: 3, name: 'Staff Member' },
                { id: 4, name: 'Senior' },
                { id: 5, name: 'Partner' },
            ],
            filters: {
                examples: {
                    is_active: null,
                    seniority: [],
                },
            },
            intervals: {
                examples: {
                    hired_at: {
                        min: null,
                        max: null,
                        dbDateFormat: 'Y-m-d',
                    },
                    salary: {
                        min: null,
                        max: null,
                    },
                },
            },
        };
    },

    methods: {
        clicked(column, row) {
            this.$toastr.info(`You just clicked "${row[column.name]}" on column "${column.name}"`, 'Click Event');
        },
    },
}).$mount('#app');
    
    
Route::namespace('Examples')
    ->prefix('examples')->as('examples.')
    ->group(function () {
        Route::view('table', 'examples.table')->name('table');

        Route::prefix('table')->as('table.')
            ->group(function () {
                Route::get('init', 'TableController@init')
                    ->name('init');
                Route::get('data', 'TableController@data')
                    ->name('data');
            });
    });
        
    
    
namespace LaravelEnso\Examples\app\Models;

use Illuminate\Database\Eloquent\Model;

class Example extends Model
{
    protected $casts = ['is_active' => 'boolean'];
}
    
    

namespace LaravelEnso\Examples\app\Http\Controllers;

use Illuminate\Routing\Controller;
use LaravelEnso\Tables\app\Traits\Datatable;
use Illuminate\Foundation\Bus\DispatchesJobs;
use LaravelEnso\Tables\app\Traits\ExcelExport;
use LaravelEnso\Examples\Tables\Builders\ExampleTable;

class TableController extends Controller
{
    use DispatchesJobs, Datatable, ExcelExport;

    protected $tableClass = ExampleTable::class;
}

    
    
namespace App\Http\Controllers\Examples\Tables\Builders;

use App\Example;
use LaravelEnso\Tables\app\Services\Table;

class ExampleTable extends Table
{
    protected $templatePath = __DIR__.'/../Templates/exampleTable.json';

    public function query()
    {
        return Example::selectRaw('
            id as "dtRowId", name, position, seniority, project,
            salary, taxes, is_active, hired_at
        ');
    }
}
    
    
{
    "routePrefix": "examples.table",
    "dataRouteSuffix": "data",
    "name": "Enso Vue Datatable Example",
    "icon": ["fab", "vuejs"],
    "crtNo": true,
    "buttons": [
        {
            "type": "global",
            "icon": "file-excel",
            "class": "is-outlined",
            "event": "excel",
            "label": "Excel"
        },
        {
            "type": "global",
            "icon": "plus",
            "class": "is-success",
            "event": "create",
            "label": "Create"
        },
        {
            "type": "row",
            "icon": "pencil-alt",
            "class": "is-warning",
            "event": "edit"
        },
        {
            "type": "row",
            "icon": "trash-alt",
            "class": "is-danger",
            "event": "destroy",
            "confirmation" : true,
            "message" : "This is your custom confirmation. Are you sure?"
        }
    ],
    "columns": [
        {
            "label": "Name",
            "name": "name",
            "data": "examples.name",
            "meta": [
                "searchable",
                "sortable"
            ]
        }, {
            "label": "Position",
            "name": "position",
            "data": "examples.position",
            "meta": [
                "searchable",
                "sortable",
                "clickable"
            ]
        }, {
            "label": "Seniority",
            "name": "seniority",
            "data": "examples.seniority",
            "enum": "App\\Http\\Controllers\\Examples\\SeniorityEnum",
            "meta": [
                "sortable"
            ]
        }, {
            "label": "Project",
            "name": "project",
            "data": "examples.project",
            "meta": [
                "searchable",
                "sortable",
                "render"
            ]
        }, {
            "label": "Salary",
            "name": "salary",
            "data": "examples.salary",
            "meta": [
                "searchable",
                "sortable",
                "total"
            ],
            "money": {}
        }, {
            "label": "Taxes",
            "name": "taxes",
            "data": "examples.taxes",
            "meta": [
                "searchable",
                "sortable",
                "total"
            ],
            "money": {}
        }, {
            "label": "Active",
            "name": "is_active",
            "data": "examples.is_active",
            "meta": [
                "boolean",
                "sortable"
            ]
        }, {
            "label": "Hired Since",
            "name": "hired_at",
            "data": "examples.hired_at",
            "meta": [
                "date",
                "sortable"
            ]
        }
    ]
}
    
    
namespace App\Enums\Examples;

use LaravelEnso\Helpers\app\Classes\Enum;

class SeniorityEnum extends Enum
{
    const Assistant = 1;
    const Associate = 2;
    const Staff = 3;
    const Senior = 4;
    const Partner = 5;
}