From 0e43bff3672e6923eb10ad6c8ac4d8df5436dc73 Mon Sep 17 00:00:00 2001
From: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date: Mon, 13 Oct 2025 16:38:23 +0700
Subject: [PATCH 1/4] dev: hotfix, added userQueryCRUD

---
 app/composables/useQueryCRUD.ts | 46 +++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 app/composables/useQueryCRUD.ts

diff --git a/app/composables/useQueryCRUD.ts b/app/composables/useQueryCRUD.ts
new file mode 100644
index 00000000..a48e9a2b
--- /dev/null
+++ b/app/composables/useQueryCRUD.ts
@@ -0,0 +1,46 @@
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+export function useQueryCRUDMode(key: string = 'mode') {
+  const route = useRoute()
+  const router = useRouter()
+
+  const mode = computed<'list' | 'entry'>({
+    get: () => (route.query[key] && route.query[key] === 'entry' ? 'entry' : 'list'),
+    set: (val) => {
+      router.push({
+        path: route.path,
+        query: {
+          ...route.query,
+          [key]: val,
+        },
+      })
+    },
+  })
+
+  const goToEntry = () => (mode.value = 'entry')
+  const backToList = () =>(mode.value = 'list')
+
+  return { mode, goToEntry, backToList }
+}
+
+export function useQueryCRUDRecordId(key: string = 'record-id') {
+  const route = useRoute()
+  const router = useRouter()
+
+  // const recordId = useState('route-query-' + key, () => '')
+  const recordId = computed({
+    get: () => route.query[key],
+    set: (val: string) => {
+      router.replace({
+        path: route.path,
+        query: {
+          ...route.query,
+          [key]: val,
+        },
+      })
+    },
+  })
+
+  return { recordId }
+}

From 32c815a6e54ca85555f386dc0f1f517c1334775e Mon Sep 17 00:00:00 2001
From: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date: Wed, 15 Oct 2025 07:37:57 +0700
Subject: [PATCH 2/4] dev: hotfix, cleaning data-table

---
 .../app/assesment-function/list-cfg.ts        | 205 ++++++++--------
 .../app/assesment-function/list.vue           |  12 +-
 app/components/app/bed/list-cfg.ts            |  60 ++---
 app/components/app/bed/list.vue               |   9 +-
 app/components/app/building/list-cfg.ts       |  51 ++--
 app/components/app/building/list.vue          |   9 +-
 app/components/app/chamber/list-cfg.ts        |  60 ++---
 app/components/app/chamber/list.vue           |   9 +-
 app/components/app/counter/list-cfg.ts        |  51 ++--
 app/components/app/counter/list.vue           |   9 +-
 .../app/division-position/list-cfg.ts         |  95 ++++----
 app/components/app/division-position/list.vue |   9 +-
 app/components/app/division/list-cfg.ts       |  66 ++---
 app/components/app/division/list.vue          |   9 +-
 app/components/app/doctor/list-cfg.ts         | 183 +++++++-------
 app/components/app/doctor/list.vue            |   9 +-
 app/components/app/employee/list-cfg.ts       | 167 +++++++------
 app/components/app/employee/list.vue          |   9 +-
 app/components/app/encounter/list-cfg.ts      | 228 +++++++++---------
 app/components/app/encounter/list.vue         |   9 +-
 app/components/app/equipment/list-cfg.ts      |  74 +++---
 app/components/app/equipment/list.vue         |  11 +-
 app/components/app/floor/list-cfg.ts          |  62 ++---
 app/components/app/floor/list.vue             |   9 +-
 app/components/app/icd/list-cfg.ts            | 228 +++++++++---------
 app/components/app/icd/list.vue               |   9 +-
 app/components/app/icd/multiselect-picker.vue |   9 +-
 app/components/app/installation/list-cfg.ts   |  80 +++---
 app/components/app/installation/list.vue      |   9 +-
 app/components/app/item-price/list-cfg.ts     |  61 ++---
 app/components/app/item-price/list.vue        |   9 +-
 app/components/app/item/list-cfg.ts           |  61 ++---
 app/components/app/item/list.vue              |   9 +-
 app/components/app/laborant/list-cfg.ts       | 183 +++++++-------
 app/components/app/laborant/list.vue          |   9 +-
 app/components/app/medicine-group/list-cfg.ts |  53 ++--
 app/components/app/medicine-group/list.vue    |   9 +-
 .../app/medicine-method/list-cfg.ts           |  53 ++--
 app/components/app/medicine-method/list.vue   |   9 +-
 app/components/app/medicine/list-cfg.ts       |  85 +++----
 app/components/app/medicine/list.vue          |   9 +-
 app/components/app/nurse/list-cfg.ts          | 183 +++++++-------
 app/components/app/nurse/list.vue             |   9 +-
 app/components/app/nutritionist/list-cfg.ts   | 181 +++++++-------
 app/components/app/nutritionist/list.vue      |   9 +-
 app/components/app/patient/list-cfg.ts        | 163 +++++++------
 app/components/app/patient/list.vue           |   9 +-
 app/components/app/patient/picker.vue         |   9 +-
 app/components/app/pharmacist/list-cfg.ts     | 181 +++++++-------
 app/components/app/pharmacist/list.vue        |   9 +-
 .../app/prescription-item/list-entry.cfg.ts   |  56 +++++
 .../app/prescription-item/list-entry.ts       |  66 -----
 .../app/prescription-item/list-entry.vue      |   9 +-
 app/components/app/public-screen/list-cfg.ts  |  52 ++--
 app/components/app/public-screen/list.vue     |   9 +-
 .../registration/sep-prosedur/list-cfg.ts     | 197 +++++++--------
 .../rehab/registration/sep-prosedur/list.vue  |   9 +-
 app/components/app/room/list-cfg.ts           |  87 +++----
 app/components/app/room/list.vue              |   9 +-
 app/components/app/satusehat/list-cfg.ts      | 106 ++++----
 app/components/app/satusehat/list.vue         |   7 +-
 app/components/app/sep/list-cfg.ts            | 127 +++++-----
 app/components/app/sep/list.vue               |   9 +-
 app/components/app/soapi/list-cfg.ts          | 204 ++++++++--------
 app/components/app/soapi/list.vue             |   9 +-
 app/components/app/specialist/list-cfg.ts     |  71 +++---
 app/components/app/specialist/list.vue        |   9 +-
 app/components/app/subspecialist/list-cfg.ts  |  71 +++---
 app/components/app/subspecialist/list.vue     |   9 +-
 app/components/app/tools/list-cfg.ts          |  76 +++---
 app/components/app/tools/list.vue             |   9 +-
 app/components/app/unit/list-cfg.ts           |  71 +++---
 app/components/app/unit/list.vue              |   9 +-
 app/components/app/uom/list-cfg.ts            |  60 ++---
 app/components/app/uom/list.vue               |  11 +-
 app/components/app/user/list-cfg.ts           | 174 +++++++------
 app/components/app/user/list.vue              |   9 +-
 app/components/app/warehouse/list-cfg.ts      |  61 ++---
 app/components/app/warehouse/list.vue         |   9 +-
 .../pub/my-ui/data-table/data-table.vue       |  33 +--
 app/components/pub/my-ui/data-table/index.ts  |   3 +
 app/components/pub/my-ui/data-table/type.ts   |  56 +++++
 app/components/pub/my-ui/data/types.ts        |  35 +--
 83 files changed, 2279 insertions(+), 2506 deletions(-)
 create mode 100644 app/components/app/prescription-item/list-entry.cfg.ts
 delete mode 100644 app/components/app/prescription-item/list-entry.ts
 create mode 100644 app/components/pub/my-ui/data-table/index.ts

diff --git a/app/components/app/assesment-function/list-cfg.ts b/app/components/app/assesment-function/list-cfg.ts
index 460cacd9..a11537a7 100644
--- a/app/components/app/assesment-function/list-cfg.ts
+++ b/app/components/app/assesment-function/list-cfg.ts
@@ -1,119 +1,114 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
 import { defineAsyncComponent } from 'vue'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [
-  {},
-  {},
-  {},
-  { width: 100 },
-  { width: 120 },
-  {},
-  {},
-  {},
-  { width: 100 },
-  { width: 100 },
-  {},
-  { width: 50 },
-]
-
-export const header: Th[][] = [
-  [
-    { label: 'Nama' },
-    { label: 'Rekam Medis' },
-    { label: 'KTP' },
-    { label: 'Tgl Lahir' },
-    { label: 'Umur' },
-    { label: 'JK' },
-    { label: 'Pendidikan' },
-    { label: 'Status' },
-    { label: '' },
+export const config: Config = {
+  cols: [
+    {},
+    {},
+    {},
+    { width: 100 },
+    { width: 120 },
+    {},
+    {},
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    { width: 50 },
   ],
-]
 
-export const keys = [
-  'name',
-  'medicalRecord_number',
-  'identity_number',
-  'birth_date',
-  'patient_age',
-  'gender',
-  'education',
-  'status',
-  'action',
-]
+  headers: [
+    [
+      { label: 'Nama' },
+      { label: 'Rekam Medis' },
+      { label: 'KTP' },
+      { label: 'Tgl Lahir' },
+      { label: 'Umur' },
+      { label: 'JK' },
+      { label: 'Pendidikan' },
+      { label: 'Status' },
+      { label: '' },
+    ],
+  ],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  keys: [
+    'name',
+    'medicalRecord_number',
+    'identity_number',
+    'birth_date',
+    'patient_age',
+    'gender',
+    'education',
+    'status',
+    'action',
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
-  },
-  identity_number: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (recX.identity_number?.substring(0, 5) === 'BLANK') {
-      return '(TANPA NIK)'
-    }
-    return recX.identity_number
-  },
-  birth_date: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (typeof recX.birth_date == 'object' && recX.birth_date) {
-      return (recX.birth_date as Date).toLocaleDateString()
-    } else if (typeof recX.birth_date == 'string') {
-      return (recX.birth_date as string).substring(0, 10)
-    }
-    return recX.birth_date
-  },
-  patient_age: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.birth_date?.split('T')[0]
-  },
-  gender: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (typeof recX?.gender_code !== 'number' && recX?.gender_code !== '') {
-      return 'Tidak Diketahui'
-    }
-    return recX.gender_code
-  },
-  education: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (typeof recX.education_code == 'number' && recX.education_code >= 0) {
-      return recX.education_code
-    } else if (typeof recX.education_code) {
-      return recX.education_code
-    }
-    return '-'
-  },
-}
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
+    },
+    identity_number: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+        return '(TANPA NIK)'
+      }
+      return recX.identity_number
+    },
+    birth_date: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX.birth_date == 'object' && recX.birth_date) {
+        return (recX.birth_date as Date).toLocaleDateString()
+      } else if (typeof recX.birth_date == 'string') {
+        return (recX.birth_date as string).substring(0, 10)
+      }
+      return recX.birth_date
+    },
+    patient_age: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.birth_date?.split('T')[0]
+    },
+    gender: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX?.gender_code !== 'number' && recX?.gender_code !== '') {
+        return 'Tidak Diketahui'
+      }
+      return recX.gender_code
+    },
+    education: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX.education_code == 'number' && recX.education_code >= 0) {
+        return recX.education_code
+      } else if (typeof recX.education_code) {
+        return recX.education_code
+      }
+      return '-'
+    },
   },
-}
 
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+  components: {
+    action(rec: unknown, idx: number) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
   },
-}
+
+  htmls: {
+    patient_address(rec: unknown) {
+      return '-'
+    },
+  },
+}
\ No newline at end of file
diff --git a/app/components/app/assesment-function/list.vue b/app/components/app/assesment-function/list.vue
index b9a74929..58b4f1bd 100644
--- a/app/components/app/assesment-function/list.vue
+++ b/app/components/app/assesment-function/list.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -7,13 +7,5 @@ defineProps<{
 </script>
 
 <template>
-  <PubMyUiDataTable
-    :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
-  />
+  <PubMyUiDataTable v-bind="config" :rows="data" />
 </template>
diff --git a/app/components/app/bed/list-cfg.ts b/app/components/app/bed/list-cfg.ts
index 8e940723..825db939 100644
--- a/app/components/app/bed/list-cfg.ts
+++ b/app/components/app/bed/list-cfg.ts
@@ -1,44 +1,44 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{}, {}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Kamar' }, { label: '' }]]
+  headers: [[
+    { label: 'Kode' },
+    { label: 'Nama' },
+    { label: 'Kamar' },
+    { label: '' },
+  ]],
 
-export const keys = ['code', 'name', 'parent', 'action']
+  keys: ['code', 'name', 'parent', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  parent: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.parent?.name || '-'
+  parses: {
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
   },
-}
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
   },
