Cell as Vue component

Vue-datagrid provides a way to render vue components inside of cells.
For this porpose we've invented webcomponent vue template adapter (VGridVueTemplate);

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.

Create component which you would like to be presented as cell. You can use props to access row model object, column property or other props described in ColumnDataSchemaModel.
Check interfaces (opens new window) for mode information about types.

<template>
  <button v-on:click="iAmClicked">You clicked me {{ count }} times.</button>
</template>
<script>
// myVue.vue
import Vue from "vue";

// your vue component
export default {
  // access any cell properties here
  props: ["rowIndex", "prop"],
  name: "myVue",
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    iAmClicked(e) {
      this.count++;
    },
  }
};
</script>

Import your vue component as cell template using VGridVueTemplate adapter:

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

<template>
  <div id="app">
    <v-grid :source="rows" :columns="columns" @beforeCellFocus="beforeFocus"></v-grid>
  </div>
</template>

<script>
// VGridVueTemplate is adapter for webcomponent
import VGrid, { VGridVueTemplate } from "@revolist/vue-datagrid";
import myVue from './myVue.vue';

export default {
  name: "App",
  data() {
    return {
      columns: [
        {
          name: "Vue",
          cellTemplate: VGridVueTemplate(myVue),
        },
        {
          prop: "details",
          autoSize: true,
        },
      ],
      rows: [{}],
    };
  },
  methods: {
    beforeFocus(e) {
      e.preventDefault();
    },
  },
  components: {
    VGrid,
  },
};
</script>

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