Editable VueTable

Make columns editable

by Doogie

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.4/vue.min.js"></script>
<script src="https://rawgit.com/matfish2/vue-tables/master/dist/vue-tables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.17/daterangepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.17/daterangepicker.min.css">
<div id="people" class="container">
  <h2>Editable vue-tables</h2>
  Hover over a cell in the name column to edit.
  <v-client-table :data="tableData" :columns="columns" :options="options"></v-client-table>
</div>

CSS

#people {
  text-align: center;
  width: 95%;
  margin: 0 auto;
}

h2 {
  margin-bottom: 30px;
}

th,
td {
  text-align: left;
}

th:nth-child(n+2),
td:nth-child(n+2) {
  text-align: center;
}

thead tr:nth-child(2) th {
  font-weight: normal;
}

.VueTables__sort-icon {
  margin-left: 10px;
}

.VueTables__dropdown-pagination {
  margin-left: 10px;
}

.VueTables__highlight {
  background: yellow;
  font-weight: normal;
}

.VueTables__sortable {
  cursor: pointer;
}

.VueTables__date-filter {
  border: 1px solid #ccc;
  padding: 6px;
  border-radius: 4px;
  cursor: pointer;
}

.VueTables__filter-placeholder {
  color: #aaa;
}

.VueTables__list-filter {
  width:120px;
}

.VueTables__table td:hover span.glyphicon-edit {
  visibility: visible !important;
}

JavaScript

Vue.use(VueTables.client, {
  compileTemplates: true,
  //skin:'table-condensed'
});

// ============> HOVER over the "Name" column to see the edit icon

var editableCell = Vue.extend({
  template: '<span id="{{cellId}}">{{value}}</span>' +
    '<span class="glyphicon glyphicon-edit pull-right" style="cursor:pointer; visibility: hidden;" @click="startEdit"></span>',
  methods: {
    startEdit: function(evt) {
      console.log("edit Cell: rowID="+this.rowId+" key="+this.key+" value="+this.value);
      var newValue = prompt("Enter new value for "+this.key, this.value);
      this.value = newValue;  //PROBLEM: this does not update value in parent
    },
  },
  props: {
    rowId: String,
    key: String,
    value: String
  }
});

Vue.component('editable-cell', editableCell);


new Vue({
  el: "#people",
  methods: {
    deleteMe: function(id) {
      alert("Delete " + id);
    },
    alphabetFilter: function(letter) {
      this.selectedLetter = letter;
      this.$broadcast('vue-tables.filter::alphabet', letter);
    },
  },
  data: {
    columns: ['name', 'pet','birth_date'],
    options: {
      dateColumns: ['birth_date'],
      headings: {
        name: 'Name',
        birth_date: 'Birth Date',
        age: 'Age',
        edit: 'Edit',
        delete: 'Delete'
      },
      templates: {
        name: function(row) {
            return '<editable-cell row-id="'+row.id+'" key="name" value="'+row.name+'"></editable-cell>';
        },
        age: function(row) {
          return row.birth_date.fromNow(' ');
        },
        edit: "<a href='#!/{id}/edit'><i class='glyphicon glyphicon-edit'></i></a>"
      },
      listColumns:{
      pet:[
      {value:'0',text:'Guinea Pig'},
      {value:'1',text:'Dog'},
      {value:'2',text:'Cat'},
      {value:'3',text:'Goldfish'},
      {value:'4',text:'Hamster'}
      ]
      },
      customFilters: [{
          name: 'alphabet',
          callback: function(row, query) {
            return row.name[0] == query;
       ...