Add Vue implementation

Author: charlescordialDevExpress

Vue/package.json

@@ -39,4 +39,4 @@
     "vitest": "^0.25.6",
     "vue-tsc": "^1.0.12"
   }
-}
+}

Vue/src/components/HomeContent.vue

@@ -1,25 +1,70 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
-
 import 'devextreme/dist/css/dx.material.blue.light.compact.css';
-import DxButton from 'devextreme-vue/button';
+import {
+  DxDataGrid,
+  DxColumn,
+  DxPager,
+  DxPaging,
+  type DxDataGridTypes,
+} from 'devextreme-vue/data-grid';
+ 
+import { employees } from '../data';
+
+const allowedPageSizes = [5, 10, 20];
 
-const props = defineProps({
-  text: String,
-});
-const count = ref(0);
-const buttonText = computed<string>(
-  () => `Click ${props.text}: ${count.value}`
-);
-function clickHandler() {
-  count.value += 1;
-}
+const onContextMenuPreparing = (e: DxDataGridTypes.ContextMenuPreparingEvent): void => {
+  if (e.row?.rowType === 'data') {
+    const rowIndex = e.row.rowIndex;
+    if (e.rowIndex === undefined) return;
+    e.items = [
+      {
+        text: 'edit',
+        onItemClick(): void {
+          e.component.editRow(rowIndex);
+        },
+      },
+      {
+        text: 'insert',
+        onItemClick: async(): Promise<void> => {
+          await e.component.addRow();
+        },
+      },
+      {
+        text: 'delete',
+        onItemClick(): void {
+          e.component.deleteRow(rowIndex);
+        },
+      },
+    ];
+  }
+};
 </script>
 <template>
   <div>
-    <DxButton
-      :text="buttonText"
-      @click="clickHandler"
-    />
+    <DxDataGrid
+      id="gridContainer"
+      :data-source="employees"
+      key-expr="ID"
+      @context-menu-preparing="onContextMenuPreparing"
+    >
+      <DxColumn data-field="FirstName" />
+      <DxColumn data-field="LastName" />
+      <DxColumn data-field="Title" />
+      <DxColumn data-field="City" />
+      <DxColumn data-field="Country" />
+
+      <DxPaging :page-size="10" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="allowedPageSizes"
+        :show-page-size-selector="true"
+      />
+      <DxEditing
+        mode="row"
+        :allow-updating="true"
+        :allow-deleting="true"
+        :allow-adding="true"
+      />
+    </DxDataGrid>
   </div>
 </template>

Vue/src/data.ts

@@ -0,0 +1,45 @@
+export interface Employee {
+  ID: number;
+  FirstName: string;
+  LastName: string;
+  City: string;
+}
+
+export const employees = [
+  {
+    ID: 1,
+    FirstName: 'John',
+    LastName: 'Heart',
+    City: 'Los Angeles',
+  },
+  {
+    ID: 2,
+    FirstName: 'Olivia',
+    LastName: 'Peyton',
+    City: 'Los Angeles',
+  },
+  {
+    ID: 3,
+    FirstName: 'Robert',
+    LastName: 'Reagan',
+    City: 'Bentonville',
+  },
+  {
+    ID: 4,
+    FirstName: 'Greta',
+    LastName: 'Sims',
+    City: 'Atlanta',
+  },
+  {
+    ID: 5,
+    FirstName: 'Brett',
+    LastName: 'Wade',
+    City: 'Reno',
+  },
+  {
+    ID: 6,
+    FirstName: 'Sandra',
+    LastName: 'Johnson',
+    City: 'Miami',
+  },
+];