dev: hotfix, cleaning data-table

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 = {}

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" />