-}
 
-export const funcHtml: RecStrFuncUnknown = {}
+  htmls: {},
+}
diff --git a/app/components/app/bed/list.vue b/app/components/app/bed/list.vue
index f8b4bf29..19642581 100644
--- a/app/components/app/bed/list.vue
+++ b/app/components/app/bed/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
diff --git a/app/components/app/building/list-cfg.ts b/app/components/app/building/list-cfg.ts
index 905ec837..016caa03 100644
--- a/app/components/app/building/list-cfg.ts
+++ b/app/components/app/building/list-cfg.ts
@@ -1,37 +1,36 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+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 cols: Col[] = [{}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: '' }]]
+  headers: [[
+    { label: 'Kode' },
+    { label: 'Nama' },
+    { label: '' },
+  ]],
 
-export const keys = ['code', 'name', 'action']
+  keys: ['code', 'name', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {}
+  parses: {},
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
   },
-}
 
-export const funcHtml: RecStrFuncUnknown = {}
+  htmls: {},
+}
diff --git a/app/components/app/building/list.vue b/app/components/app/building/list.vue
index e1b056ce..1be60a60 100644
--- a/app/components/app/building/list.vue
+++ b/app/components/app/building/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
diff --git a/app/components/app/chamber/list-cfg.ts b/app/components/app/chamber/list-cfg.ts
index 0669b99b..7f10fe7a 100644
--- a/app/components/app/chamber/list-cfg.ts
+++ b/app/components/app/chamber/list-cfg.ts
@@ -1,44 +1,44 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{}, {}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Lantai' }, { label: '' }]]
+  headers: [[
+    { label: 'Kode' },
+    { label: 'Nama' },
+    { label: 'Lantai' },
+    { label: '' },
+  ]],
 
-export const keys = ['code', 'name', 'parent', 'action']
+  keys: ['code', 'name', 'parent', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  parent: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.parent?.name || '-'
+  parses: {
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
   },
-}
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
   },
-}
 
-export const funcHtml: RecStrFuncUnknown = {}
+  htmls: {},
+}
diff --git a/app/components/app/chamber/list.vue b/app/components/app/chamber/list.vue
index e1b056ce..1be60a60 100644
--- a/app/components/app/chamber/list.vue
+++ b/app/components/app/chamber/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
diff --git a/app/components/app/counter/list-cfg.ts b/app/components/app/counter/list-cfg.ts
index 905ec837..016caa03 100644
--- a/app/components/app/counter/list-cfg.ts
+++ b/app/components/app/counter/list-cfg.ts
@@ -1,37 +1,36 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+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 cols: Col[] = [{}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: '' }]]
+  headers: [[
+    { label: 'Kode' },
+    { label: 'Nama' },
+    { label: '' },
+  ]],
 
-export const keys = ['code', 'name', 'action']
+  keys: ['code', 'name', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {}
+  parses: {},
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
   },
-}
 
-export const funcHtml: RecStrFuncUnknown = {}
+  htmls: {},
+}
diff --git a/app/components/app/counter/list.vue b/app/components/app/counter/list.vue
index e1b056ce..1be60a60 100644
--- a/app/components/app/counter/list.vue
+++ b/app/components/app/counter/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
diff --git a/app/components/app/division-position/list-cfg.ts b/app/components/app/division-position/list-cfg.ts
index e5a9944e..e35627d2 100644
--- a/app/components/app/division-position/list-cfg.ts
+++ b/app/components/app/division-position/list-cfg.ts
@@ -1,64 +1,59 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
 
-export const cols: Col[] = [{}, {}, {}, {}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, { width: 50 }],
 
-export const header: Th[][] = [
-  [
-    { label: 'Kode' },
-    { label: 'Nama' },
-    { label: 'Divisi Induk' },
-    { label: 'Karyawan' },
-    { label: 'Status Kepala' },
-    { label: '' },
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Divisi Induk' },
+      { label: 'Karyawan' },
+      { label: 'Status Kepala' },
+      { label: '' },
+    ],
   ],
-]
 
-export const keys = ['code', 'name', 'division', 'employee', 'head', 'action']
+  keys: ['code', 'name', 'division', 'employee', 'head', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  division: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.division?.name || '-'
+  parses: {
+    division: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.division?.name || '-'
+    },
+    employee: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.employee?.name || '-'
+    },
+    head: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.headStatus ? 'Ya' : 'Tidak'
+    },
   },
-  employee: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.employee?.name || '-'
-  },
-  head: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.headStatus ? 'Ya' : 'Tidak'
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
   },
+
+  htmls: {},
 }
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-      props: {
-        size: 'sm',
-      },
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {}
diff --git a/app/components/app/division-position/list.vue b/app/components/app/division-position/list.vue
index e1b056ce..1be60a60 100644
--- a/app/components/app/division-position/list.vue
+++ b/app/components/app/division-position/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
diff --git a/app/components/app/division/list-cfg.ts b/app/components/app/division/list-cfg.ts
index d5479579..54ed06a6 100644
--- a/app/components/app/division/list-cfg.ts
+++ b/app/components/app/division/list-cfg.ts
@@ -1,47 +1,47 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
 
-export const cols: Col[] = [{}, {}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Divisi Induk' }, { label: '' }]]
+  headers: [[
+    { label: 'Kode' },
+    { label: 'Nama' },
+    { label: 'Divisi Induk' },
+    { label: '' },
+  ]],
 
-export const keys = ['code', 'name', 'parent', 'action']
+  keys: ['code', 'name', 'parent', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  parent: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.parent?.name || '-'
+  parses: {
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
   },
-}
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-      props: {
-        size: 'sm',
-      },
-    }
-    return res
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
   },
-}
 
-export const funcHtml: RecStrFuncUnknown = {}
+  htmls: {},
+}
\ No newline at end of file
diff --git a/app/components/app/division/list.vue b/app/components/app/division/list.vue
index e1b056ce..1be60a60 100644
--- a/app/components/app/division/list.vue
+++ b/app/components/app/division/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
diff --git a/app/components/app/doctor/list-cfg.ts b/app/components/app/doctor/list-cfg.ts
index 14c9cf0d..52111fc7 100644
--- a/app/components/app/doctor/list-cfg.ts
+++ b/app/components/app/doctor/list-cfg.ts
@@ -1,11 +1,4 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
@@ -18,97 +11,99 @@ const _doctorStatus = {
   1: 'Aktif',
 }
 
-export const cols: Col[] = [
-  { width: 100 },
-  { width: 250 },
-  {},
-  { width: 100 },
-  { width: 100 },
-  {},
-  {},
-  {},
-  { width: 120 },
-  { width: 100 },
-  {},
-  {},
-]
-
-export const header: Th[][] = [
-  [
-    { label: 'Kode JKN' },
-    { label: 'Nama' },
-    { label: 'No KTP' },
-    { label: 'No SIP' },
-    { label: 'No IHS' },
-    { label: 'Telpon' },
-    { label: 'Fee Ranap' },
-    { label: 'Fee Rajal' },
-    { label: 'Status' },
-    { label: '' },
+export const config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 250 },
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    {},
+    {},
+    { width: 120 },
+    { width: 100 },
+    {},
+    {},
   ],
-]
 
-export const keys = [
-  'bpjs_code',
-  'name',
-  'identity_number',
-  'sip_no',
-  'ihs_number',
-  'phone',
-  'inPatient_itemPrice',
-  'outPatient_itemPrice',
-  'status',
-  'action',
-]
+  headers: [
+    [
+      { label: 'Kode JKN' },
+      { label: 'Nama' },
+      { label: 'No KTP' },
+      { label: 'No SIP' },
+      { label: 'No IHS' },
+      { label: 'Telpon' },
+      { label: 'Fee Ranap' },
+      { label: 'Fee Rajal' },
+      { label: 'Status' },
+      { label: '' },
+    ],
+  ],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  keys: [
+    'bpjs_code',
+    'name',
+    'identity_number',
+    'sip_no',
+    'ihs_number',
+    'phone',
+    'inPatient_itemPrice',
+    'outPatient_itemPrice',
+    'status',
+    'action',
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
-  },
-  identity_number: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (recX.identity_number?.substring(0, 5) === 'BLANK') {
-      return '(TANPA NIK)'
-    }
-    return recX.identity_number
-  },
-  inPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
-  },
-  outPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
-  },
-}
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+    },
+    identity_number: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+        return '(TANPA NIK)'
+      }
+      return recX.identity_number
+    },
+    inPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
+    },
+    outPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
+    },
   },
-  status(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: statusBadge,
-    }
-    return res
-  },
-}
 
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+    status(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+      return res
+    },
   },
-}
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
+  },
+}
\ No newline at end of file
diff --git a/app/components/app/doctor/list.vue b/app/components/app/doctor/list.vue
index b9a74929..96697bde 100644
--- a/app/components/app/doctor/list.vue
+++ b/app/components/app/doctor/list.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>
diff --git a/app/components/app/employee/list-cfg.ts b/app/components/app/employee/list-cfg.ts
index 69ee9962..4c6f691c 100644
--- a/app/components/app/employee/list-cfg.ts
+++ b/app/components/app/employee/list-cfg.ts
@@ -1,11 +1,4 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
@@ -17,93 +10,95 @@ const doctorStatus = {
   1: 'Aktif',
 }
 
-export const cols: Col[] = [
-  { width: 100 },
-  { width: 250 },
-  {},
-  { width: 100 },
-  { width: 100 },
-  {},
-  {},
-  {},
-  { width: 100 },
-  { width: 100 },
-  { width: 100 },
-  { width: 50 },
-]
-
-export const header: Th[][] = [
-  [
-    { label: 'Kode JKN' },
-    { label: 'Nama' },
-    { label: 'No KTP' },
-    { label: 'No SIP' },
-    { label: 'No IHS' },
-    { label: 'Telpon' },
-    { label: 'Fee Ranap' },
-    { label: 'Fee Rajal' },
-    { label: 'Status' },
+export const config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 250 },
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    {},
+    {},
+    { width: 120 },
+    { width: 100 },
+    {},
+    {},
   ],
-]
 
-export const keys = [
-  'bpjs_code',
-  'name',
-  'identity_number',
-  'sip_no',
-  'ihs_number',
-  'phone',
-  'inPatient_itemPrice',
-  'outPatient_itemPrice',
-  'status',
-  'action',
-]
+  headers: [
+    [
+      { label: 'Kode JKN' },
+      { label: 'Nama' },
+      { label: 'No KTP' },
+      { label: 'No SIP' },
+      { label: 'No IHS' },
+      { label: 'Telpon' },
+      { label: 'Fee Ranap' },
+      { label: 'Fee Rajal' },
+      { label: 'Status' },
+      { label: '' },
+    ],
+  ],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  keys: [
+    'bpjs_code',
+    'name',
+    'identity_number',
+    'sip_no',
+    'ihs_number',
+    'phone',
+    'inPatient_itemPrice',
+    'outPatient_itemPrice',
+    'status',
+    'action',
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    console.log(rec)
-    const recX = rec as SmallDetailDto
-    return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
-  },
-  identity_number: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (recX.identity_number?.substring(0, 5) === 'BLANK') {
-      return '(TANPA NIK)'
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+    },
+    identity_number: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+        return '(TANPA NIK)'
+      }
+      return recX.identity_number
+    },
+    inPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
+    },
+    outPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
+    },
+    status: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return doctorStatus[recX.status_code as keyof typeof doctorStatus]
     }
-    return recX.identity_number
   },
-  inPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
-  },
-  outPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
-  },
-  status: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return doctorStatus[recX.status_code as keyof typeof doctorStatus]
-  },
-}
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
     }
-    return res
   },
