Skip to content

Instantly share code, notes, and snippets.

@yajra

yajra/DataTable.vue

Last active July 25, 2023 11:06
Show Gist options
  • Save yajra/ff9218f58fc2d1499e7ce3d356549d24 to your computer and use it in GitHub Desktop.
Save yajra/ff9218f58fc2d1499e7ce3d356549d24 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. yajra revised this gist Oct 17, 2018. 1 changed file with 12 additions and 25 deletions.
    37 changes: 12 additions & 25 deletions app.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,20 +1,7 @@

    /**
    * First we will load all of this project's JavaScript dependencies which
    * includes Vue and other libraries. It is a great starting point when
    * building robust, powerful web applications using Vue and Laravel.
    */

    require('./bootstrap');

    window.Vue = require('vue');

    /**
    * Next, we will create a fresh Vue application instance and attach it to
    * the page. Then, you may begin adding components to this application
    * or customize the JavaScript scaffolding to fit your unique needs.
    */

    Vue.component('data-table', require('./components/DataTable.vue'));

    const app = new Vue({
    @@ -27,18 +14,18 @@ const app = new Vue({
    {data: 'email'},
    {data: 'created_at'},
    {
    data: 'action',
    orderable: false,
    searchable: false,
    createdCell(cell, cellData, rowData) {
    let DeleteButton = Vue.extend(require('./components/DeleteButton'));
    let instance = new DeleteButton({
    propsData: rowData
    });
    instance.$mount();
    $(cell).empty().append(instance.$el);
    }
    },
    data: 'action',
    orderable: false,
    searchable: false,
    createdCell(cell, cellData, rowData) {
    let DeleteButton = Vue.extend(require('./components/DeleteButton'));
    let instance = new DeleteButton({
    propsData: rowData
    });
    instance.$mount();
    $(cell).empty().append(instance.$el);
    }
    },

    ]
    }
  2. yajra revised this gist Oct 17, 2018. 2 changed files with 30 additions and 0 deletions.
    16 changes: 16 additions & 0 deletions DeleteButton.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    <template>
    <button @click="deleteUser">
    <slot>Delete</slot>
    </button>
    </template>

    <script>
    export default{
    props: ['id', 'name'],
    methods: {
    deleteUser() {
    alert(`I am ${this.name}!`)
    }
    },
    }
    </script>
    14 changes: 14 additions & 0 deletions app.js
    View file
    Original file line number Diff line number Diff line change
    @@ -26,6 +26,20 @@ const app = new Vue({
    {data: 'name'},
    {data: 'email'},
    {data: 'created_at'},
    {
    data: 'action',
    orderable: false,
    searchable: false,
    createdCell(cell, cellData, rowData) {
    let DeleteButton = Vue.extend(require('./components/DeleteButton'));
    let instance = new DeleteButton({
    propsData: rowData
    });
    instance.$mount();
    $(cell).empty().append(instance.$el);
    }
    },

    ]
    }
    }
  3. yajra revised this gist Oct 17, 2018. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions DataTable.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -96,6 +96,9 @@
    },
    mounted() {
    this.dataTable = window.$(this.$el).DataTable(this.parameters);
    },
    destroyed() {
    this.dataTable.destroy();
    }
    }
    </script>
  4. yajra revised this gist Oct 17, 2018. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions DataTable.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -2,12 +2,12 @@
    <table>
    <thead>
    <tr>
    <th v-for="column in parameters.columns" v-html="title(column)" :key="column"></th>
    <th v-for="column in parameters.columns" v-html="title(column)"></th>
    </tr>
    </thead>
    <tfoot v-if="footer">
    <tr>
    <th v-for="column in parameters.columns" v-html="column.footer" :key="column"></th>
    <th v-for="column in parameters.columns" v-html="column.footer"></th>
    </tr>
    </tfoot>
    </table>
  5. yajra created this gist Mar 11, 2018.
    101 changes: 101 additions & 0 deletions DataTable.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,101 @@
    <template>
    <table>
    <thead>
    <tr>
    <th v-for="column in parameters.columns" v-html="title(column)" :key="column"></th>
    </tr>
    </thead>
    <tfoot v-if="footer">
    <tr>
    <th v-for="column in parameters.columns" v-html="column.footer" :key="column"></th>
    </tr>
    </tfoot>
    </table>
    </template>

    <script>
    window.$ = window.jQuery = require('jquery');
    require('datatables.net');
    require('datatables.net-bs');
    require('datatables.net-buttons');
    require('datatables.net-buttons-bs');
    export default{
    data() {
    return {
    dataTable: {},
    }
    },
    methods: {
    title(column) {
    return column.title || this.titleCase(column.data);
    },
    titleCase(str) {
    return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
    }
    },
    computed: {
    parameters() {
    const vm = this;
    return window.$.extend({
    serverSide: true,
    processing: true
    }, {
    ajax: this.ajax,
    columns: this.columns,
    createdRow(...args) {
    vm.$emit('created-row', ...args);
    },
    drawCallback(...args) {
    vm.$emit('draw', ...args);
    },
    footerCallback(...args) {
    vm.$emit('footer', ...args);
    },
    formatNumber(...args) {
    vm.$emit('format', ...args);
    },
    headerCallback(...args) {
    vm.$emit('header', ...args);
    },
    infoCallback(...args) {
    vm.$emit('info', ...args);
    },
    initComplete(...args) {
    vm.$emit('init', ...args);
    },
    preDrawCallback(...args) {
    vm.$emit('pre-draw', ...args);
    },
    rowCallback(...args) {
    vm.$emit('draw-row', ...args);
    },
    stateLoadCallback(...args) {
    vm.$emit('state-load', ...args);
    },
    stateLoaded(...args) {
    vm.$emit('state-loaded', ...args);
    },
    stateLoadParams(...args) {
    vm.$emit('state-load-params', ...args);
    },
    stateSaveCallback(...args) {
    vm.$emit('state-save', ...args);
    },
    stateSaveParams(...args) {
    vm.$emit('state-save-params', ...args);
    },
    }, this.options);
    }
    },
    props: {
    footer: { default: false },
    columns: { type: Array },
    ajax: { default: '' },
    options: { }
    },
    mounted() {
    this.dataTable = window.$(this.$el).DataTable(this.parameters);
    }
    }
    </script>
    32 changes: 32 additions & 0 deletions app.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,32 @@

    /**
    * First we will load all of this project's JavaScript dependencies which
    * includes Vue and other libraries. It is a great starting point when
    * building robust, powerful web applications using Vue and Laravel.
    */

    require('./bootstrap');

    window.Vue = require('vue');

    /**
    * Next, we will create a fresh Vue application instance and attach it to
    * the page. Then, you may begin adding components to this application
    * or customize the JavaScript scaffolding to fit your unique needs.
    */

    Vue.component('data-table', require('./components/DataTable.vue'));

    const app = new Vue({
    el: '#app',
    data() {
    return {
    columns: [
    {data: 'id'},
    {data: 'name'},
    {data: 'email'},
    {data: 'created_at'},
    ]
    }
    }
    });
    3 changes: 3 additions & 0 deletions template.blade.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    @section('contents')
    <data-table :columns="columns" class="table"></data-table>
    @endsection