update

src/components/Pages/TestPage.vue

@@ -1,7 +1,9 @@
 <template>
     <div>
         <DxDataGrid :data-source="employees" key-expr="ID" :show-column-lines="showColumnLines"
-            :show-row-lines="showRowLines" :show-borders="showBorders" :row-alternation-enabled="rowAlternationEnabled">
+            :show-row-lines="showRowLines" :show-borders="showBorders" :row-alternation-enabled="rowAlternationEnabled"
+            :hover-state-enabled="true" @selection-changed="onSelectionChanged">
+            <DxSelection mode="single" />
             <DxColumn :width="80" data-field="Prefix" caption="Title" />
             <DxColumn data-field="FirstName" />
             <DxColumn data-field="LastName" />
@@ -16,14 +18,29 @@
 
 <script setup lang="ts">
 import { DxCheckBox, DxDataGrid } from 'devextreme-vue';
-import { DxColumn } from 'devextreme-vue/data-grid';
+import { DxColumn, DxSelection } from 'devextreme-vue/data-grid';
 import { ref } from 'vue';
 
 const showColumnLines = ref(false);
 const showRowLines = ref(false);
 const showBorders = ref(false);
 const rowAlternationEnabled = ref(true);
-const employees = [{
+interface Employee {
+    ID: number;
+    FirstName: string;
+    LastName: string;
+    Prefix: string;
+    Position: string;
+    Picture: string;
+    BirthDate: string;
+    HireDate: string;
+    Notes: string;
+    Address: string;
+    State: string;
+    City: string;
+}
+
+const employees: Employee[] = [{
     ID: 1,
     FirstName: 'John',
     LastName: 'Heart',
@@ -155,6 +172,11 @@ const employees = [{
     City: 'San Jose',
 }];
 
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0];
+    console.log(data);
+};
+
 </script>
 <style scoped>
 .options {