Vue Data Grid Cell Template
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
vue
// vue3.app-template.example.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 './vue3.cell-template.example.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
vue
// vue3.cell-template.example.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
<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
<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>Why Use Custom Cell Rendering?
RevoGrid’s native cell rendering enables you to:
- Embed Components: Render complex or interactive UI elements inside grid cells, such as buttons, images, input fields, or custom widgets.
- Dynamic Content: Customize each cell’s content based on the data it represents, such as formatting or conditional rendering.
- Interactivity: Make cells interactive with event listeners and component lifecycle methods, improving the overall user experience.