-}
 
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }
diff --git a/app/components/app/employee/list.vue b/app/components/app/employee/list.vue
index b9a74929..96697bde 100644
--- a/app/components/app/employee/list.vue
+++ b/app/components/app/employee/list.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>
diff --git a/app/components/app/encounter/list-cfg.ts b/app/components/app/encounter/list-cfg.ts
index 0ca6a92c..fb15bc06 100644
--- a/app/components/app/encounter/list-cfg.ts
+++ b/app/components/app/encounter/list-cfg.ts
@@ -1,11 +1,4 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
@@ -13,119 +6,122 @@ type SmallDetailDto = any
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-pdud.vue'))
 const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
 
-export const cols: Col[] = [
-  {},
-  {},
-  {},
-  { width: 100 },
-  { width: 120 },
-  {},
-  {},
-  {},
-  { width: 100 },
-  { width: 100 },
-  {},
-  { width: 50 },
-]
-
-export const header: Th[][] = [
-  [
-    { label: 'Nama' },
-    { label: 'Rekam Medis' },
-    { label: 'KTP' },
-    { label: 'Tgl Lahir' },
-    { label: 'Umur' },
-    { label: 'JK' },
-    { label: 'Pendidikan' },
-    { label: 'Status' },
-    { label: '' },
+export const config: Config = {
+  cols: [
+    {},
+    {},
+    {},
+    { width: 100 },
+    { width: 120 },
+    {},
+    {},
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    { width: 50 },
   ],
-]
 
-export const keys = [
-  'name',
-  'medicalRecord_number',
-  'identity_number',
-  'birth_date',
-  'patient_age',
-  'gender',
-  'education',
-  'status',
-  'action',
-]
+  headers: [
+    [
+      { label: 'Nama' },
+      { label: 'Rekam Medis' },
+      { label: 'KTP' },
+      { label: 'Tgl Lahir' },
+      { label: 'Umur' },
+      { label: 'JK' },
+      { label: 'Pendidikan' },
+      { label: 'Status' },
+      { label: '' },
+    ],
+  ],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  keys: [
+    'name',
+    'medicalRecord_number',
+    'identity_number',
+    'birth_date',
+    'patient_age',
+    'gender',
+    'education',
+    'status',
+    'action',
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
+    },
+    identity_number: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+        return '(TANPA NIK)'
+      }
+      return recX.identity_number
+    },
+    birth_date: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX.birth_date == 'object' && recX.birth_date) {
+        return (recX.birth_date as Date).toLocaleDateString()
+      } else if (typeof recX.birth_date == 'string') {
+        return (recX.birth_date as string).substring(0, 10)
+      }
+      return recX.birth_date
+    },
+    patient_age: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.birth_date?.split('T')[0]
+    },
+    gender: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX?.gender_code !== 'number' && recX?.gender_code !== '') {
+        return 'Tidak Diketahui'
+      }
+      return recX.gender_code
+    },
+    education: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX.education_code == 'number' && recX.education_code >= 0) {
+        return recX.education_code
+      } else if (typeof recX.education_code) {
+        return recX.education_code
+      }
+      return '-'
+    },
   },
-  identity_number: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (recX.identity_number?.substring(0, 5) === 'BLANK') {
-      return '(TANPA NIK)'
-    }
-    return recX.identity_number
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+    status(rec, idx) {
+      const recX = rec as SmallDetailDto
+      if (recX.status_code === null) {
+        recX.status_code = 0
+      }
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+      return res
+    },
   },
-  birth_date: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (typeof recX.birth_date == 'object' && recX.birth_date) {
-      return (recX.birth_date as Date).toLocaleDateString()
-    } else if (typeof recX.birth_date == 'string') {
-      return (recX.birth_date as string).substring(0, 10)
-    }
-    return recX.birth_date
-  },
-  patient_age: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.birth_date?.split('T')[0]
-  },
-  gender: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (typeof recX?.gender_code !== 'number' && recX?.gender_code !== '') {
-      return 'Tidak Diketahui'
-    }
-    return recX.gender_code
-  },
-  education: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (typeof recX.education_code == 'number' && recX.education_code >= 0) {
-      return recX.education_code
-    } else if (typeof recX.education_code) {
-      return recX.education_code
-    }
-    return '-'
-  },
-}
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-  status(rec, idx) {
-    if (rec.status === null) {
-      rec.status_code = 0
-    }
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: statusBadge,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }
diff --git a/app/components/app/encounter/list.vue b/app/components/app/encounter/list.vue
index b9a74929..96697bde 100644
--- a/app/components/app/encounter/list.vue
+++ b/app/components/app/encounter/list.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>
diff --git a/app/components/app/equipment/list-cfg.ts b/app/components/app/equipment/list-cfg.ts
index 8f3ff7e5..96cde678 100644
--- a/app/components/app/equipment/list-cfg.ts
+++ b/app/components/app/equipment/list-cfg.ts
@@ -1,43 +1,57 @@
-import type { Col, KeyLabel, RecComponent, RecStrFuncComponent, Th } from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{ width: 100 }, { width: 250 }, { width: 100 }, { width: 100 }, { width: 50 }]
+export const config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 250 },
+    { width: 100 },
+    { width: 100 },
+    { width: 50 },
+  ],
 
-export const header: Th[][] = [
-  [{ label: 'Kode' }, { label: 'Nama' }, { label: 'Stok' }, { label: 'Satuan' }, { label: '' }],
-]
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Stok' },
+      { label: 'Satuan' },
+      { label: '' },
+    ],
+  ],
 
-export const keys = ['code', 'name', 'stock', 'uom_code', 'action']
+  keys: ['code', 'name', 'stock', 'uom_code', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: Record<string, (row: any, ...args: any[]) => any> = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.name}`.trim()
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.name}`.trim()
+    },
+    uom_code: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.uom_code
+    },
   },
-  uom_code: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.uom_code
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
   },
+
+  htmls: {},
 }
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-}
-
-export const funcHtml: Record<string, (row: any, ...args: any[]) => any> = {}
diff --git a/app/components/app/equipment/list.vue b/app/components/app/equipment/list.vue
index 3af2b398..618c70c1 100644
--- a/app/components/app/equipment/list.vue
+++ b/app/components/app/equipment/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,14 +27,9 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
-    />
+      />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>
 </template>
diff --git a/app/components/app/floor/list-cfg.ts b/app/components/app/floor/list-cfg.ts
index 33b1a8af..64553e15 100644
--- a/app/components/app/floor/list-cfg.ts
+++ b/app/components/app/floor/list-cfg.ts
@@ -1,44 +1,46 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{}, {}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Gedung' }, { label: '' }]]
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Gedung' },
+      { label: '' },
+    ],
+  ],
 
-export const keys = ['code', 'name', 'parent', 'action']
+  keys: ['code', 'name', 'parent', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  parent: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.parent?.name || '-'
+  parses: {
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
   },
-}
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
   },
-}
 
-export const funcHtml: RecStrFuncUnknown = {}
+  htmls: {},
+}
diff --git a/app/components/app/floor/list.vue b/app/components/app/floor/list.vue
index e1b056ce..1be60a60 100644
--- a/app/components/app/floor/list.vue
+++ b/app/components/app/floor/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
diff --git a/app/components/app/icd/list-cfg.ts b/app/components/app/icd/list-cfg.ts
index c74ef59b..c413e737 100644
--- a/app/components/app/icd/list-cfg.ts
+++ b/app/components/app/icd/list-cfg.ts
@@ -1,11 +1,4 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
@@ -13,119 +6,122 @@ type SmallDetailDto = any
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
 
-export const cols: Col[] = [
-  {},
-  {},
-  {},
-  { width: 100 },
-  { width: 120 },
-  {},
-  {},
-  {},
-  { width: 100 },
-  { width: 100 },
-  {},
-  { width: 50 },
-]
-
-export const header: Th[][] = [
-  [
-    { label: 'Nama' },
-    { label: 'Rekam Medis' },
-    { label: 'KTP' },
-    { label: 'Tgl Lahir' },
-    { label: 'Umur' },
-    { label: 'JK' },
-    { label: 'Pendidikan' },
-    { label: 'Status' },
-    { label: '' },
+export const config: Config = {
+  cols: [
+    {},
+    {},
+    {},
+    { width: 100 },
+    { width: 120 },
+    {},
+    {},
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    { width: 50 },
   ],
-]
 
-export const keys = [
-  'name',
-  'medicalRecord_number',
-  'identity_number',
-  'birth_date',
-  'patient_age',
-  'gender',
-  'education',
-  'status',
-  'action',
-]
+  headers: [
+    [
+      { label: 'Nama' },
+      { label: 'Rekam Medis' },
+      { label: 'KTP' },
+      { label: 'Tgl Lahir' },
+      { label: 'Umur' },
+      { label: 'JK' },
+      { label: 'Pendidikan' },
+      { label: 'Status' },
+      { label: '' },
+    ],
+  ],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  keys: [
+    'name',
+    'medicalRecord_number',
+    'identity_number',
+    'birth_date',
+    'patient_age',
+    'gender',
+    'education',
+    'status',
+    'action',
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
+    },
+    identity_number: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+        return '(TANPA NIK)'
+      }
+      return recX.identity_number
+    },
+    birth_date: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX.birth_date == 'object' && recX.birth_date) {
+        return (recX.birth_date as Date).toLocaleDateString()
+      } else if (typeof recX.birth_date == 'string') {
+        return (recX.birth_date as string).substring(0, 10)
+      }
+      return recX.birth_date
+    },
+    patient_age: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.birth_date?.split('T')[0]
+    },
+    gender: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX?.gender_code !== 'number' && recX?.gender_code !== '') {
+        return 'Tidak Diketahui'
+      }
+      return recX.gender_code
+    },
+    education: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX.education_code == 'number' && recX.education_code >= 0) {
+        return recX.education_code
+      } else if (typeof recX.education_code) {
+        return recX.education_code
+      }
+      return '-'
+    },
   },
-  identity_number: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (recX.identity_number?.substring(0, 5) === 'BLANK') {
-      return '(TANPA NIK)'
-    }
-    return recX.identity_number
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+    status(rec, idx) {
+      const recX = rec as SmallDetailDto
+      if (recX.status_code === null) {
+        recX.status_code = 0
+      }
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+      return res
+    },
   },
-  birth_date: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (typeof recX.birth_date == 'object' && recX.birth_date) {
-      return (recX.birth_date as Date).toLocaleDateString()
-    } else if (typeof recX.birth_date == 'string') {
-      return (recX.birth_date as string).substring(0, 10)
-    }
-    return recX.birth_date
-  },
-  patient_age: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.birth_date?.split('T')[0]
-  },
-  gender: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (typeof recX?.gender_code !== 'number' && recX?.gender_code !== '') {
-      return 'Tidak Diketahui'
-    }
-    return recX.gender_code
-  },
-  education: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (typeof recX.education_code == 'number' && recX.education_code >= 0) {
-      return recX.education_code
-    } else if (typeof recX.education_code) {
-      return recX.education_code
-    }
-    return '-'
-  },
-}
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-  status(rec, idx) {
-    if (rec.status === null) {
-      rec.status_code = 0
-    }
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: statusBadge,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }
diff --git a/app/components/app/icd/list.vue b/app/components/app/icd/list.vue
index b9a74929..96697bde 100644
--- a/app/components/app/icd/list.vue
+++ b/app/components/app/icd/list.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>
diff --git a/app/components/app/icd/multiselect-picker.vue b/app/components/app/icd/multiselect-picker.vue
index 9a08bb86..ce4dbd80 100644
--- a/app/components/app/icd/multiselect-picker.vue
+++ b/app/components/app/icd/multiselect-picker.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{ data: any[] }>()
 const modelValue = defineModel<any | null>()
@@ -8,13 +8,8 @@ const modelValue = defineModel<any | null>()
 <template>
   <PubMyUiDataTable
     v-model="modelValue"
+    v-bind="config"
     select-mode="multi"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>
diff --git a/app/components/app/installation/list-cfg.ts b/app/components/app/installation/list-cfg.ts
index e6fc5d47..f64ecea8 100644
--- a/app/components/app/installation/list-cfg.ts
+++ b/app/components/app/installation/list-cfg.ts
@@ -1,51 +1,53 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
 
-export const cols: Col[] = [{}, {}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Encounter Class' }, { label: '' }]]
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Encounter Class' },
+      { label: '' },
+    ],
+  ],
 
