Editable Table Component For Vue.js – vue-editortable

Editable Table Component For Vue.js – vue-editortable

A Vue.js editable table component for your web app.


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


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 Pages are temporarely offline


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.


If you use Webpack/Browserify


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: {
// ...


<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',
// ...


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.


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


All contributions are welcome!



Github Repository

Tags: #VueJs