Quick start

Vue 2

The easiest way just to use vue-datagrid (opens new window) adaptor.

Install with npm i @revolist/vue-datagrid --save

After just use VueJst component:

<template>
  <div id="app">
    <v-grid
      theme="compact"
      :source="rows"
      :columns="columns"
    ></v-grid>
  </div>
</template>
 
<script>
import VGrid from "@revolist/vue-datagrid";
export default {
  name: "App",
  data() {
    return {
      columns: [{ prop: "name" }, { prop: "details" }],
      rows: [{
        name: "1",
        details: "Item 1",
      }]
    };
  },
  components: {
    VGrid,
  },
};
</script>

Check Sandbox (opens new window) for real live sample.

Vue 3+

The easiest way just to use vue-datagrid (opens new window) adaptor.

Install with npm i @revolist/vue3-datagrid --save

After just use VueJst component:

<template>
  <div id="app">
    <v-grid
      theme="compact"
      :source="rows"
      :columns="columns"
    ></v-grid>
  </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",
      }]
    };
  },
  components: {
    VGrid,
  },
};
</script>

Check Sandbox (opens new window) for real live sample.