edit & delete button vue-good-table

Add edit & delete button in each row & able to capture row id

by marekfilip

HTML

<script src="https://unpkg.com/vue-good-table@2.18.0/dist/vue-good-table.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-good-table@2.18.0/dist/vue-good-table.css">
<div id="app">
  <vue-good-table
    :columns="columns"
    :rows="rows" >
    
    <template slot="table-row" slot-scope="props">
      <span v-if="props.column.field == 'before'">
        <button @click="editRow(props.row.id)">Edit</button>
        <button @click="deleteRow(props.row.id)">Delete</button>
      </span>
      <span v-else>
        {{props.formattedRow[props.column.field]}}
      </span>
    </template>
    
  </vue-good-table>
    
  <span>{{ text }}</span>

</div>

Vue

new Vue({
  el: '#app',
  data() {
  	return {
      columns: [
        {
          label: 'Before',
          field: 'before'
        },
        {
          label: 'ID',
          field: 'id',
          sortable: true,
        },
        {
        	label: 'Text',
          field: 'text',
          type: 'number',
          sortable: true,
        },
      ],
      rows: [
        { text: 'A', id: 1 },
        { text: 'B', id: 2 },
        { text: 'C', id: 3 },
        { text: 'D', id: 5 },
      ],
      text: ''
    };
  },
  methods: {
  	editRow(id) {
    	this.showAlert(id, 'EDIT')
    },
    deleteRow(id) {
    	this.showAlert(id, 'DELETE')
    },
    showAlert(id, type) {
    	this.text = `You clicked ${type} on row ID ${id}`
    }
  }
});