Cell as native component

Revogrid provide a way to render native components inside of cells.

WARNING

If you are aiming for the faster render we are recommending to stick with native VNode render.

TIP

Check ColumnDataSchemaModel for mode information about input types.

App

// App.vue
<template>
    <Grid
      :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, { VGridVueTemplate } from '@revolist/vue3-datagrid';
import Cell from './Cell.vue';

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

// Define columns
const columns = [
  {
    prop: 'name',
    name: 'First',
    // vue cell component register
    cellTemplate: VGridVueTemplate(Cell),
  },
  {
    prop: 'details',
    name: 'Second',
  },
];
// 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>

Cell Template

// Cell.vue
<template>
  <div ref="cell" @click="customCellClickEvent">{{ rowIndex }}</div>
</template>

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

const props = defineProps<ColumnDataSchemaModel>();
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>

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>