-export const keys = ['code', 'name', 'encounterClass_code', 'action']
+  keys: ['code', 'name', 'encounterClass_code', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.name}`.trim()
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.name}`.trim()
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-      props: {
-        size: 'sm',
-      },
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
-  },
-}
\ No newline at end of file
diff --git a/app/components/app/installation/list.vue b/app/components/app/installation/list.vue
index e1b056ce..1be60a60 100644
--- a/app/components/app/installation/list.vue
+++ b/app/components/app/installation/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
diff --git a/app/components/app/item-price/list-cfg.ts b/app/components/app/item-price/list-cfg.ts
index c26856bf..c3db4f50 100644
--- a/app/components/app/item-price/list-cfg.ts
+++ b/app/components/app/item-price/list-cfg.ts
@@ -1,11 +1,4 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+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'))
@@ -15,32 +8,40 @@ const _doctorStatus = {
   1: 'Aktif',
 }
 
-export const cols: Col[] = [{}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Aksi' }]]
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Aksi' },
+    ],
+  ],
 
-export const keys = ['code', 'name', 'action']
+  keys: ['code', 'name', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {}
+  parses: {},
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }
diff --git a/app/components/app/item-price/list.vue b/app/components/app/item-price/list.vue
index b9a74929..96697bde 100644
--- a/app/components/app/item-price/list.vue
+++ b/app/components/app/item-price/list.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>
diff --git a/app/components/app/item/list-cfg.ts b/app/components/app/item/list-cfg.ts
index c26856bf..c3db4f50 100644
--- a/app/components/app/item/list-cfg.ts
+++ b/app/components/app/item/list-cfg.ts
@@ -1,11 +1,4 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+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'))
@@ -15,32 +8,40 @@ const _doctorStatus = {
   1: 'Aktif',
 }
 
-export const cols: Col[] = [{}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Aksi' }]]
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Aksi' },
+    ],
+  ],
 
-export const keys = ['code', 'name', 'action']
+  keys: ['code', 'name', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {}
+  parses: {},
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }
diff --git a/app/components/app/item/list.vue b/app/components/app/item/list.vue
index b9a74929..96697bde 100644
--- a/app/components/app/item/list.vue
+++ b/app/components/app/item/list.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>
diff --git a/app/components/app/laborant/list-cfg.ts b/app/components/app/laborant/list-cfg.ts
index 14c9cf0d..13b5c015 100644
--- a/app/components/app/laborant/list-cfg.ts
+++ b/app/components/app/laborant/list-cfg.ts
@@ -1,11 +1,4 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
@@ -18,97 +11,99 @@ const _doctorStatus = {
   1: 'Aktif',
 }
 
-export const cols: Col[] = [
-  { width: 100 },
-  { width: 250 },
-  {},
-  { width: 100 },
-  { width: 100 },
-  {},
-  {},
-  {},
-  { width: 120 },
-  { width: 100 },
-  {},
-  {},
-]
-
-export const header: Th[][] = [
-  [
-    { label: 'Kode JKN' },
-    { label: 'Nama' },
-    { label: 'No KTP' },
-    { label: 'No SIP' },
-    { label: 'No IHS' },
-    { label: 'Telpon' },
-    { label: 'Fee Ranap' },
-    { label: 'Fee Rajal' },
-    { label: 'Status' },
-    { label: '' },
+export const config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 250 },
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    {},
+    {},
+    { width: 120 },
+    { width: 100 },
+    {},
+    {},
   ],
-]
 
-export const keys = [
-  'bpjs_code',
-  'name',
-  'identity_number',
-  'sip_no',
-  'ihs_number',
-  'phone',
-  'inPatient_itemPrice',
-  'outPatient_itemPrice',
-  'status',
-  'action',
-]
+  headers: [
+    [
+      { label: 'Kode JKN' },
+      { label: 'Nama' },
+      { label: 'No KTP' },
+      { label: 'No SIP' },
+      { label: 'No IHS' },
+      { label: 'Telpon' },
+      { label: 'Fee Ranap' },
+      { label: 'Fee Rajal' },
+      { label: 'Status' },
+      { label: '' },
+    ],
+  ],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  keys: [
+    'bpjs_code',
+    'name',
+    'identity_number',
+    'sip_no',
+    'ihs_number',
+    'phone',
+    'inPatient_itemPrice',
+    'outPatient_itemPrice',
+    'status',
+    'action',
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+    },
+    identity_number: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+        return '(TANPA NIK)'
+      }
+      return recX.identity_number
+    },
+    inPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
+    },
+    outPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
+    },
   },
-  identity_number: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (recX.identity_number?.substring(0, 5) === 'BLANK') {
-      return '(TANPA NIK)'
-    }
-    return recX.identity_number
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+    status(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+      return res
+    },
   },
-  inPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
-  },
-  outPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
-  },
-}
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-  status(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: statusBadge,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }
diff --git a/app/components/app/laborant/list.vue b/app/components/app/laborant/list.vue
index b9a74929..96697bde 100644
--- a/app/components/app/laborant/list.vue
+++ b/app/components/app/laborant/list.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>
diff --git a/app/components/app/medicine-group/list-cfg.ts b/app/components/app/medicine-group/list-cfg.ts
index b9f068e9..583fd860 100644
--- a/app/components/app/medicine-group/list-cfg.ts
+++ b/app/components/app/medicine-group/list-cfg.ts
@@ -1,37 +1,38 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+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 cols: Col[] = [{}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Aksi' }]]
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Aksi' },
+    ],
+  ],
 
-export const keys = ['code', 'name', 'action']
+  keys: ['code', 'name', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {}
+  parses: {},
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
   },
-}
 
-export const funcHtml: RecStrFuncUnknown = {}
+  htmls: {},
+}
diff --git a/app/components/app/medicine-group/list.vue b/app/components/app/medicine-group/list.vue
index 3af2b398..e4544c2f 100644
--- a/app/components/app/medicine-group/list.vue
+++ b/app/components/app/medicine-group/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>
diff --git a/app/components/app/medicine-method/list-cfg.ts b/app/components/app/medicine-method/list-cfg.ts
index b9f068e9..583fd860 100644
--- a/app/components/app/medicine-method/list-cfg.ts
+++ b/app/components/app/medicine-method/list-cfg.ts
@@ -1,37 +1,38 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+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 cols: Col[] = [{}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Aksi' }]]
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Aksi' },
+    ],
+  ],
 
-export const keys = ['code', 'name', 'action']
+  keys: ['code', 'name', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {}
+  parses: {},
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
   },
-}
 
-export const funcHtml: RecStrFuncUnknown = {}
+  htmls: {},
+}
diff --git a/app/components/app/medicine-method/list.vue b/app/components/app/medicine-method/list.vue
index 3af2b398..e4544c2f 100644
--- a/app/components/app/medicine-method/list.vue
+++ b/app/components/app/medicine-method/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>
diff --git a/app/components/app/medicine/list-cfg.ts b/app/components/app/medicine/list-cfg.ts
index 77993d55..059022c8 100644
--- a/app/components/app/medicine/list-cfg.ts
+++ b/app/components/app/medicine/list-cfg.ts
@@ -1,59 +1,54 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{}, {}, {}, {}, {}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, {}, { width: 50 }],
 
-export const header: Th[][] = [
-  [
-    { label: 'Kode' },
-    { label: 'Name' },
-    { label: 'Golongan' },
-    { label: 'Metode Pemberian' },
-    { label: "Satuan" },
-    { label: 'Stok' },
-    { label: 'Aksi' },
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Name' },
+      { label: 'Golongan' },
+      { label: 'Metode Pemberian' },
+      { label: 'Satuan' },
+      { label: 'Stok' },
+      { label: 'Aksi' },
+    ],
   ],
-]
 
-export const keys = ['code', 'name', 'group', 'method', 'unit', 'stock', 'action']
+  keys: ['code', 'name', 'group', 'method', 'unit', 'stock', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  group: (rec: unknown): unknown => {
-    return (rec as SmallDetailDto).medicineGroup?.name || '-'
+  parses: {
+    group: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineGroup?.name || '-'
+    },
+    method: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineMethod?.name || '-'
+    },
+    unit: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).uom?.name || '-'
+    },
   },
-  method: (rec: unknown): unknown => {
-    return (rec as SmallDetailDto).medicineMethod?.name || '-'
-  },
-  unit: (rec: unknown): unknown => {
-    return (rec as SmallDetailDto).uom?.name || '-' 
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
   },
+
+  htmls: {},
 }
-
-export const funcComponent: RecStrFuncComponent = {
-  action: (rec: unknown, idx: number): RecComponent => {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {}
diff --git a/app/components/app/medicine/list.vue b/app/components/app/medicine/list.vue
index 3af2b398..e4544c2f 100644
--- a/app/components/app/medicine/list.vue
+++ b/app/components/app/medicine/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>
diff --git a/app/components/app/nurse/list-cfg.ts b/app/components/app/nurse/list-cfg.ts
index 14c9cf0d..13b5c015 100644
--- a/app/components/app/nurse/list-cfg.ts
+++ b/app/components/app/nurse/list-cfg.ts
@@ -1,11 +1,4 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
@@ -18,97 +11,99 @@ const _doctorStatus = {
   1: 'Aktif',
 }
 
-export const cols: Col[] = [
-  { width: 100 },
-  { width: 250 },
-  {},
-  { width: 100 },
-  { width: 100 },
-  {},
-  {},
-  {},
-  { width: 120 },
-  { width: 100 },
-  {},
-  {},
-]
-
-export const header: Th[][] = [
-  [
-    { label: 'Kode JKN' },
-    { label: 'Nama' },
-    { label: 'No KTP' },
-    { label: 'No SIP' },
-    { label: 'No IHS' },
-    { label: 'Telpon' },
-    { label: 'Fee Ranap' },
-    { label: 'Fee Rajal' },
-    { label: 'Status' },
-    { label: '' },
+export const config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 250 },
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    {},
+    {},
+    { width: 120 },
+    { width: 100 },
+    {},
+    {},
   ],
-]
 
-export const keys = [
-  'bpjs_code',
-  'name',
-  'identity_number',
-  'sip_no',
-  'ihs_number',
-  'phone',
-  'inPatient_itemPrice',
-  'outPatient_itemPrice',
-  'status',
-  'action',
-]
+  headers: [
+    [
+      { label: 'Kode JKN' },
+      { label: 'Nama' },
+      { label: 'No KTP' },
+      { label: 'No SIP' },
+      { label: 'No IHS' },
+      { label: 'Telpon' },
+      { label: 'Fee Ranap' },
+      { label: 'Fee Rajal' },
+      { label: 'Status' },
+      { label: '' },
+    ],
+  ],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  keys: [
+    'bpjs_code',
+    'name',
+    'identity_number',
+    'sip_no',
+    'ihs_number',
+    'phone',
+    'inPatient_itemPrice',
+    'outPatient_itemPrice',
+    'status',
+    'action',
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+    },
+    identity_number: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+        return '(TANPA NIK)'
+      }
+      return recX.identity_number
+    },
+    inPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
+    },
+    outPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
+    },
   },
-  identity_number: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (recX.identity_number?.substring(0, 5) === 'BLANK') {
-      return '(TANPA NIK)'
-    }
-    return recX.identity_number
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+    status(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+      return res
+    },
   },
-  inPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
-  },
-  outPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
-  },
-}
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-  status(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: statusBadge,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }
diff --git a/app/components/app/nurse/list.vue b/app/components/app/nurse/list.vue
index b9a74929..96697bde 100644
--- a/app/components/app/nurse/list.vue
+++ b/app/components/app/nurse/list.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>
diff --git a/app/components/app/nutritionist/list-cfg.ts b/app/components/app/nutritionist/list-cfg.ts
index 14c9cf0d..4dd5657f 100644
--- a/app/components/app/nutritionist/list-cfg.ts
+++ b/app/components/app/nutritionist/list-cfg.ts
@@ -1,11 +1,4 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
@@ -18,97 +11,97 @@ const _doctorStatus = {
   1: 'Aktif',
 }
 
