Need help with vue-datatable?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

galenyuan
126 Stars 35 Forks MIT License 21 Commits 6 Opened issues

Description

[DEPRECATED] Datatable component for Vuejs

Services available

!
?

Need anything else?

Contributors list

No Data

vue-datatable

A datatable component build with Vuejs.

You can try it Online, it's Vue version DataTables

Usage

npm install --save vue-datatable

Vue-loader and Babel is required(maybe will release ES5 and JavaScript file later :P)

import DataTable from 'vue-datatable';

export default { data() { return { tableData: { options: { // Global sort option sortable: true, // Global edit option editable: true, // How many items will be shown in each page pageCount: 10, // Callback of change page onPageChanged(page) { console.log(page); } },

    columns: [
      {
        value: 'id',
        text: 'ID',
        // If this column is sortable
        sortable: true,
        // If this column is editable
        editable: false,
        // Render this column as HTML or not
        isHTML: false,
        // Render this column as button array or not
        isButton: false
      },
      {
        value: 'html',
        text: 'HTML',
        sortable: false,
        editable: false,
        isHTML: true,
        isButton: false
      },
      {
        value: 'button',
        text: 'Button',
        sortable: false,
        editable: false,
        isHTML: false,
        isButton: true
      }
    ],

    rows: [
        {
            id: {
                value: 1,
                // If this field is editable
                editable: false
            },
            html: {
                value: '<a href="https://www.github.com">'GitHub</a>
            },
            button: {
                value: [
                    // Text of this button
                    text: 'Button',
                    // Classes of this button
                    class: ['button'],
                    // Click function, 3 arguments: event, column text and current field object
                    func: function(event, column, field) {

                    }
                ]
            }
        }
    ]
  }
}

},

components: { DataTable } }

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.