dev: hotfix, data table

+ deepFetch for nested field
+ sampel

app/components/pub/my-ui/data-table/data-table.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { isRef } from 'vue';
 import type { DataTableLoader } from '~/components/pub/my-ui/data/types'
 import type { Config } from './index'
 import { Info } from 'lucide-vue-next'
@@ -33,6 +34,24 @@ function toggleSelection(row: any) {
   }
 }
 
+function deepFetch(data: Record<string, any>, key: string): string {
+  let result = '';
+  const keys = key.split('.')
+  let lastVal: any = isRef(data) ? {...(data.value as any)} : data
+  for (let i = 0; i < keys.length; i++) {
+    let idx = keys[i] || ''
+    if (typeof lastVal[idx] != undefined && lastVal[idx] != null) {
+      if (i == keys.length - 1) {
+        return lastVal[idx];
+      } else {
+        lastVal = isRef(lastVal[idx]) ? {...(lastVal[idx].value as any)} : lastVal[idx]
+      }
+    }
+  }
+  return result;
+}
+
+
 function handleActionCellClick(event: Event, _cellRef: string) {
   // Prevent event if clicked directly on the button/dropdown
   const target = event.target as HTMLElement
@@ -116,7 +135,7 @@ function handleActionCellClick(event: Event, _cellRef: string) {
           <template v-else>
             <div v-if="htmls?.[key]" v-html="htmls?.[key]?.(row, rowIndex)"></div>
             <template v-else>
-              {{ parses?.[key]?.(row, rowIndex) ?? (row as any)[key] }}
+              {{ parses?.[key]?.(row, rowIndex) ?? deepFetch((row as any), key) }}
             </template>
           </template>
         </TableCell>