Vue

HTML

<script src="https://cdn.jsdelivr.net/npm/vue-teible@0.6.1/dist/vueteible.iife.js"></script>
<div id="app">
  <data-table :items="items">
    <data-column field="id" label="ID"></data-column>
    <data-column field="name" label="Name" width="50%"></data-column>
    <data-column label="Action" :sortable="false">
      <template slot-scope="props">
        <button @click.prevent="destroy(props.item)">Delete</button>
      </template>
    </data-column>
  </data-table>
</div>

CSS

body {
  padding: 1rem;
}

Vue

let {
  DataTable,
  DataColumn
} = vueteible

new Vue({
  el: "#app",
  components: {
    DataTable,
    DataColumn
  },
  data: {
    items: [{
      id: 'id-1',
      name: 'foo'
    }, {
      id: 'id-2',
      name: 'bar'
    }, {
      id: 'id-3',
      name: 'qux'
    }]
  },
  methods: {
    destroy(x) {
      this.items = this.items.filter(item => {
        return item.id !== x.id
      })
    }
  }
})