-export const cols: Col[] = [
-  { width: 100 },
-  { width: 250 },
-  {},
-  { width: 100 },
-  { width: 100 },
-  {},
-  {},
-  {},
-  { width: 120 },
-  { width: 100 },
-  {},
-  {},
-]
-
-export const header: Th[][] = [
-  [
-    { label: 'Kode JKN' },
-    { label: 'Nama' },
-    { label: 'No KTP' },
-    { label: 'No SIP' },
-    { label: 'No IHS' },
-    { label: 'Telpon' },
-    { label: 'Fee Ranap' },
-    { label: 'Fee Rajal' },
-    { label: 'Status' },
-    { label: '' },
+export const config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 250 },
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    {},
+    {},
+    { width: 120 },
+    { width: 100 },
+    {},
+    {},
   ],
-]
 
-export const keys = [
-  'bpjs_code',
-  'name',
-  'identity_number',
-  'sip_no',
-  'ihs_number',
-  'phone',
-  'inPatient_itemPrice',
-  'outPatient_itemPrice',
-  'status',
-  'action',
-]
+  headers: [
+    [
+      { label: 'Kode JKN' },
+      { label: 'Nama' },
+      { label: 'No KTP' },
+      { label: 'No SIP' },
+      { label: 'No IHS' },
+      { label: 'Telpon' },
+      { label: 'Fee Ranap' },
+      { label: 'Fee Rajal' },
+      { label: 'Status' },
+      { label: '' },
+    ],
+  ],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  keys: [
+    'bpjs_code',
+    'name',
+    'identity_number',
+    'sip_no',
+    'ihs_number',
+    'phone',
+    'inPatient_itemPrice',
+    'outPatient_itemPrice',
+    'status',
+    'action',
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+    },
+    identity_number: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+        return '(TANPA NIK)'
+      }
+      return recX.identity_number
+    },
+    inPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
+    },
+    outPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
+    },
   },
-  identity_number: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (recX.identity_number?.substring(0, 5) === 'BLANK') {
-      return '(TANPA NIK)'
-    }
-    return recX.identity_number
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+    status(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+    },
   },
-  inPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
-  },
-  outPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
-  },
-}
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-  status(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: statusBadge,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }
diff --git a/app/components/app/nutritionist/list.vue b/app/components/app/nutritionist/list.vue
index b9a74929..96697bde 100644
--- a/app/components/app/nutritionist/list.vue
+++ b/app/components/app/nutritionist/list.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>
diff --git a/app/components/app/patient/list-cfg.ts b/app/components/app/patient/list-cfg.ts
index 4fbdf694..e8d2b220 100644
--- a/app/components/app/patient/list-cfg.ts
+++ b/app/components/app/patient/list-cfg.ts
@@ -1,11 +1,4 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import type { PatientEntity } from '~/models/patient'
 import { defineAsyncComponent } from 'vue'
 import { educationCodes, genderCodes } from '~/lib/constants'
@@ -13,88 +6,94 @@ import { calculateAge } from '~/lib/utils'
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{}, {}, {}, {}, {}, {}, {}, { width: 5 }]
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, {}, {}, { width: 5 }],
 
-export const header: Th[][] = [
-  [
-    { label: 'Nama' },
-    { label: 'NIK' },
-    { label: 'Tgl Lahir' },
-    { label: 'Umur' },
-    { label: 'Jenis Kelamin' },
-    { label: 'Pendidikan' },
-    { label: '' },
+  headers: [
+    [
+      { label: 'Nama' },
+      { label: 'NIK' },
+      { label: 'Tgl Lahir' },
+      { label: 'Umur' },
+      { label: 'Jenis Kelamin' },
+      { label: 'Pendidikan' },
+      { label: '' },
+    ],
   ],
-]
 
-export const keys = ['name', 'identity_number', 'birth_date', 'patient_age', 'gender', 'education', 'action']
+  keys: [
+    'name',
+    'identity_number',
+    'birth_date',
+    'patient_age',
+    'gender',
+    'education',
+    'action',
+  ],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const { person } = rec as PatientEntity
-    return person.name.trim()
+  parses: {
+    name: (rec: unknown): unknown => {
+      const { person } = rec as PatientEntity
+      return person.name.trim()
+    },
+    identity_number: (rec: unknown): unknown => {
+      const { person } = rec as PatientEntity
+      if (person?.residentIdentityNumber?.substring(0, 5) === 'BLANK') {
+        return '(TANPA NIK)'
+      }
+      return person.residentIdentityNumber
+    },
+    birth_date: (rec: unknown): unknown => {
+      const { person } = rec as PatientEntity
+      if (typeof person.birthDate === 'object' && person.birthDate) {
+        return (person.birthDate as Date).toLocaleDateString()
+      } else if (typeof person.birthDate === 'string') {
+        return person.birthDate.substring(0, 10)
+      }
+      return person.birthDate
+    },
+    patient_age: (rec: unknown): unknown => {
+      const { person } = rec as PatientEntity
+      return calculateAge(person.birthDate)
+    },
+    gender: (rec: unknown): unknown => {
+      const { person } = rec as PatientEntity
+      if (typeof person.gender_code === 'number' && person.gender_code >= 0) {
+        return person.gender_code
+      } else if (typeof person.gender_code === 'string' && person.gender_code) {
+        return genderCodes[person.gender_code] || '-'
+      }
+      return '-'
+    },
+    education: (rec: unknown): unknown => {
+      const { person } = rec as PatientEntity
+      if (typeof person.education_code === 'number' && person.education_code >= 0) {
+        return person.education_code
+      } else if (typeof person.education_code === 'string' && person.education_code) {
+        return educationCodes[person.education_code] || '-'
+      }
+      return '-'
+    },
   },
-  identity_number: (rec: unknown): unknown => {
-    const { person } = rec as PatientEntity
 
-    if (person?.residentIdentityNumber?.substring(0, 5) === 'BLANK') {
-      return '(TANPA NIK)'
-    }
-    return person.residentIdentityNumber
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
   },
-  birth_date: (rec: unknown): unknown => {
-    const { person } = rec as PatientEntity
 
-    if (typeof person.birthDate == 'object' && person.birthDate) {
-      return (person.birthDate as Date).toLocaleDateString()
-    } else if (typeof person.birthDate == 'string') {
-      return (person.birthDate as string).substring(0, 10)
-    }
-    return person.birthDate
-  },
-  patient_age: (rec: unknown): unknown => {
-    const { person } = rec as PatientEntity
-    return calculateAge(person.birthDate)
-  },
-  gender: (rec: unknown): unknown => {
-    const { person } = rec as PatientEntity
-
-    if (typeof person.gender_code == 'number' && person.gender_code >= 0) {
-      return person.gender_code
-    } else if (typeof person.gender_code === 'string' && person.gender_code) {
-      return genderCodes[person.gender_code] || '-'
-    }
-    return '-'
-  },
-  education: (rec: unknown): unknown => {
-    const { person } = rec as PatientEntity
-    if (typeof person.education_code == 'number' && person.education_code >= 0) {
-      return person.education_code
-    } else if (typeof person.education_code === 'string' && person.education_code) {
-      return educationCodes[person.education_code] || '-'
-    }
-    return '-'
-  },
-}
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }
diff --git a/app/components/app/patient/list.vue b/app/components/app/patient/list.vue
index 53558b2b..c12f409f 100644
--- a/app/components/app/patient/list.vue
+++ b/app/components/app/patient/list.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -22,13 +22,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
diff --git a/app/components/app/patient/picker.vue b/app/components/app/patient/picker.vue
index 5789ef6b..78d417ca 100644
--- a/app/components/app/patient/picker.vue
+++ b/app/components/app/patient/picker.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{ data: any[] }>()
 const modelValue = defineModel<any | null>()
@@ -8,13 +8,8 @@ const modelValue = defineModel<any | null>()
 <template>
   <PubMyUiDataTable
     v-model="modelValue"
+    v-bind="config"
     select-mode="single"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>
diff --git a/app/components/app/pharmacist/list-cfg.ts b/app/components/app/pharmacist/list-cfg.ts
index 14c9cf0d..4dd5657f 100644
--- a/app/components/app/pharmacist/list-cfg.ts
+++ b/app/components/app/pharmacist/list-cfg.ts
@@ -1,11 +1,4 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
@@ -18,97 +11,97 @@ const _doctorStatus = {
   1: 'Aktif',
 }
 
-export const cols: Col[] = [
-  { width: 100 },
-  { width: 250 },
-  {},
-  { width: 100 },
-  { width: 100 },
-  {},
-  {},
-  {},
-  { width: 120 },
-  { width: 100 },
-  {},
-  {},
-]
-
-export const header: Th[][] = [
-  [
-    { label: 'Kode JKN' },
-    { label: 'Nama' },
-    { label: 'No KTP' },
-    { label: 'No SIP' },
-    { label: 'No IHS' },
-    { label: 'Telpon' },
-    { label: 'Fee Ranap' },
-    { label: 'Fee Rajal' },
-    { label: 'Status' },
-    { label: '' },
+export const config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 250 },
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    {},
+    {},
+    { width: 120 },
+    { width: 100 },
+    {},
+    {},
   ],
-]
 
-export const keys = [
-  'bpjs_code',
-  'name',
-  'identity_number',
-  'sip_no',
-  'ihs_number',
-  'phone',
-  'inPatient_itemPrice',
-  'outPatient_itemPrice',
-  'status',
-  'action',
-]
+  headers: [
+    [
+      { label: 'Kode JKN' },
+      { label: 'Nama' },
+      { label: 'No KTP' },
+      { label: 'No SIP' },
+      { label: 'No IHS' },
+      { label: 'Telpon' },
+      { label: 'Fee Ranap' },
+      { label: 'Fee Rajal' },
+      { label: 'Status' },
+      { label: '' },
+    ],
+  ],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  keys: [
+    'bpjs_code',
+    'name',
+    'identity_number',
+    'sip_no',
+    'ihs_number',
+    'phone',
+    'inPatient_itemPrice',
+    'outPatient_itemPrice',
+    'status',
+    'action',
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+    },
+    identity_number: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+        return '(TANPA NIK)'
+      }
+      return recX.identity_number
+    },
+    inPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
+    },
+    outPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
+    },
   },
-  identity_number: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (recX.identity_number?.substring(0, 5) === 'BLANK') {
-      return '(TANPA NIK)'
-    }
-    return recX.identity_number
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+    status(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+    },
   },
-  inPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
-  },
-  outPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
-  },
-}
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-  status(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: statusBadge,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }
diff --git a/app/components/app/pharmacist/list.vue b/app/components/app/pharmacist/list.vue
index b9a74929..96697bde 100644
--- a/app/components/app/pharmacist/list.vue
+++ b/app/components/app/pharmacist/list.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>
diff --git a/app/components/app/prescription-item/list-entry.cfg.ts b/app/components/app/prescription-item/list-entry.cfg.ts
new file mode 100644
index 00000000..070dd65f
--- /dev/null
+++ b/app/components/app/prescription-item/list-entry.cfg.ts
@@ -0,0 +1,56 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, {}, { width: 50 }],
+
+  headers: [
+    [
+      { label: 'Nama' },
+      { label: 'Bentuk' },
+      { label: 'Freq' },
+      { label: 'Dosis' },
+      { label: 'Interval' },
+      { label: 'Total' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['name', 'uom_code', 'frequency', 'multiplier', 'interval', 'total', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    cateogry: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineCategory?.name || '-'
+    },
+    group: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineGroup?.name || '-'
+    },
+    method: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineMethod?.name || '-'
+    },
+    unit: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineUnit?.name || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {},
+}
diff --git a/app/components/app/prescription-item/list-entry.ts b/app/components/app/prescription-item/list-entry.ts
deleted file mode 100644
index c257b46a..00000000
--- a/app/components/app/prescription-item/list-entry.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
-import { defineAsyncComponent } from 'vue'
-
-type SmallDetailDto = any
-
-const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
-
-export const cols: Col[] = [{}, {}, {}, {}, {}, {}, { width: 50 }]
-
-export const header: Th[][] = [
-  [
-    { label: 'Nama' },
-    { label: 'Bentuk' },
-    { label: 'Freq' },
-    { label: 'Dosis' },
-    { label: 'Interval' },
-    { label: 'Total' },
-    { label: '' },
-  ],
-]
-
-export const keys = ['name', 'uom_code', 'frequency', 'multiplier', 'interval', 'total', 'action']
-
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
-
-export const funcParsed: RecStrFuncUnknown = {
-  cateogry: (rec: unknown): unknown => {
-    return (rec as SmallDetailDto).medicineCategory?.name || '-'
-  },
-  group: (rec: unknown): unknown => {
-    return (rec as SmallDetailDto).medicineGroup?.name || '-'
-  },
-  method: (rec: unknown): unknown => {
-    return (rec as SmallDetailDto).medicineMethod?.name || '-'
-  },
-  unit: (rec: unknown): unknown => {
-    return (rec as SmallDetailDto).medicineUnit?.name || '-'
-  },
-}
-
-export const funcComponent: RecStrFuncComponent = {
-  action: (rec: unknown, idx: number): RecComponent => {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {
-  // (_rec) {
-  //   return '-'
-  // },
-}
diff --git a/app/components/app/prescription-item/list-entry.vue b/app/components/app/prescription-item/list-entry.vue
index e5feecba..5b496b2b 100644
--- a/app/components/app/prescription-item/list-entry.vue
+++ b/app/components/app/prescription-item/list-entry.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-entry'
+import { config } from './list-entry.cfg'
 
 defineProps<{
   data: any[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>
diff --git a/app/components/app/public-screen/list-cfg.ts b/app/components/app/public-screen/list-cfg.ts
index 905ec837..9f7ea4b4 100644
--- a/app/components/app/public-screen/list-cfg.ts
+++ b/app/components/app/public-screen/list-cfg.ts
@@ -1,37 +1,37 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config } 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 cols: Col[] = [{}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: '' }]]
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: '' },
+    ],
+  ],
 
