Vue component as editor

Added a way to render vue component per editor

For better performance yet recommended to stick with classic template approach, hence it's using natural DOM virtualization.

If you consider using vue editors in grid, now you can use VGridVueEditor adaptor:

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

<script>
import VGrid, {VGridVueEditor} from "@revolist/vue-datagrid";

const NewEditor = Vue.extend({
  props: ['rowIndex', 'model', 'save', 'close'],
  render(h) {
    return h('button', {
      on: {
        click: (e: MouseEvent) => {
          e.stopPropagation();
          this.close();
          console.log('click', this.rowIndex);
        }
      }
    }, 'I am vue');
  },
});


export default {
  name: "App",
  data() {
    return {
      gridEditors: { button: VGridVueEditor(NewEditor) },
      columns: [{
          prop: "name",
          name: "First",
          editor: "button"
        },
        {
          prop: "details",
          name: "Second",
      }],
      rows: [{
        name: "1",
        details: "Item 1",
      }]
    };
  },
  components: {
    VGrid,
  },
};
</script>

For more information please consider investigating vue-editor-adapter.tsx file.