From 52194702ef30a064abd924fad590323e22d0243b Mon Sep 17 00:00:00 2001
From: Collin Barrett <6483057+collinbarrett@users.noreply.github.com>
Date: Sun, 15 Jun 2025 16:42:09 -0500
Subject: [PATCH] feat(web): npx shadcn@latest add table

---
 web/package-lock.json           | Bin 335539 -> 336704 bytes
 web/package.json                |   1 +
 web/src/components/ui/table.tsx | 116 ++++++++++++++++++++++++++++++++
 3 files changed, 117 insertions(+)
 create mode 100644 web/src/components/ui/table.tsx

diff --git a/web/package-lock.json b/web/package-lock.json
index a675b937c542edc6ef25ac36871fd2d8e64341b5..d3312cb4a6a9c2aae88f640f8d93aab8b900f186 100644
GIT binary patch
delta 528
zcmdnISLDDkkqsG)at<YldBr7($=Uivsfo!Yx+RH8IjKrk3QBPndPauLQH<?TjEvi(
z7@73MgfLZ3Z**mrVl<k((aBT|n?d@z$j0gdjhw#Fnpri}G|$gBB-k}1z@#$UJvBWy
zEIT7BIoP5k#3$S=EXO3VBF)u3(9gKcpen^9GRfN{G%dd{Ex<V=IVYsZ%fvO`+cK~+
zuh6m7GCwrUBFr_ns36KTeELTr76)m#Gr&I4P0lX@dk5s3>56liji=X3vvN<jyU8Lq
zeS!`X$K>;Vro2Esd8tJ?nR&%Isg;utZZnw7>%u=-o=K9`&eqUOZ@S`qW)%TMNI^`V
zoS-Jn3^W$xc@-?S0{xC~0>bM#DNzxw8U9X57M{iC6+XoVhG{{@k*>+cF0MhDRi?$6
zIawAZdG6V6QI#bnhKWh8WjXrp8KJq(t_A_VK8d~oA&JIb*(M%I-nl_J9=WC3>CR~-
jlLduTCkv>_6ZG74L478*_D*poAZ7+)mhGM5tXk{<;n1(C

delta 40
tcmX?bOl0$3kqsG)%~KfLr!X>ZpTfwbAl5D_!vw_4K+LjTREAZX9RML-3qb$?

diff --git a/web/package.json b/web/package.json
index 5d41bb77a..47f33f978 100644
--- a/web/package.json
+++ b/web/package.json
@@ -12,6 +12,7 @@
     "@azure/monitor-opentelemetry": "^1.11.1",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-slot": "^1.2.3",
+    "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.514.0",
diff --git a/web/src/components/ui/table.tsx b/web/src/components/ui/table.tsx
new file mode 100644
index 000000000..4b3c98ea4
--- /dev/null
+++ b/web/src/components/ui/table.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  );
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};