Editor as Vue component

Vue-datagrid provides a way to render vue components as editor.
For this porpose we've invented webcomponent vue editor adapter (VGridVueEditor);

WARNING

This functionality is slightly decreasing overall grid render performance. If you are aiming for the faster render we are recommending to stick with native VNode render.

Define your editor.

TIP

You can access close and save callbacks in properties.

// SampleEditor.vue
<template>
  <button v-on:click="iAmClicked">You clicked me {{ count }} times.</button>
</template>

<script>
export default {
  props: ["rowIndex", "model", "close", "save"],
  data: function () {
    return {
      count: 0,
    };
  },
  methods: {
    iAmClicked(e) {
      this.count++;
    },
  },
};
</script>

TIP

For version vue 3+ use @revolist/vue3-datagrid accordingly.

<template>
  <div id="app">
    <v-grid
      :editors="gridEditors"
      :source="rows"
      :columns="columns"
    ></v-grid>
  </div>
</template>

<script>
import VGrid, { VGridVueEditor } from "@revolist/vue-datagrid";
import VueEditor from "./SampleEditor";
import Vue from "vue";
const editor = VGridVueEditor(Vue.component("vueEditor", VueEditor));

export default {
  name: "App",
  data() {
    return {
      gridEditors: { button: editor },
      columns: [
        {
          prop: "id",
          editor: "button",
        },
        {
          prop: "details",
        },
      ],
      rows: [
        {
          id: "My vue",
          details: "My neighbour is Vue editor",
        },
      ],
    };
  },
  components: {
    VGrid,
  },
};
</script>

Check Sandbox (opens new window) for real live sample.