vue3 script setup not working with revogrid

Question

I have a vue3 app, in which I'd like to keep using the standard composition api style. Unfortunately, RevoGrid doesn't seem to like it. RevoGrid works with an options api style , but the equivalent doesn't render any content. The wrappers are there, but that's it. I thought the 2 script snippets below were functionally identical, but that does not seem to be the case. The only real difference I can see is that the options api version registers the VGrid component locally. I was under the impression that when using one didn't need to register a component, you just import it and then use it in the template. What is different about RevoGrid, and how can avoid having to code these couple of views that use it with an old style ?

<script>
  import VGrid from "@revolist/vue3-datagrid";

  export default {
    components: {
      VGrid,
    },
    data() {
      return {
        columns: [{ prop: "name" }, { prop: "details" }],
        rows: [
          { name: "Joe", details: "Stuff 1", },
          { name: "Jane", details: "Stuff 2", },
          { name: "John", details: "Stuff 3", }
        ]
      };
    },
  };
</script>

<script setup>
    import VGrid from "@revolist/vue3-datagrid";
    
    const props = defineProps({
      columns: [{ prop: "name" }, { prop: "details" }],
      rows: [
        { name: "Joe", details: "Stuff 1", },
        { name: "Jane", details: "Stuff 2", },
        { name: "John", details: "Stuff 3", }
      ]
    });
</script>

<template>
  <div id="revoEx">
    <VGrid
      theme="compact"
      :source="rows"
      :columns="columns"
    ></VGrid>
  </div>
</template>

Answer 1

You have your data as actual data in Options API but for some reason you moved it as props in Composition API. The props should be provided by the parent component.

defineProps expect an object for each prop, you provided arrays, which have no meaningful properties for defineProps so basically your data arrays are ignored and the columns and rows are undefined. That's why nothing is rendered.

You need to convert it back to data:

<script setup>
    import VGrid from "@revolist/vue3-datagrid";
    
    const columns = [{ prop: "name" }, { prop: "details" }];
    const rows = [
        { name: "Joe", details: "Stuff 1", },
        { name: "Jane", details: "Stuff 2", },
        { name: "John", details: "Stuff 3", }
      ];

</script>

<template>
  <div id="revoEx">
    <VGrid
      theme="compact"
      :source="rows"
      :columns="columns"
    ></VGrid>
  </div>
</template>