-export const keys = ['code', 'name', 'action']
+  keys: ['code', 'name', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {}
+  parses: {},
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
   },
-}
 
-export const funcHtml: RecStrFuncUnknown = {}
+  htmls: {},
+}
diff --git a/app/components/app/public-screen/list.vue b/app/components/app/public-screen/list.vue
index e1b056ce..1be60a60 100644
--- a/app/components/app/public-screen/list.vue
+++ b/app/components/app/public-screen/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
diff --git a/app/components/app/rehab/registration/sep-prosedur/list-cfg.ts b/app/components/app/rehab/registration/sep-prosedur/list-cfg.ts
index 754d2dfb..19298fbf 100644
--- a/app/components/app/rehab/registration/sep-prosedur/list-cfg.ts
+++ b/app/components/app/rehab/registration/sep-prosedur/list-cfg.ts
@@ -1,112 +1,113 @@
-import type { Col, KeyLabel, RecComponent, RecStrFuncComponent, RecStrFuncUnknown, Th } from '~/components/pub/my-ui/data/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [
-  {},
-  {},
-  {},
-  { width: 100 },
-  { width: 120 },
-  {},
-  {},
-  {},
-  { width: 100 },
-  { width: 100 },
-  {},
-  { width: 50 },
-]
-
-export const header: Th[][] = [
-  [
-    { label: 'Nama' },
-    { label: 'Rekam Medis' },
-    { label: 'KTP' },
-    { label: 'Tgl Lahir' },
-    { label: 'Umur' },
-    { label: 'JK' },
-    { label: 'Pendidikan' },
-    { label: 'Status' },
-    { label: '' },
+export const config: Config = {
+  cols: [
+    {},
+    {},
+    {},
+    { width: 100 },
+    { width: 120 },
+    {},
+    {},
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    { width: 50 },
   ],
-]
 
-export const keys = [
-  'name',
-  'medicalRecord_number',
-  'identity_number',
-  'birth_date',
-  'patient_age',
-  'gender',
-  'education',
-  'status',
-  'action',
-]
+  headers: [
+    [
+      { label: 'Nama' },
+      { label: 'Rekam Medis' },
+      { label: 'KTP' },
+      { label: 'Tgl Lahir' },
+      { label: 'Umur' },
+      { label: 'JK' },
+      { label: 'Pendidikan' },
+      { label: 'Status' },
+      { label: '' },
+    ],
+  ],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  keys: [
+    'name',
+    'medicalRecord_number',
+    'identity_number',
+    'birth_date',
+    'patient_age',
+    'gender',
+    'education',
+    'status',
+    'action',
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
+    },
+    identity_number: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+        return '(TANPA NIK)'
+      }
+      return recX.identity_number
+    },
+    birth_date: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX.birth_date === 'object' && recX.birth_date) {
+        return (recX.birth_date as Date).toLocaleDateString()
+      } else if (typeof recX.birth_date === 'string') {
+        return recX.birth_date.substring(0, 10)
+      }
+      return recX.birth_date
+    },
+    patient_age: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.birth_date?.split('T')[0]
+    },
+    gender: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX?.gender_code !== 'number' && recX?.gender_code !== '') {
+        return 'Tidak Diketahui'
+      }
+      return recX.gender_code
+    },
+    education: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX.education_code === 'number' && recX.education_code >= 0) {
+        return recX.education_code
+      } else if (typeof recX.education_code) {
+        return recX.education_code
+      }
+      return '-'
+    },
   },
-  identity_number: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (recX.identity_number?.substring(0, 5) === 'BLANK') {
-      return '(TANPA NIK)'
-    }
-    return recX.identity_number
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
   },
-  birth_date: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (typeof recX.birth_date == 'object' && recX.birth_date) {
-      return (recX.birth_date as Date).toLocaleDateString()
-    } else if (typeof recX.birth_date == 'string') {
-      return (recX.birth_date as string).substring(0, 10)
-    }
-    return recX.birth_date
-  },
-  patient_age: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.birth_date?.split('T')[0]
-  },
-  gender: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (typeof recX?.gender_code !== 'number' && recX?.gender_code !== '') {
-      return 'Tidak Diketahui'
-    }
-    return recX.gender_code
-  },
-  education: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (typeof recX.education_code == 'number' && recX.education_code >= 0) {
-      return recX.education_code
-    } else if (typeof recX.education_code) {
-      return recX.education_code
-    }
-    return '-'
-  },
-}
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }
diff --git a/app/components/app/rehab/registration/sep-prosedur/list.vue b/app/components/app/rehab/registration/sep-prosedur/list.vue
index b9a74929..96697bde 100644
--- a/app/components/app/rehab/registration/sep-prosedur/list.vue
+++ b/app/components/app/rehab/registration/sep-prosedur/list.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>
diff --git a/app/components/app/room/list-cfg.ts b/app/components/app/room/list-cfg.ts
index 687d0e2e..409287e5 100644
--- a/app/components/app/room/list-cfg.ts
+++ b/app/components/app/room/list-cfg.ts
@@ -1,56 +1,57 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{}, {}, {}, {}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Lantai' }, { label: '' }]]
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Lantai' },
+      { label: '' },
+    ],
+  ],
 
-export const keys = ['code', 'name', 'parent', 'action']
+  keys: ['code', 'name', 'parent', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  specialist: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.specialist?.name || '-'
+  parses: {
+    specialist: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.specialist?.name || '-'
+    },
+    subspecialist: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.subspecialist?.name || '-'
+    },
+    unit: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.unit?.name || '-'
+    },
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
   },
-  subspecialist: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.subspecialist?.name || '-'
-  },
-  unit: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.unit?.name || '-'
-  },
-  parent: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.parent?.name || '-'
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
   },
+
+  htmls: {},
 }
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {}
diff --git a/app/components/app/room/list.vue b/app/components/app/room/list.vue
index e1b056ce..1be60a60 100644
--- a/app/components/app/room/list.vue
+++ b/app/components/app/room/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
diff --git a/app/components/app/satusehat/list-cfg.ts b/app/components/app/satusehat/list-cfg.ts
index d287a38b..efc3d483 100644
--- a/app/components/app/satusehat/list-cfg.ts
+++ b/app/components/app/satusehat/list-cfg.ts
@@ -1,4 +1,4 @@
-import type { Col, KeyLabel, RecComponent, RecStrFuncComponent, RecStrFuncUnknown, Th } from '../../pub/nav/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
@@ -18,61 +18,61 @@ export const rowStatus = {
 const patientBadge = defineAsyncComponent(() => import('./badge-patient.vue'))
 const statusBadge = defineAsyncComponent(() => import('./badge-status.vue'))
 
-export const cols: Col[] = [
-  { width: 100 },
-  { width: 100 },
-  { width: 100 },
-  { width: 100 },
-  { width: 100 },
-  { width: 100 },
-]
-
-export const header: Th[][] = [
-  [
-    { label: 'ID' },
-    { label: 'Jenis' },
-    { label: 'Pasien' },
-    { label: 'Status' },
-    { label: 'Terakhir Update' },
-    { label: 'FHIR ID' },
+export const config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
   ],
-]
 
-export const keys = ['id', 'resource_type', 'patient', 'status', 'updated_at', 'fhir_id']
+  headers: [
+    [
+      { label: 'ID' },
+      { label: 'Jenis' },
+      { label: 'Pasien' },
+      { label: 'Status' },
+      { label: 'Terakhir Update' },
+      { label: 'FHIR ID' },
+    ],
+  ],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  keys: ['id', 'resource_type', 'patient', 'status', 'updated_at', 'fhir_id'],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
-  },
-}
-
-export const funcComponent: RecStrFuncComponent = {
-  patient(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: patientBadge,
-    }
-    return res
-  },
-  status(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: statusBadge,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
+    },
+  },
+
+  components: {
+    patient(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: patientBadge,
+      }
+    },
+    status(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }
diff --git a/app/components/app/satusehat/list.vue b/app/components/app/satusehat/list.vue
index 3e3fe4cb..58b4f1bd 100644
--- a/app/components/app/satusehat/list.vue
+++ b/app/components/app/satusehat/list.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -7,8 +7,5 @@ defineProps<{
 </script>
 
 <template>
-  <PubMyUiDataTable
-:rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
-    :func-html="funcHtml" :func-component="funcComponent"
-/>
+  <PubMyUiDataTable v-bind="config" :rows="data" />
 </template>
diff --git a/app/components/app/sep/list-cfg.ts b/app/components/app/sep/list-cfg.ts
index 55fa91e1..4a6784fc 100644
--- a/app/components/app/sep/list-cfg.ts
+++ b/app/components/app/sep/list-cfg.ts
@@ -1,78 +1,77 @@
-import type { Col, KeyLabel, RecComponent, RecStrFuncComponent, Th } from '~/components/pub/my-ui/data/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SepDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [
-  { width: 120 }, // TGL. SEP
-  { width: 150 }, // NO. SEP
-  { width: 120 }, // PELAYANAN
-  { width: 100 }, // JALUR
-  { width: 150 }, // NO. RM
-  { width: 200 }, // NAMA PASIEN
-  { width: 150 }, // NO. KARTU BPJS
-  { width: 150 }, // NO. SURAT KONTROL
-  { width: 150 }, // TGL SURAT KONTROL
-  { width: 150 }, // KLINIK TUJUAN
-  { width: 200 }, // DPJP
-  { width: 200 }, // DIAGNOSIS AWAL
-  { width: 100 }, // AKSI
-]
-
-export const header: Th[][] = [
-  [
-    { label: 'TGL. SEP' },
-    { label: 'NO. SEP' },
-    { label: 'PELAYANAN' },
-    { label: 'JALUR' },
-    { label: 'NO. RM' },
-    { label: 'NAMA PASIEN' },
-    { label: 'NO. KARTU BPJS' },
-    { label: 'NO. SURAT KONTROL' },
-    { label: 'TGL SURAT KONTROL' },
-    { label: 'KLINIK TUJUAN' },
-    { label: 'DPJP' },
-    { label: 'DIAGNOSIS AWAL' },
-    { label: 'AKSI' },
+export const config: Config = {
+  cols: [
+    { width: 120 }, // TGL. SEP
+    { width: 150 }, // NO. SEP
+    { width: 120 }, // PELAYANAN
+    { width: 100 }, // JALUR
+    { width: 150 }, // NO. RM
+    { width: 200 }, // NAMA PASIEN
+    { width: 150 }, // NO. KARTU BPJS
+    { width: 150 }, // NO. SURAT KONTROL
+    { width: 150 }, // TGL SURAT KONTROL
+    { width: 150 }, // KLINIK TUJUAN
+    { width: 200 }, // DPJP
+    { width: 200 }, // DIAGNOSIS AWAL
+    { width: 100 }, // AKSI
   ],
-]
 
-export const keys = [
-  'tgl_sep',
-  'no_sep',
-  'pelayanan',
-  'jalur',
-  'no_rm',
-  'nama_pasien',
-  'no_kartu_bpjs',
-  'no_surat_kontrol',
-  'tgl_surat_kontrol',
-  'klinik_tujuan',
-  'dpjp',
-  'diagnosis_awal',
-  'action',
-]
+  headers: [
+    [
+      { label: 'TGL. SEP' },
+      { label: 'NO. SEP' },
+      { label: 'PELAYANAN' },
+      { label: 'JALUR' },
+      { label: 'NO. RM' },
+      { label: 'NAMA PASIEN' },
+      { label: 'NO. KARTU BPJS' },
+      { label: 'NO. SURAT KONTROL' },
+      { label: 'TGL SURAT KONTROL' },
+      { label: 'KLINIK TUJUAN' },
+      { label: 'DPJP' },
+      { label: 'DIAGNOSIS AWAL' },
+      { label: 'AKSI' },
+    ],
+  ],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'no_sep', label: 'NO. SEP' },
-  { key: 'nama_pasien', label: 'Nama Pasien' },
-]
+  keys: [
+    'tgl_sep',
+    'no_sep',
+    'pelayanan',
+    'jalur',
+    'no_rm',
+    'nama_pasien',
+    'no_kartu_bpjs',
+    'no_surat_kontrol',
+    'tgl_surat_kontrol',
+    'klinik_tujuan',
+    'dpjp',
+    'diagnosis_awal',
+    'action',
+  ],
 
