Updated table

src/components/dashboard/urls-data-table.tsx

@@ -28,12 +28,14 @@ import {
 import { Input } from "@/components/ui/input"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { deleteUrl } from "@/lib/actions/url"
-import { urls } from "@/lib/drizzle/schema"
+import { urls, visits } from "@/lib/drizzle/schema"
 import Link from "next/link"
 import { useRouter } from "next/navigation"
 import { toast } from "sonner"
 
-type UrlRecord = typeof urls.$inferSelect
+type UrlRecord = typeof urls.$inferSelect & {
+    visits?: (typeof visits.$inferSelect)[]
+}
 
 export const columns: ColumnDef<UrlRecord>[] = [
     {
@@ -83,6 +85,30 @@ export const columns: ColumnDef<UrlRecord>[] = [
             return <div className="max-w-[200px] truncate">{title || "No title"}</div>
         }
     },
+    {
+        id: "visits",
+        header: ({ column }) => {
+            return (
+                <Button
+                    variant="ghost"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                >
+                    Visits
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            )
+        },
+        cell: ({ row }) => {
+            const urlRecord = row.original
+            const visitCount = urlRecord.visits?.length || 0
+            return <div className="text-center">{visitCount}</div>
+        },
+        sortingFn: (rowA, rowB) => {
+            const visitsA = rowA.original.visits?.length || 0
+            const visitsB = rowB.original.visits?.length || 0
+            return visitsA - visitsB
+        }
+    },
     {
         accessorKey: "maxVisits",
         header: ({ column }) => {