Vue 3 Data Grid Cell Editor component (Composition API)

Source code Git Codesandbox

vue.editor.composition.example.vue

// vue.editor.composition.example.vue
<template>
  <RevoGrid
    hide-attribution
    :editors="gridEditors"
    :source="source"
    :columns="columns"
    style="height: 400px"
    :theme="isDark ? 'darkCompact' : 'compact'"
    @cell="testAction"
  />
</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

// vue.editor.composition.example-editor.vue
<template>
  <button @click="onBtn">Finish edit</button>
</template>
<script lang="ts" setup>
import { type EditorType, dispatchByEvent } from '@revolist/vue3-datagrid'

type MyType = 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>