feat: table (#192)

Author: Barbapapazes

package.json

@@ -11,6 +11,8 @@
     "docs:preview": "vitepress preview packages"
   },
   "dependencies": {
+    "@tanstack/table-core": "^8.21.3",
+    "@tanstack/vue-table": "^8.21.3",
     "@vueuse/core": "^13.1.0",
     "@vueuse/integrations": "^13.1.0",
     "@vueuse/shared": "^13.1.0",

packages/.playground/package.json

@@ -8,8 +8,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tanstack/table-core": "^8.21.3",
+    "@tanstack/vue-table": "^8.21.3",
     "@vueuse/integrations": "^13.1.0",
     "fuse.js": "^7.1.0",
+    "scule": "^1.3.0",
     "tailwindcss": "^4.1.4",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"

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>