feat: table

Author: Barbapapazes

packages/.playground/src/pages/components/table.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import { useColor } from '@/app/composables/useColor'
+import Table from '@/ui/components/Table/Table.vue'
+import { ref } from 'vue'
+
+const { color } = useColor()
+
+const data = ref([
+  {
+    id: '4600',
+    date: '2024-03-11T15:30:00',
+    status: 'paid',
+    email: 'james.anderson@example.com',
+    amount: 594,
+  },
+  {
+    id: '4599',
+    date: '2024-03-11T10:10:00',
+    status: 'failed',
+    email: 'mia.white@example.com',
+    amount: 276,
+  },
+  {
+    id: '4598',
+    date: '2024-03-11T08:50:00',
+    status: 'refunded',
+    email: 'william.brown@example.com',
+    amount: 315,
+  },
+  {
+    id: '4597',
+    date: '2024-03-10T19:45:00',
+    status: 'paid',
+    email: 'emma.davis@example.com',
+    amount: 529,
+  },
+  {
+    id: '4596',
+    date: '2024-03-10T15:55:00',
+    status: 'paid',
+    email: 'ethan.harris@example.com',
+    amount: 639,
+  },
+])
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <Table :data="data" :loading-color="color" class="flex-1" />
+
+    <Table :data="data" :loading="true" :loading-color="color" class="flex-1" />
+  </div>
+</template>