table complete

app/pages/dashboard.vue

@@ -1,4 +1,7 @@
 <script lang="ts" setup>
+import type { TableColumn } from "@nuxt/ui"
+import { h, resolveComponent } from 'vue'
+
   definePageMeta({
     layout: "dashboard"
   });
@@ -23,7 +26,16 @@
     },
 
   ];
-  const table_demo = ref([
+  // create the object itself
+  type Payment = {
+    id: string,
+    date: string,
+    status: string,
+    email: string,
+    amount: number
+
+  }
+  const table_demo = ref<Payment[]>([
     {
       id: '4600',
       date: '2024-03-11T15:30:00',
@@ -61,6 +73,51 @@
     }
   ])
 
+  const table_headers: TableColumn<Payment>[] = [
+    {
+      accessorKey: 'id',
+      header: "ID",
+      cell: ({ row }) => `#${row.getValue('id')}`
+    },
+    {
+      accessorKey: 'date',
+      header: "Date",
+      cell: ({ row }) => {
+        return new Date(row.getValue('date')).toLocaleString("pt-PT",{
+          day: "numeric",
+          month: "short",
+          hour: "2-digit",
+          minute: "2-digit",
+          hour12: false
+        })
+      }
+    },
+    {
+      accessorKey: 'status',
+      header: "Status",
+      cell: ({row}) => {
+        let color = "";
+        switch(row.getValue('status')){
+          case "paid":
+            color = "success"; break;
+          case "failed":
+            color = "error"; break;
+          case "refunded":
+            color = "warning"; break;
+          default:
+            color = "neutral";
+        }
+        return h(UBadge, { class: "capitalize", variant: "subtle", color },
+            () => row.getValue("status"))
+        }
+    },
+    {
+      accessorKey: 'amount',
+      header: "Ammount",
+      cell: ({ row }) => { return "€" + row.getValue('amount') }
+    }
+  ]
+
 </script>
 
 <template>
@@ -87,7 +144,7 @@
       </UPageGrid>
 
 
-    <UTable :data="table_demo"/>
+    <UTable :data="table_demo" :columns="table_headers"/>
   </UContainer>
 </template>