diff --git a/app/components/pub/my-ui/data-table/data-table.vue b/app/components/pub/my-ui/data-table/data-table.vue
index 5fbd8b36..5549dae9 100644
--- a/app/components/pub/my-ui/data-table/data-table.vue
+++ b/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>
diff --git a/app/pages/_dev/data-table/index.cfg.ts b/app/pages/_dev/data-table/index.cfg.ts
new file mode 100644
index 00000000..4eba929e
--- /dev/null
+++ b/app/pages/_dev/data-table/index.cfg.ts
@@ -0,0 +1,37 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{ width: 120}, {}, {}, { width: 50 }],
+
+  headers: [[
+    { label: 'No.RM.' },
+    { label: 'Nama Pasien' },
+    { label: 'Tempat Lahir' },
+    { label: '' },
+  ]],
+
+  keys: ['number', 'person.name', 'person.birthPlace_regency.name', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {},
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/pages/_dev/data-table/index.data.ts b/app/pages/_dev/data-table/index.data.ts
new file mode 100644
index 00000000..16989c3f
--- /dev/null
+++ b/app/pages/_dev/data-table/index.data.ts
@@ -0,0 +1,67 @@
+export interface Regency {
+  id: number
+  code: string
+  name: string
+}
+
+export interface Person {
+  id: number
+  name: string
+  residentIdentityNumber?: string
+  birthDate?: string
+  birthPlace_regency_code: string
+  birthPlace_regency: Regency
+}
+
+export interface Patient {
+  id: number
+  number: string
+  person: Person
+}
+
+export const regencies: Regency[] = [
+  {
+    id: 1,
+    code: '3522',
+    name: 'Bojonegoro',
+  },
+  {
+    id: 2,
+    code: '3579',
+    name: 'Batu',
+  },
+]
+
+export const people: Person[] = [
+  {
+    id: 1,
+    name: 'Abdul Manap',
+    residentIdentityNumber: '1234567890',
+    birthDate: '1990-01-01',
+    birthPlace_regency_code: '3522',
+    birthPlace_regency: regencies[0],
+  },
+  {
+    id: 2,
+    name: 'Abdul Gofur',
+    residentIdentityNumber: '1234567890',
+    birthDate: '1990-01-01',
+    birthPlace_regency_code: '3522',
+    birthPlace_regency: regencies[1],
+  },
+]
+
+export const data: Patient[] = [
+  {
+    id: 1,
+    number: 'RM-0000001',
+    person_id: 1,
+    person: people[0],
+  },
+  {
+    id: 2,
+    number: 'RM-0000002',
+    person_id: 2,
+    person: people[1],
+  }
+]
diff --git a/app/pages/_dev/data-table/index.vue b/app/pages/_dev/data-table/index.vue
new file mode 100644
index 00000000..0e2c8308
--- /dev/null
+++ b/app/pages/_dev/data-table/index.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+  import { config } from './index.cfg'
+  import { data } from './index.data'
+</script>
+
+<template>
+  <PubMyUiDataTable v-bind="config" :rows="data" />
+</template>