How does the setDataAt method work?

[MattTheCuber]

I was having trouble interpreting the documentation. Here is my best guess:

<template>
  <button @click="clicked">Yes</button>
  <br /><br />
  <div id="app">
    <v-grid
      :source="rows"
      :columns="columns"
      style="height: 400px"
    />
  </div>
</template>

<script>
import VGrid from "@revolist/vue3-datagrid";
export default {
  name: "App",
  data() {
    return {
      columns: [{ prop: "name" }, { prop: "details" }],
      rows: [
        { name: "1", details: "Item 1" },
        { name: "2", details: "Item 2" },
        { name: "3", details: "Item 3" },
      ],
    };
  },
  components: {
    VGrid,
  },
  methods: {
    async clicked() {
      await this.$refs.grid.$el.setDataAt({
        row: 1,
        col: 1,
        name: "10",
        details: "Item 10",
      });
    },
  },
};
</script>

[revolist]

Hello @MattTheCuber , this method is mainly used for cell redraw, so if you want to redraw single cell you can do something like this:

https://codesandbox.io/p/sandbox/rg-setdataat-vue-3-composition-api-rmxf88

<template>
  <button @click="setDataAt">Set A:1 = 5</button>
  <br /><br />
  <VGrid ref="grid" :columns="columns" :source="rows" />
</template>

<script setup>
import { ref, shallowRef } from "vue";
import VGrid from "@revolist/vue3-datagrid";
const grid = ref(null);
const columns = ref([
  { prop: "name", name: "A" },
  { prop: "details", name: "B" },
]);

// shallowRef to avoid deep change
const rows = shallowRef([
  {
    name: "1",
    details: "Item 1",
  },
]);

const setDataAt = () => {
  rows.value[0].name = 5;

  // redraw cell
  grid.value.$el.setDataAt({
    row: 0,
    col: 0,
    rowType: "rgRow",
    colType: "rgCol",
  });
};
</script>

[MattTheCuber]

I see, thank you!

[m2a2x]

There will be update so you would be able to send data directly in this method soon.