Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/el-jacko/vue-editortable
A Vue.js editable table component
https://github.com/el-jacko/vue-editortable
edit editable table tableview vue vue-cli vue-editortable vue-resource vuejs vuejs2
Last synced: about 1 month ago
JSON representation
A Vue.js editable table component
- Host: GitHub
- URL: https://github.com/el-jacko/vue-editortable
- Owner: el-jacko
- License: mit
- Created: 2017-03-03T13:24:18.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-08-08T22:58:04.000Z (over 6 years ago)
- Last Synced: 2024-10-01T17:08:26.493Z (about 2 months ago)
- Topics: edit, editable, table, tableview, vue, vue-cli, vue-editortable, vue-resource, vuejs, vuejs2
- Language: Vue
- Homepage:
- Size: 75.2 KB
- Stars: 41
- Watchers: 7
- Forks: 11
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Important
Due to lack of time this project is on hold.
## Support on Beerpay
Hey dude! Help me out for a couple of :beers:!
[](https://beerpay.io/el-jacko/vue-editortable) [](https://beerpay.io/el-jacko/vue-editortable?focus=wish)
# 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
``` sh
npm install --save vue-editortable
```
Import globally in an App:
``` javascript
import VueEditortable from "vue-editortable"
Vue.component('vue-editortable', VueEditortable)
```
Import locally in a component:
``` javascript
import VueEditortable from "vue-editortable"
// ...
components: {
VueEditortable,
}
// ...
```
## Usage
``` html
```
``` javascript
// ...
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](https://github.com/el-jacko/vue-editortable/wiki).
---
## Build Setup
``` sh
# 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](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/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](http://opensource.org/licenses/MIT)