Add basic table implementations

package-lock.json

@@ -8,6 +8,9 @@
       "name": "vue-playground",
       "version": "0.0.0",
       "dependencies": {
+        "@tanstack/vue-table": "^8.7.6",
+        "ag-grid-community": "^29.0.0",
+        "ag-grid-vue3": "^29.0.0",
         "vue": "^3.2.45",
         "vue-router": "^4.1.6"
       },
@@ -1021,6 +1024,36 @@
       "integrity": "sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==",
       "dev": true
     },
+    "node_modules/@tanstack/table-core": {
+      "version": "8.7.6",
+      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.7.6.tgz",
+      "integrity": "sha512-sqiNTMzB6cpyL8DFH6/VqW48SwiflLqxQqYpo2wNock7rdVGvlm0BLNI8vZUJbr1+fmmWmHwBvi5OMgZw8n1DA==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/vue-table": {
+      "version": "8.7.6",
+      "resolved": "https://registry.npmjs.org/@tanstack/vue-table/-/vue-table-8.7.6.tgz",
+      "integrity": "sha512-D8hebMzp96W0zVRe8l2yvudb3UncpgQEPvvhf35ZtLR1BcnxlImwjUnVTVIqtOXs8vG0HaqssCO799tX9k87Hw==",
+      "dependencies": {
+        "@tanstack/table-core": "8.7.6"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.33"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -1741,6 +1774,20 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/ag-grid-community": {
+      "version": "29.0.0",
+      "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-29.0.0.tgz",
+      "integrity": "sha512-onAQIqjhP1L93W5myAsfLBMBUyZPrWDb8FRulJuhjQKo8DEA4GSZ+oJHxwwLymm4biLu54zvZ+9GkTftha8gAg=="
+    },
+    "node_modules/ag-grid-vue3": {
+      "version": "29.0.0",
+      "resolved": "https://registry.npmjs.org/ag-grid-vue3/-/ag-grid-vue3-29.0.0.tgz",
+      "integrity": "sha512-2X2B/PbRojoSbTQpjvThPtOsnc9K53HoG8M+fjQK3LEL7Xv0g3MRHuQ9pp0W6nqe73n+pH2YgM6yjI++zf4kpg==",
+      "dependencies": {
+        "ag-grid-community": "~29.0.0",
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -6582,6 +6629,19 @@
       "integrity": "sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==",
       "dev": true
     },
+    "@tanstack/table-core": {
+      "version": "8.7.6",
+      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.7.6.tgz",
+      "integrity": "sha512-sqiNTMzB6cpyL8DFH6/VqW48SwiflLqxQqYpo2wNock7rdVGvlm0BLNI8vZUJbr1+fmmWmHwBvi5OMgZw8n1DA=="
+    },
+    "@tanstack/vue-table": {
+      "version": "8.7.6",
+      "resolved": "https://registry.npmjs.org/@tanstack/vue-table/-/vue-table-8.7.6.tgz",
+      "integrity": "sha512-D8hebMzp96W0zVRe8l2yvudb3UncpgQEPvvhf35ZtLR1BcnxlImwjUnVTVIqtOXs8vG0HaqssCO799tX9k87Hw==",
+      "requires": {
+        "@tanstack/table-core": "8.7.6"
+      }
+    },
     "@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -7128,6 +7188,20 @@
       "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
       "dev": true
     },
+    "ag-grid-community": {
+      "version": "29.0.0",
+      "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-29.0.0.tgz",
+      "integrity": "sha512-onAQIqjhP1L93W5myAsfLBMBUyZPrWDb8FRulJuhjQKo8DEA4GSZ+oJHxwwLymm4biLu54zvZ+9GkTftha8gAg=="
+    },
+    "ag-grid-vue3": {
+      "version": "29.0.0",
+      "resolved": "https://registry.npmjs.org/ag-grid-vue3/-/ag-grid-vue3-29.0.0.tgz",
+      "integrity": "sha512-2X2B/PbRojoSbTQpjvThPtOsnc9K53HoG8M+fjQK3LEL7Xv0g3MRHuQ9pp0W6nqe73n+pH2YgM6yjI++zf4kpg==",
+      "requires": {
+        "ag-grid-community": "~29.0.0",
+        "vue": "^3.0.0"
+      }
+    },
     "agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",

package.json

@@ -13,6 +13,9 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
+    "@tanstack/vue-table": "^8.7.6",
+    "ag-grid-community": "^29.0.0",
+    "ag-grid-vue3": "^29.0.0",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6"
   },

src/App.vue

 <template>
   <div class="">
     <div class="shadow p-2 mb-2 bg-neutral-100 flex gap-4">
-      <router-link to="/">home</router-link>
-      <router-link to="/table">table</router-link>
+      <router-link to="/">home</router-link>  
     </div>
     <router-view />
   </div>

src/assets/main.css

 @import "./base.css";
+
+a {
+  @apply underline;
+  @apply text-blue-400;
+}

src/components/HelloWorld.vue

@@ -9,7 +9,8 @@ defineProps<{
     <h1 class="text-green-500 text-4xl pb-4">{{ msg }}</h1>
     <h3 class="pl-4">
       <ul class="list-disc">
-        <li>Table: <router-link to="/table">ag-grid</router-link></li>
+        <li>Table: <router-link to="/ag-grid">ag-grid</router-link></li>
+        <li>Table: <router-link to="/tanstack">tanstack</router-link></li>
         <li>tailwind</li>
         <li>vite</li>
         <li>vue 3</li>

src/components/TanTable.vue

+<script setup lang="ts">
+import {
+  FlexRender,
+  getCoreRowModel,
+  useVueTable,
+  createColumnHelper,
+} from "@tanstack/vue-table";
+import { ref } from "vue";
+
+type Person = {
+  firstName: string;
+  lastName: string;
+  age: number;
+  visits: number;
+  status: string;
+  progress: number;
+};
+
+const defaultData: Person[] = [
+  {
+    firstName: "tanner",
+    lastName: "linsley",
+    age: 24,
+    visits: 100,
+    status: "In Relationship",
+    progress: 50,
+  },
+  {
+    firstName: "tandy",
+    lastName: "miller",
+    age: 40,
+    visits: 40,
+    status: "Single",
+    progress: 80,
+  },
+  {
+    firstName: "joe",
+    lastName: "dirte",
+    age: 45,
+    visits: 20,
+    status: "Complicated",
+    progress: 10,
+  },
+];
+
+const columnHelper = createColumnHelper<Person>();
+
+const columns = [
+  columnHelper.accessor("firstName", {
+    cell: (info) => info.getValue(),
+    footer: (props) => props.column.id,
+  }),
+  columnHelper.accessor((row) => row.lastName, {
+    id: "lastName",
+    cell: (info) => info.getValue(),
+    header: () => "Last Name",
+    footer: (props) => props.column.id,
+  }),
+  columnHelper.accessor("age", {
+    header: () => "Age",
+    footer: (props) => props.column.id,
+  }),
+  columnHelper.accessor("visits", {
+    header: () => "Visits",
+    footer: (props) => props.column.id,
+  }),
+
+  columnHelper.accessor("status", {
+    header: "Status",
+    footer: (props) => props.column.id,
+  }),
+
+  columnHelper.accessor("progress", {
+    header: "Profile Progress",
+    footer: (props) => props.column.id,
+  }),
+];
+
+const data = ref(defaultData);
+
+const rerender = () => {
+  data.value = defaultData;
+};
+
+const table = useVueTable({
+  get data() {
+    return data.value;
+  },
+  columns,
+  getCoreRowModel: getCoreRowModel(),
+});
+</script>
+
+<template>
+  <div class="p-4">
+    <p class="">tan stack table</p>
+
+    <table class="border">
+      <thead>
+        <tr
+          v-for="headerGroup in table.getHeaderGroups()"
+          :key="headerGroup.id"
+        >
+          <th
+            class="border p-2 font-bold"
+            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 table.getRowModel().rows" :key="row.id">
+          <td v-for="cell in row.getVisibleCells()" :key="cell.id" class="p-2">
+            <FlexRender
+              :render="cell.column.columnDef.cell"
+              :props="cell.getContext()"
+            />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

src/router/index.ts

@@ -5,7 +5,8 @@ const router = createRouter({
   history: createWebHistory(),
   routes: [
     { path: "/", component: Home },
-    { path: "/table", component: import("../components/Table.vue") },
+    { path: "/ag-grid", component: () => import("../components/Table.vue") },
+    { path: "/tanstack", component: () => import("../components/TanTable.vue") },
   ],
 });