-export const funcParsed: Record<string, (row: any, ...args: any[]) => any> = {
+  delKeyNames: [
+    { key: 'no_sep', label: 'NO. SEP' },
+    { key: 'nama_pasien', label: 'Nama Pasien' },
+  ],
 
-}
+  parses: {},
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
   },
-}
 
-export const funcHtml: Record<string, (row: any, ...args: any[]) => any> = {}
+  htmls: {},
+}
diff --git a/app/components/app/sep/list.vue b/app/components/app/sep/list.vue
index abf68e25..f44166e2 100644
--- a/app/components/app/sep/list.vue
+++ b/app/components/app/sep/list.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, header, keys, funcParsed, funcComponent, funcHtml } from './list-cfg'
+import { config } from './list-cfg'
 
 interface SepData {
   tgl_sep: string
@@ -23,12 +23,7 @@ const props = defineProps<{
 
 <template>
   <PubMyUiDataTable
-    :cols="cols"
-    :header="header"
-    :keys="keys"
+    v-bind="config"
     :rows="props.data"
-    :funcParsed="funcParsed"
-    :funcComponent="funcComponent"
-    :funcHtml="funcHtml"
   />
 </template>
diff --git a/app/components/app/soapi/list-cfg.ts b/app/components/app/soapi/list-cfg.ts
index 460cacd9..6fa11bda 100644
--- a/app/components/app/soapi/list-cfg.ts
+++ b/app/components/app/soapi/list-cfg.ts
@@ -1,119 +1,113 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [
-  {},
-  {},
-  {},
-  { width: 100 },
-  { width: 120 },
-  {},
-  {},
-  {},
-  { width: 100 },
-  { width: 100 },
-  {},
-  { width: 50 },
-]
-
-export const header: Th[][] = [
-  [
-    { label: 'Nama' },
-    { label: 'Rekam Medis' },
-    { label: 'KTP' },
-    { label: 'Tgl Lahir' },
-    { label: 'Umur' },
-    { label: 'JK' },
-    { label: 'Pendidikan' },
-    { label: 'Status' },
-    { label: '' },
+export const config: Config = {
+  cols: [
+    {},
+    {},
+    {},
+    { width: 100 },
+    { width: 120 },
+    {},
+    {},
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    { width: 50 },
   ],
-]
 
-export const keys = [
-  'name',
-  'medicalRecord_number',
-  'identity_number',
-  'birth_date',
-  'patient_age',
-  'gender',
-  'education',
-  'status',
-  'action',
-]
+  headers: [
+    [
+      { label: 'Nama' },
+      { label: 'Rekam Medis' },
+      { label: 'KTP' },
+      { label: 'Tgl Lahir' },
+      { label: 'Umur' },
+      { label: 'JK' },
+      { label: 'Pendidikan' },
+      { label: 'Status' },
+      { label: '' },
+    ],
+  ],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  keys: [
+    'name',
+    'medicalRecord_number',
+    'identity_number',
+    'birth_date',
+    'patient_age',
+    'gender',
+    'education',
+    'status',
+    'action',
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
+    },
+    identity_number: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+        return '(TANPA NIK)'
+      }
+      return recX.identity_number
+    },
+    birth_date: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX.birth_date === 'object' && recX.birth_date) {
+        return (recX.birth_date as Date).toLocaleDateString()
+      } else if (typeof recX.birth_date === 'string') {
+        return recX.birth_date.substring(0, 10)
+      }
+      return recX.birth_date
+    },
+    patient_age: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.birth_date?.split('T')[0]
+    },
+    gender: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX?.gender_code !== 'number' && recX?.gender_code !== '') {
+        return 'Tidak Diketahui'
+      }
+      return recX.gender_code
+    },
+    education: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX.education_code === 'number' && recX.education_code >= 0) {
+        return recX.education_code
+      } else if (typeof recX.education_code !== 'undefined') {
+        return recX.education_code
+      }
+      return '-'
+    },
   },
-  identity_number: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (recX.identity_number?.substring(0, 5) === 'BLANK') {
-      return '(TANPA NIK)'
-    }
-    return recX.identity_number
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
   },
-  birth_date: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (typeof recX.birth_date == 'object' && recX.birth_date) {
-      return (recX.birth_date as Date).toLocaleDateString()
-    } else if (typeof recX.birth_date == 'string') {
-      return (recX.birth_date as string).substring(0, 10)
-    }
-    return recX.birth_date
-  },
-  patient_age: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.birth_date?.split('T')[0]
-  },
-  gender: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (typeof recX?.gender_code !== 'number' && recX?.gender_code !== '') {
-      return 'Tidak Diketahui'
-    }
-    return recX.gender_code
-  },
-  education: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (typeof recX.education_code == 'number' && recX.education_code >= 0) {
-      return recX.education_code
-    } else if (typeof recX.education_code) {
-      return recX.education_code
-    }
-    return '-'
-  },
-}
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }
diff --git a/app/components/app/soapi/list.vue b/app/components/app/soapi/list.vue
index b9a74929..96697bde 100644
--- a/app/components/app/soapi/list.vue
+++ b/app/components/app/soapi/list.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>
diff --git a/app/components/app/specialist/list-cfg.ts b/app/components/app/specialist/list-cfg.ts
index f1ccbd25..8ed75f28 100644
--- a/app/components/app/specialist/list-cfg.ts
+++ b/app/components/app/specialist/list-cfg.ts
@@ -1,48 +1,49 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{}, {}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Unit' }, { label: '' }]]
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Unit' },
+      { label: '' },
+    ],
+  ],
 
-export const keys = ['code', 'name', 'unit', 'action']
+  keys: ['code', 'name', 'unit', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.name}`.trim()
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.name}`.trim()
+    },
+    unit: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.unit_id || '-'
+    },
   },
-  unit: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.unit_id || '-'
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
   },
+
+  htmls: {},
 }
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {}
diff --git a/app/components/app/specialist/list.vue b/app/components/app/specialist/list.vue
index e1b056ce..1be60a60 100644
--- a/app/components/app/specialist/list.vue
+++ b/app/components/app/specialist/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
diff --git a/app/components/app/subspecialist/list-cfg.ts b/app/components/app/subspecialist/list-cfg.ts
index f9af020e..7e9e7b79 100644
--- a/app/components/app/subspecialist/list-cfg.ts
+++ b/app/components/app/subspecialist/list-cfg.ts
@@ -1,48 +1,49 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{}, {}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Specialis' }, { label: '' }]]
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Specialis' },
+      { label: '' },
+    ],
+  ],
 
-export const keys = ['code', 'name', 'specialist', 'action']
+  keys: ['code', 'name', 'specialist', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.name}`.trim()
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.name}`.trim()
+    },
+    specialist: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.specialist_id || '-'
+    },
   },
-  specialist: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.specialist_id || '-'
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
   },
+
+  htmls: {},
 }
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {}
diff --git a/app/components/app/subspecialist/list.vue b/app/components/app/subspecialist/list.vue
index e1b056ce..1be60a60 100644
--- a/app/components/app/subspecialist/list.vue
+++ b/app/components/app/subspecialist/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
diff --git a/app/components/app/tools/list-cfg.ts b/app/components/app/tools/list-cfg.ts
index 53dac06d..bdafd346 100644
--- a/app/components/app/tools/list-cfg.ts
+++ b/app/components/app/tools/list-cfg.ts
@@ -1,48 +1,54 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{ width: 100 }, { width: 250 }, { width: 100 }, { width: 50 }]
+export const config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 250 },
+    { width: 100 },
+    { width: 50 },
+  ],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Satuan' }, { label: '' }]]
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Satuan' },
+      { label: '' },
+    ],
+  ],
 
-export const keys = ['code', 'name', 'uom_code', 'action']
+  keys: ['code', 'name', 'uom_code', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: Record<string, (row: any, ...args: any[]) => any> = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.name}`.trim()
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.name}`.trim()
+    },
+    uom_code: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.uom_code
+    },
   },
-  uom_code: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.uom_code
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
   },
+
+  htmls: {},
 }
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-}
-
-export const funcHtml: Record<string, (row: any, ...args: any[]) => any> = {}
diff --git a/app/components/app/tools/list.vue b/app/components/app/tools/list.vue
index 3af2b398..e4544c2f 100644
--- a/app/components/app/tools/list.vue
+++ b/app/components/app/tools/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>
diff --git a/app/components/app/unit/list-cfg.ts b/app/components/app/unit/list-cfg.ts
index 04975ddc..e3ab9b55 100644
--- a/app/components/app/unit/list-cfg.ts
+++ b/app/components/app/unit/list-cfg.ts
@@ -1,48 +1,49 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{}, {}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Instalasi' }, { label: '' }]]
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Instalasi' },
+      { label: '' },
+    ],
+  ],
 
-export const keys = ['code', 'name', 'installation', 'action']
+  keys: ['code', 'name', 'installation', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.name}`.trim()
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.name}`.trim()
+    },
+    installation: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.installation?.name || recX.Installation?.name || '-'
+    },
   },
-  installation: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.installation?.name || recX.Installation?.name || '-'
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
   },
+
+  htmls: {},
 }
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {}
diff --git a/app/components/app/unit/list.vue b/app/components/app/unit/list.vue
index e1b056ce..1be60a60 100644
--- a/app/components/app/unit/list.vue
+++ b/app/components/app/unit/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
diff --git a/app/components/app/uom/list-cfg.ts b/app/components/app/uom/list-cfg.ts
index c26856bf..a2d4e648 100644
--- a/app/components/app/uom/list-cfg.ts
+++ b/app/components/app/uom/list-cfg.ts
@@ -1,11 +1,4 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
@@ -15,32 +8,39 @@ const _doctorStatus = {
   1: 'Aktif',
 }
 
-export const cols: Col[] = [{}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Aksi' }]]
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Aksi' },
+    ],
+  ],
 
-export const keys = ['code', 'name', 'action']
+  keys: ['code', 'name', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {}
+  parses: {},
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }
diff --git a/app/components/app/uom/list.vue b/app/components/app/uom/list.vue
index 3af2b398..618c70c1 100644
--- a/app/components/app/uom/list.vue
+++ b/app/components/app/uom/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,14 +27,9 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
-    />
+      />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>
 </template>
diff --git a/app/components/app/user/list-cfg.ts b/app/components/app/user/list-cfg.ts
index 69ee9962..f5ddf667 100644
--- a/app/components/app/user/list-cfg.ts
+++ b/app/components/app/user/list-cfg.ts
@@ -1,11 +1,4 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
@@ -17,93 +10,94 @@ const doctorStatus = {
   1: 'Aktif',
 }
 
