vue-editortable

A Vue.js editable table component

• Load/Save Data from/to a database
• Create, Edit, Save, and Delete Data
• Show/Hide columns
• Keyboard Navigation & Shortcuts
• SWIPE Design for wide tables
• Simple Responsive Design with data attributes
• Configurable
• Multisorting
• Searchfilter
• dynamic Pagination
• Validation

Demo

• Vue-editortable Demo 1 - Vuetify Style
• Vue-editortable Demo 2 - Custom Dark Style
• The database connection is disabled on the demo pages.

Dependencies

Only Vue.js, no other frameworks/libraries

• Vue.js >= 2.0 (tested with 2.2.2)
• Vue-awesome Icons
• Axios
• validator

Browser compatibility

Only tested browser by now is Chrome. Feel free to test and share your results.

Installation

If you use Webpack/Browserify

npm

npm install --save vue-editortable

Import globally in an App:

import VueEditortable from "vue-editortable"
Vue.component('vue-editortable', VueEditortable)

Import locally in a component:

import VueEditortable from "vue-editortable"
// ...
components: {
    VueEditortable,
  }
// ...

Usage

<vue-editortable :data="{ columns, options }"></vue-editortable>

// ...
data() {
      return {
        columns: [
          {
            title: 'Id',
            name: 'id',
            editable: false,
          },
          {
            title: 'Firstname',
            name: 'firstname',
            editable: true,
          },
          {
            title: 'Lastname',
            name: 'lastname',
            editable: true,
          },
          {
            title: 'Email',
            name: 'email',
            editable: true,
          },
        ],
        options: {
          showSearchFilter: true,
          requests: {
            allUrl: 'http://api.dev/api/users',
          },
        },
      };
    },
// ...

Documentation

You will find a complete documentation here.

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

TODOs

Some major TODOs:

• error messages
• implementing Datatypes
• filter per columns
• optional Modal before deleting
• compatibility with CSS Frameworks (Bootstrap, Semantic, Foundation)
• search & replace
• edit multiple fields
• statistics

Contributions

All contributions are welcome!

License

MIT