add tanstack table to apps/rank

.vscode/settings.json

@@ -32,6 +32,7 @@
         "rehype",
         "supersub",
         "tailwindcss",
+        "tanstack",
         "tsup",
         "Turborepo",
         "umami",

apps/rank/package.json

@@ -15,6 +15,7 @@
         "@nuxtjs/google-fonts": "3.2.0",
         "@pompydev/prettier-config": "workspace:*",
         "@pompydev/tailwind-config": "workspace:*",
+        "@tanstack/vue-table": "8.21.2",
         "nuxt": "3.16.0",
         "vue": "3.5.13",
         "vue-router": "4.5.0"

apps/rank/pages/content-creators.vue

@@ -1,10 +1,87 @@
 <script setup lang="ts">
+import {
+    FlexRender,
+    getCoreRowModel,
+    useVueTable,
+    createColumnHelper,
+} from "@tanstack/vue-table"
+
 useHead({
     title: "Content creators",
 })
+
+type ContentCreator = {
+    channelId: string
+    name: string
+    subscribers: number
+}
+const _contentCreators: ContentCreator[] = [
+    {
+        channelId: "asdf",
+        name: "Channel A",
+        subscribers: 9999,
+    },
+]
+
+const columnHelper = createColumnHelper<ContentCreator>()
+const contentCreators = ref(_contentCreators)
+const t = useVueTable({
+    get data() {
+        return contentCreators.value
+    },
+    columns: [
+        columnHelper.accessor("name", {
+            id: "channelId",
+            header: "Name",
+        }),
+        columnHelper.accessor("subscribers", {
+            header: "Subscribers",
+        }),
+    ],
+    getCoreRowModel: getCoreRowModel(),
+})
 </script>
 
 <template>
     <h1 class="text-4xl font-black">Content creators ranking</h1>
     <NuxtLink href="/" class="underline">Back</NuxtLink>
+    <div class="p-2">
+        <table class="border">
+            <thead>
+                <tr
+                    class="border"
+                    v-for="headerGroup in t.getHeaderGroups()"
+                    :key="headerGroup.id"
+                >
+                    <th
+                        class="border p-1"
+                        v-for="header in headerGroup.headers"
+                        :key="header.id"
+                        :colSpan="header.colSpan"
+                    >
+                        <FlexRender
+                            v-if="!header.isPlaceholder"
+                            :render="header.column.columnDef.header"
+                            :props="header.getContext()"
+                        />
+                    </th>
+                </tr>
+            </thead>
+
+            <tbody class="border">
+                <tr v-for="row in t.getRowModel().rows" :key="row.id">
+                    <td
+                        class="border p-1"
+                        v-for="cell in row.getVisibleCells()"
+                        :key="cell.id"
+                    >
+                        <FlexRender
+                            :render="cell.column.columnDef.cell"
+                            :props="cell.getContext()"
+                        />
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
 </template>

pnpm-lock.yaml

@@ -167,6 +167,9 @@ importers:
       '@pompydev/tailwind-config':
         specifier: workspace:*
         version: link:../../packages/tailwind-config
+      '@tanstack/vue-table':
+        specifier: 8.21.2
+        version: 8.21.2(vue@3.5.13(typescript@5.4.5))
       nuxt:
         specifier: 3.16.0
         version: 3.16.0(@parcel/watcher@2.5.1)(@types/node@20.12.7)(db0@0.3.1)(eslint@8.56.0)(ioredis@5.6.0)(magicast@0.3.5)(optionator@0.9.3)(rollup@4.35.0)(sass@1.75.0)(terser@5.39.0)(typescript@5.4.5)(vite@6.2.2(@types/node@20.12.7)(jiti@2.4.2)(sass@1.75.0)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)
@@ -2096,6 +2099,16 @@ packages:
   '@swc/helpers@0.5.5':
     resolution: {integrity: sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==}
 
+  '@tanstack/table-core@8.21.2':
+    resolution: {integrity: sha512-uvXk/U4cBiFMxt+p9/G7yUWI/UbHYbyghLCjlpWZ3mLeIZiUBSKcUnw9UnKkdRz7Z/N4UBuFLWQdJCjUe7HjvA==}
+    engines: {node: '>=12'}
+
+  '@tanstack/vue-table@8.21.2':
+    resolution: {integrity: sha512-KBgOWxha/x4m1EdhVWxOpqHb661UjqAxzPcmXR3QiA7aShZ547x19Gw0UJX9we+m+tVcPuLRZ61JsYW47QZFfQ==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      vue: '>=3.2'
+
   '@tokenizer/token@0.3.0':
     resolution: {integrity: sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A==}
 
@@ -9337,6 +9350,13 @@ snapshots:
       '@swc/counter': 0.1.3
       tslib: 2.6.2
 
+  '@tanstack/table-core@8.21.2': {}
+
+  '@tanstack/vue-table@8.21.2(vue@3.5.13(typescript@5.4.5))':
+    dependencies:
+      '@tanstack/table-core': 8.21.2
+      vue: 3.5.13(typescript@5.4.5)
+
   '@tokenizer/token@0.3.0': {}
 
   '@trysound/sax@0.2.0': {}