Vue 3 - Native Cell component (Composition API)

Source code Git Codesandbox

vue.cell.composition.example.vue

<template>
    <RevoGrid
        hide-attribution
        :columns="columns"
        :source="rows"
        :theme="isDark ? 'darkCompact' : 'compact'"
    />
</template>

<script lang="ts" setup>
import { useData } from 'vitepress'
const { isDark } = useData()

import { ref } from 'vue'
import RevoGrid, {
    VGridVueTemplate,
    type ColumnRegular,
} from '@revolist/vue3-datagrid'
import Cell from './vue.cell.composition.example-cell.vue'
const columns = ref<ColumnRegular[]>([
    {
        prop: 'name',
        name: 'A',
        // vue cell component register
        cellTemplate: VGridVueTemplate(Cell),
    },
    { prop: 'details', name: 'B' },
])
const rows = ref<{ name: string; details: string }[]>([
    {
        name: '1',
        details: 'Item 1',
    },
])
</script>

vue.cell.composition.example-cell.vue

<template>
    <div ref="cell" @click="customCellClickEvent">Custom Cell: {{ value }}</div>
</template>

<script lang="ts" setup>
import { defineProps, ref, inject } from 'vue'
import { type ColumnDataSchemaModel } from '@revolist/vue3-datagrid'

// You can use defineProps<ColumnDataSchemaModel> directly in your project
interface MyType extends ColumnDataSchemaModel {
    rowIndex: number
    value: any
}
const props = defineProps<MyType>()
const cell = ref<HTMLElement>()

const message = inject('sample')
function customCellClickEvent() {
    console.log('Custom cell click > Injected message:', message)
    const event = new CustomEvent('cell-custom-action', {
        bubbles: true,
        detail: { row: props.model },
    })
    cell.value?.dispatchEvent(event)
}
</script>