-export const cols: Col[] = [
-  { width: 100 },
-  { width: 250 },
-  {},
-  { width: 100 },
-  { width: 100 },
-  {},
-  {},
-  {},
-  { width: 100 },
-  { width: 100 },
-  { width: 100 },
-  { width: 50 },
-]
-
-export const header: Th[][] = [
-  [
-    { label: 'Kode JKN' },
-    { label: 'Nama' },
-    { label: 'No KTP' },
-    { label: 'No SIP' },
-    { label: 'No IHS' },
-    { label: 'Telpon' },
-    { label: 'Fee Ranap' },
-    { label: 'Fee Rajal' },
-    { label: 'Status' },
+export const config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 250 },
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    {},
+    {},
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 50 },
   ],
-]
 
-export const keys = [
-  'bpjs_code',
-  'name',
-  'identity_number',
-  'sip_no',
-  'ihs_number',
-  'phone',
-  'inPatient_itemPrice',
-  'outPatient_itemPrice',
-  'status',
-  'action',
-]
+  headers: [
+    [
+      { label: 'Kode JKN' },
+      { label: 'Nama' },
+      { label: 'No KTP' },
+      { label: 'No SIP' },
+      { label: 'No IHS' },
+      { label: 'Telpon' },
+      { label: 'Fee Ranap' },
+      { label: 'Fee Rajal' },
+      { label: 'Status' },
+    ],
+  ],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  keys: [
+    'bpjs_code',
+    'name',
+    'identity_number',
+    'sip_no',
+    'ihs_number',
+    'phone',
+    'inPatient_itemPrice',
+    'outPatient_itemPrice',
+    'status',
+    'action',
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    console.log(rec)
-    const recX = rec as SmallDetailDto
-    return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      console.log(rec)
+      const recX = rec as SmallDetailDto
+      return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+    },
+    identity_number: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+        return '(TANPA NIK)'
+      }
+      return recX.identity_number
+    },
+    inPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
+    },
+    outPatient_itemPrice: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
+    },
+    status: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return doctorStatus[recX.status_code as keyof typeof doctorStatus]
+    },
   },
-  identity_number: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (recX.identity_number?.substring(0, 5) === 'BLANK') {
-      return '(TANPA NIK)'
-    }
-    return recX.identity_number
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
   },
-  inPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
-  },
-  outPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
-  },
-  status: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return doctorStatus[recX.status_code as keyof typeof doctorStatus]
-  },
-}
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }
diff --git a/app/components/app/user/list.vue b/app/components/app/user/list.vue
index b9a74929..96697bde 100644
--- a/app/components/app/user/list.vue
+++ b/app/components/app/user/list.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>
diff --git a/app/components/app/warehouse/list-cfg.ts b/app/components/app/warehouse/list-cfg.ts
index 0669b99b..04ceca04 100644
--- a/app/components/app/warehouse/list-cfg.ts
+++ b/app/components/app/warehouse/list-cfg.ts
@@ -1,44 +1,45 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{}, {}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Lantai' }, { label: '' }]]
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Lantai' },
+      { label: '' },
+    ],
+  ],
 
-export const keys = ['code', 'name', 'parent', 'action']
+  keys: ['code', 'name', 'parent', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  parent: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.parent?.name || '-'
+  parses: {
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
   },
-}
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
   },
-}
 
-export const funcHtml: RecStrFuncUnknown = {}
+  htmls: {},
+}
diff --git a/app/components/app/warehouse/list.vue b/app/components/app/warehouse/list.vue
index e1b056ce..1be60a60 100644
--- a/app/components/app/warehouse/list.vue
+++ b/app/components/app/warehouse/list.vue
@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
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 883273b7..5fbd8b36 100644
--- a/app/components/pub/my-ui/data-table/data-table.vue
+++ b/app/components/pub/my-ui/data-table/data-table.vue
@@ -1,21 +1,10 @@
 <script setup lang="ts">
-import type { DataTableLoader } from './type'
-import type { Col, RecStrFuncComponent, RecStrFuncUnknown, Th } from '~/components/pub/my-ui/data/types'
+import type { DataTableLoader } from '~/components/pub/my-ui/data/types'
+import type { Config } from './index'
 import { Info } from 'lucide-vue-next'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '~/components/pub/ui/table'
 
-const props = defineProps<{
-  skeletonSize?: number
-  rows: unknown[]
-  cols: Col[]
-  header: Th[][]
-  keys: string[]
-  funcParsed?: RecStrFuncUnknown
-  funcHtml?: RecStrFuncUnknown
-  funcComponent?: RecStrFuncComponent
-  selectMode?: 'single' | 'multiple'
-  modelValue?: any[] | any
-}>()
+const props = defineProps<Config & { rows: unknown[] }>()
 
 const emit = defineEmits<{
   (e: 'update:modelValue', val: any[] | any): void
@@ -62,10 +51,10 @@ function handleActionCellClick(event: Event, _cellRef: string) {
 
 <template>
   <Table>
-    <TableHeader class="bg-gray-50 dark:bg-gray-800">
+    <TableHeader v-if="headers" class="bg-gray-50 dark:bg-gray-800">
       <TableRow>
         <TableHead
-          v-for="(h, idx) in header[0]"
+          v-for="(h, idx) in headers[0]"
           :key="`head-${idx}`"
           class="border"
           :style="{ width: cols[idx]?.width ? `${cols[idx].width}px` : undefined }"
@@ -75,7 +64,7 @@ function handleActionCellClick(event: Event, _cellRef: string) {
       </TableRow>
     </TableHeader>
 
-    <TableBody v-if="loader.isTableLoading">
+    <TableBody v-if="loader?.isTableLoading">
       <!-- Loading state with 5 skeleton rows -->
       <TableRow v-for="n in getSkeletonSize" :key="`skeleton-${n}`">
         <TableCell v-for="(key, cellIndex) in keys" :key="`cell-skel-${n}-${cellIndex}`" class="border">
@@ -118,16 +107,16 @@ function handleActionCellClick(event: Event, _cellRef: string) {
         <TableCell v-for="(key, cellIndex) in keys" :key="`cell-${rowIndex}-${cellIndex}`" class="border">
           <!-- existing cell renderer -->
           <component
-            :is="funcComponent?.[key]?.(row, rowIndex).component"
-            v-if="funcComponent?.[key]"
+            :is="components?.[key]?.(row, rowIndex).component"
+            v-if="components?.[key]"
             :rec="row"
             :idx="rowIndex"
-            v-bind="funcComponent[key]?.(row, rowIndex).props"
+            v-bind="components[key]?.(row, rowIndex).props"
           />
           <template v-else>
-            <div v-if="funcHtml?.[key]" v-html="funcHtml?.[key]?.(row, rowIndex)"></div>
+            <div v-if="htmls?.[key]" v-html="htmls?.[key]?.(row, rowIndex)"></div>
             <template v-else>
-              {{ funcParsed?.[key]?.(row, rowIndex) ?? (row as any)[key] }}
+              {{ parses?.[key]?.(row, rowIndex) ?? (row as any)[key] }}
             </template>
           </template>
         </TableCell>
diff --git a/app/components/pub/my-ui/data-table/index.ts b/app/components/pub/my-ui/data-table/index.ts
new file mode 100644
index 00000000..69a90dbc
--- /dev/null
+++ b/app/components/pub/my-ui/data-table/index.ts
@@ -0,0 +1,3 @@
+export * from './type'
+
+export { default as DataTable } from './data-table.vue'
diff --git a/app/components/pub/my-ui/data-table/type.ts b/app/components/pub/my-ui/data-table/type.ts
index 019bb037..d7e7f611 100644
--- a/app/components/pub/my-ui/data-table/type.ts
+++ b/app/components/pub/my-ui/data-table/type.ts
@@ -1,3 +1,59 @@
+export type ComponentType = Component
+
+export interface Col {
+  span?: number
+  classVal?: string
+  style?: string
+  width?: number // specific for width
+  widthUnit?: string // specific for width
+}
+
+export interface Th {
+  label: string
+  colSpan?: number
+  rowSpan?: number
+  classVal?: string
+  childClassVal?: string
+  style?: string
+  childStyle?: string
+  hideOnSm?: boolean
+}
+
+export interface KeyLabel {
+  key: string
+  label: string
+}
+
+export interface RecComponent {
+  idx?: number
+  rec: object
+  props?: any
+  component: ComponentType
+}
+
+export type FuncRecUnknown = (rec: unknown, idx: number) => unknown
+export type FuncComponent = (rec: unknown, idx: number) => RecComponent
+export type RecStrFuncUnknown = Record<string, FuncRecUnknown>
+export type RecStrFuncComponent = Record<string, FuncComponent>
+
+export interface KeyNames {
+  key: string
+  label: string
+}
+
+export type Config = {
+  headers?: Th[][]
+  cols: Col[]
+  keys: string[]
+  delKeyNames?: KeyLabel[]
+  parses?: RecStrFuncUnknown
+  components?: RecStrFuncComponent
+  htmls?: RecStrFuncUnknown
+  skeletonSize?: number
+  selectMode?: 'single' | 'multiple'
+  modelValue?: any[] | any
+}
+
 export interface DataTableLoader {
   isTableLoading: boolean
   [key: string]: boolean
diff --git a/app/components/pub/my-ui/data/types.ts b/app/components/pub/my-ui/data/types.ts
index 7c63d991..c0d283de 100644
--- a/app/components/pub/my-ui/data/types.ts
+++ b/app/components/pub/my-ui/data/types.ts
@@ -9,32 +9,6 @@ export interface ListItemDto {
 
 export type ComponentType = Component
 
-export interface RecComponent {
-  idx?: number
-  rec: object
-  props?: any
-  component: ComponentType
-}
-
-export interface Col {
-  span?: number
-  classVal?: string
-  style?: string
-  width?: number // specific for width
-  widthUnit?: string // specific for width
-}
-
-export interface Th {
-  label: string
-  colSpan?: number
-  rowSpan?: number
-  classVal?: string
-  childClassVal?: string
-  style?: string
-  childStyle?: string
-  hideOnSm?: boolean
-}
-
 export interface ButtonNav {
   variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
   classVal?: string
@@ -82,10 +56,6 @@ export interface KeyLabel {
   key: string
   label: string
 }
-export type FuncRecUnknown = (rec: unknown, idx: number) => unknown
-export type FuncComponent = (rec: unknown, idx: number) => RecComponent
-export type RecStrFuncUnknown = Record<string, FuncRecUnknown>
-export type RecStrFuncComponent = Record<string, FuncComponent>
 
 export interface KeyNames {
   key: string
@@ -107,3 +77,8 @@ export const ActionEvents = {
   showDetail: 'showDetail',
   showProcess: 'showProcess',
 }
+
+export interface DataTableLoader {
+  isTableLoading: boolean
+  [key: string]: boolean
+}

From 1a5427cf5553080e1fd15570487dea5b6385e5ea Mon Sep 17 00:00:00 2001
From: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date: Wed, 15 Oct 2025 07:56:35 +0700
Subject: [PATCH 3/4] dev: hotfix, chore on .vscode dir

---
 .vscode/launch.json | 15 ---------------
 1 file changed, 15 deletions(-)
 delete mode 100644 .vscode/launch.json

diff --git a/.vscode/launch.json b/.vscode/launch.json
deleted file mode 100644
index 4b1147d4..00000000
--- a/.vscode/launch.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  // Use IntelliSense to learn about possible attributes.
-  // Hover to view descriptions of existing attributes.
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "type": "chrome",
-      "request": "launch",
-      "name": "Launch Chrome against localhost",
-      "url": "http://localhost:3000",
-      "webRoot": "${workspaceFolder}"
-    }
-  ]
-}

From 1cae6de4180e58b079c388d7007cca0526281f86 Mon Sep 17 00:00:00 2001
From: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date: Wed, 15 Oct 2025 07:57:43 +0700
Subject: [PATCH 4/4] dev: chore, update .gitgnore

---
 .gitignore | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.gitignore b/.gitignore
index 4a7f73a2..5bdfc11f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,5 @@ logs
 .env
 .env.*
 !.env.example
+
+.vscode
\ No newline at end of file