Editor as native component

We provide a way to render native components as editor.

TIP

You can access close and save callbacks in properties. Check editor and EditorCtr type for more.

App

// App.vue
<template>
    <Grid
      :editors="gridEditors"
      :source="source"
      :columns="columns"
      @cell-custom-action="testCustomCellAction"
      @cell-click="testAction"
    />
</template>

<script lang="ts" setup>
/**
 * This is an example of a Vue3 component using Revogrid
 */
import { provide, readonly, ref } from 'vue';
/**
 * Import Revogrid, Renderer and Editor for Vue
 */
import Grid, { VGridVueEditor, Editors } from '@revolist/vue3-datagrid';

import Editor from './Editor.vue';

const count = ref(0)
provide('read-only-count', readonly(count));

const MY_EDITOR = 'custom-editor';
// Vue column editor register
const gridEditors: Editors = { [MY_EDITOR]: VGridVueEditor(Editor) };
// Define columns
const columns = [
  {
    prop: 'name',
    name: 'First',
    // editor type
    editor: MY_EDITOR,
  },
];
// Define source
const source = [
  {
    name: '1',
    details: 'Item 1',
  },
];

// For testing events
function testCustomCellAction(e: CustomEvent) {
  console.log('Custom cell action', e);
}
function testAction(e: CustomEvent) {
  console.log('Editor action', e);
}
</script>

Editor Component

// Editor.vue
<template>
  <button @click="onBtn">Finish edit</button>
</template>
<script lang="ts" setup>
import { defineProps, ref, inject } from "vue";
import { EditorType } from "@revolist/vue3-datagrid";

const props = defineProps<EditorType>();

function onBtn(e: MouseEvent) {
  // create and dispatch event
  const event = new CustomEvent("cell", {
    bubbles: true,
    detail: { row: this.model },
  });
  this.$el.dispatchEvent(event);

  e.stopPropagation();
  if (typeof this.close === "function") {
    (this.close as () => void)();
  }
}
</script>

Vue 3 - Native Cell component (Composition API)

Source code Git Codesandbox

vue.editor.composition.example.vue

// App.vue
<template>
    <RevoGrid
        hide-attribution
        :editors="gridEditors"
        :source="source"
        :columns="columns"
        @cell="testAction"
        style="height: 400px"
        :theme="isDark ? 'darkCompact' : 'compact'"
    />
</template>

<script lang="ts" setup>
import { useData } from 'vitepress'
const { isDark } = useData()
/**
 * This is an example of a Vue3 component using Revogrid
 */
import { provide, readonly, ref } from 'vue'
/**
 * Import Revogrid, Renderer and Editor for Vue
 */
import RevoGrid, { VGridVueEditor, type Editors } from '@revolist/vue3-datagrid'
import Editor from './vue.editor.composition.example-editor.vue'

const count = ref(0)
provide('read-only-count', readonly(count))

const MY_EDITOR = 'custom-editor'
// Vue column editor register
const gridEditors: Editors = { [MY_EDITOR]: VGridVueEditor(Editor) }
// Define columns
const columns = [
    {
        prop: 'name',
        name: 'First',
        // editor type
        editor: MY_EDITOR,
    },
]
// Define source
const source = [
    {
        name: '1',
        details: 'Item 1',
    },
]

// For testing events
function testAction(e: CustomEvent) {
    console.log('Editor action', e)
}
</script>

vue.editor.composition.example-editor.vue

// Editor.vue
<template>
    <button @click="onBtn">Finish edit</button>
</template>
<script lang="ts" setup>
import { defineProps } from 'vue'
import { type EditorType, dispatchByEvent } from '@revolist/vue3-datagrid'
interface MyType extends EditorType {
    close(): void
}
const props = defineProps<MyType>()

const onBtn = (e: MouseEvent) => {
    // create and dispatch event
    dispatchByEvent(e, 'cell', { row: props.model })

    e.stopPropagation()
    if (typeof props.close === 'function') {
        ;(props.close as () => void)()
    }
}
</script>