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>