diff --git a/app/components/app/patient/list.vue b/app/components/app/patient/list.vue
index 3267842c..beba372c 100644
--- a/app/components/app/patient/list.vue
+++ b/app/components/app/patient/list.vue
@@ -7,7 +7,7 @@ defineProps<{
 </script>
 
 <template>
-  <PubNavDataTable
+  <PubBaseDataTable
     :rows="data"
     :cols="cols"
     :header="header"
diff --git a/app/components/pub/base/data-table.vue b/app/components/pub/base/data-table.vue
new file mode 100644
index 00000000..983559b8
--- /dev/null
+++ b/app/components/pub/base/data-table.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '~/components/pub/ui/table'
+
+defineProps<{
+  rows: unknown[]
+  cols: object
+  header: object[]
+  keys: string[]
+  funcParsed: object
+  funcHtml: object
+  funcComponent: object
+}>()
+</script>
+
+<template>
+  <Table>
+    <TableHeader>
+      <TableRow>
+        <TableHead
+          v-for="(h, idx) in header[0]"
+          :key="`head-${idx}`"
+          :style="{ width: cols[idx]?.width ? `${cols[idx].width}px` : undefined }"
+        >
+          {{ h.label }}
+        </TableHead>
+      </TableRow>
+    </TableHeader>
+
+    <TableBody>
+      <TableRow v-for="(row, rowIndex) in rows" :key="`row-${rowIndex}`">
+        <TableCell v-for="(key, cellIndex) in keys" :key="`cell-${rowIndex}-${cellIndex}`">
+          <!-- If funcComponent has a renderer -->
+          <component
+            :is="funcComponent[key](row, rowIndex).component"
+            v-if="funcComponent[key]"
+            v-bind="funcComponent[key](row, rowIndex)"
+          />
+          <!-- If funcParsed or funcHtml returns a value -->
+          <template v-else>
+            {{ funcParsed[key]?.(row) ?? funcHtml[key]?.(row) ?? row[key] }}
+          </template>
+        </TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+</template>