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.

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

// 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

// 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>