vue-datatables

A Vue component for DataTables.

import Vue from 'vue';
import $ from 'jquery';
require('datatables.net-bs')(window, $);
import configureDataTables from './configureDataTables';
import {DataTable, DataTableMixin} from 'vue-datatables';

configureDataTables($);

Vue.component('v-datatable', DataTable);

new Vue({
    mixins: [DataTableMixin],

    el: 'body',

    data: {
        columns: [
            {name: 'name', data: 'name', title: 'Name'},
            {name: 'email', data: 'email', title: 'Email'},
            {name: 'created_at', data: 'created_at', title: 'Created', callback: 'createdAt'},
            '__actions'
        ],

        itemActions: [
            {name: 'edit', icon: 'glyphicon glyphicon-pencil', class: 'btn btn-primary btn-xs'},
            {name: 'delete', title: 'Delete', icon: 'glyphicon glyphicon-trash', class: 'btn btn-danger btn-xs'}
        ]
    },

    events: {
        'vue-datatables:ready': function () {
            const btn = $('<button>', {text: 'Add New', type: 'button', class: 'btn btn-default btn-sm'});

            btn.on('click', () => this.addAction());

            $('.dataTables-add-action').append(btn);
        }
    },

    methods: {
        addAction() {
            console.log('add clicked');
        },

        createdAt(data) {
            return `[${data}]`;
        },

        editAction(row, index) {
            console.log('edit', row, index);
        },

        deleteAction(row, index) {
            this.refreshDataTable();
            // this.$broadcast('vue-datatable:refresh');
        }
    }
});

configureDataTables.js

import $ from 'jquery';

export default function () {
    $.extend(true, $.fn.dataTable.defaults, {
        dom: `
            <'row'<'col-sm-6 dataTables-add-action'><'col-sm-6 dataTables-length-filter'lf>>
            <'row'<'col-sm-12'tr>>
            <'row'<'col-sm-5'i><'col-sm-7'p>>
        `,
        renderer: 'bootstrap'
    });
}

.dataTables-length-filter {
    text-align: right;
}

.dataTables_length, .dataTables_filter {
    display: inline-block;
}