Vue 2 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.
Create component which you would like to be presented as cell. You can use props to access row model object, column property or other props described in ColumnDataSchemaModel.
Check interfaces for mode information about types.
App
vue
// App.vue
// App.vue
<template>
<!-- Use the VGrid component and bind the data source and columns -->
<v-grid :source="rows" :columns="columns" />
</template>
<script>
import VGrid, { VGridVueTemplate } from "@revolist/vue-datagrid"; // Import the VGrid component
import Cell from "./Cell.vue"; // Custom cell template
export default {
name: "App",
data() {
return {
// Define the columns for the grid
columns: [
{ prop: "name", name: "First" }, // Simple column definition
{ prop: "details", cellTemplate: VGridVueTemplate(Cell) }, // Another column definition
],
// Define the data source for the grid
rows: [{ name: "1", details: "Item 1" }],
};
},
components: {
VGrid, // Register the VGrid component
},
};
</script>Cell template
vue
// Cell.vue
<template><span>Custom cell</span></template>
<script>
import Vue, { PropType } from "vue";
export default {
props: [
"prop",
"model",
"column",
"rowIndex",
"colIndex",
"colType",
"type",
"data",
],
};
</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.