Important

Due to lack of time this project is on hold.

Support on Beerpay

Hey dude! Help me out for a couple of 🍻!

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

• Demo Pages are temporarely offline

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