basic table component testing

2026-03-07 19:26:36 +00:00 · 2024-10-14 23:05:07 -04:00
parent 4c27d1302e
commit c8c4a73e52
9 changed files with 542 additions and 29 deletions
--- a/src/app/[orgId]/sites/components/SitesTable.tsx
+++ b/src/app/[orgId]/sites/components/SitesTable.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import { ColumnDef } from "@tanstack/react-table";
+import { DataTable } from "./DataTable";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "@app/components/ui/dropdown-menu";
+import { Button } from "@app/components/ui/button";
+import { ArrowUpDown, MoreHorizontal } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+
+export type SiteRow = {
+    id: string;
+    name: string;
+    mbIn: number;
+    mbOut: number;
+    orgId: string;
+};
+
+export const columns: ColumnDef<SiteRow>[] = [
+    {
+        accessorKey: "id",
+        header: ({ column }) => {
+            return (
+                <Button
+                    variant="ghost"
+                    onClick={() =>
+                        column.toggleSorting(column.getIsSorted() === "asc")
+                    }
+                >
+                    Site
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            );
+        },
+    },
+    {
+        accessorKey: "name",
+        header: ({ column }) => {
+            return (
+                <Button
+                    variant="ghost"
+                    onClick={() =>
+                        column.toggleSorting(column.getIsSorted() === "asc")
+                    }
+                >
+                    Name
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            );
+        },
+    },
+    {
+        accessorKey: "mbIn",
+        header: "MB In",
+    },
+    {
+        accessorKey: "mbOut",
+        header: "MB Out",
+    },
+    {
+        id: "actions",
+        cell: ({ row }) => {
+            const siteRow = row.original;
+
+            return (
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" className="h-8 w-8 p-0">
+                            <span className="sr-only">Open menu</span>
+                            <MoreHorizontal className="h-4 w-4" />
+                        </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                        <DropdownMenuItem>
+                            <Link
+                                href={`/${siteRow.orgId}/sites/${siteRow.id}`}
+                            >
+                                View settings
+                            </Link>
+                        </DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            );
+        },
+    },
+];
+
+type SitesTableProps = {
+    sites: SiteRow[];
+    orgId: string;
+};
+
+export default function SitesTable({ sites, orgId }: SitesTableProps) {
+    const router = useRouter();
+
+    return (
+        <DataTable
+            columns={columns}
+            data={sites}
+            addSite={() => {
+                router.push(`/${orgId}/sites/create`);
+            }}
+        />
+    );
+}