项目作者: el-jacko

项目描述 :
A Vue.js editable table component
高级语言: Vue
项目地址: git://github.com/el-jacko/vue-editortable.git
创建时间: 2017-03-03T13:24:18Z
项目社区:https://github.com/el-jacko/vue-editortable

开源协议:MIT License

下载


Important

Due to lack of time this project is on hold.

Support on Beerpay

Hey dude! Help me out for a couple of :beers:!

Beerpay Beerpay

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

  1. npm install --save vue-editortable

Import globally in an App:

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

Import locally in a component:

  1. import VueEditortable from "vue-editortable"
  2. // ...
  3. components: {
  4. VueEditortable,
  5. }
  6. // ...

Usage

  1. <vue-editortable :data="{ columns, options }"></vue-editortable>
  1. // ...
  2. data() {
  3. return {
  4. columns: [
  5. {
  6. title: 'Id',
  7. name: 'id',
  8. editable: false,
  9. },
  10. {
  11. title: 'Firstname',
  12. name: 'firstname',
  13. editable: true,
  14. },
  15. {
  16. title: 'Lastname',
  17. name: 'lastname',
  18. editable: true,
  19. },
  20. {
  21. title: 'Email',
  22. name: 'email',
  23. editable: true,
  24. },
  25. ],
  26. options: {
  27. showSearchFilter: true,
  28. requests: {
  29. allUrl: 'http://api.dev/api/users',
  30. },
  31. },
  32. };
  33. },
  34. // ...

Documentation

You will find a complete documentation here.


Build Setup

  1. # install dependencies
  2. npm install
  3. # serve with hot reload at localhost:8080
  4. npm run dev
  5. # build for production with minification
  6. npm run build
  7. # build for production and view the bundle analyzer report
  8. 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