From 2d37ca8fb59cc30d4fb96afc68101c9f26008864 Mon Sep 17 00:00:00 2001
From: Trezy <tre@trezy.com>
Date: Tue, 17 Feb 2026 15:00:28 +0000
Subject: [PATCH] feat: add column visibility and better scrolling to records table

---
 web/src/components/data-table/data-table-toolbar.tsx | 5 +----
 web/src/components/data-table/data-table-view-options.tsx | 16 ++++++----------
 web/src/components/data-table/data-table.tsx | 24 ++++++++++++++++++------
 web/src/components/ui/sidebar.tsx | 2 +-
 web/src/app/(dashboard)/records/page.tsx | 282 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------------------------------------------------------------------------------------------------------------------------------------------------------
 5 file(s) changed, 149 insertion(s)(+), 180 deletion(s)(-)

diff --git a/web/src/components/data-table/data-table-toolbar.tsx b/web/src/components/data-table/data-table-toolbar.tsx
--- a/web/src/components/data-table/data-table-toolbar.tsx
+++ b/web/src/components/data-table/data-table-toolbar.tsx
@@ -25,10 +25,7 @@
 }: DataTableToolbarProps<TData>) {
   const isFiltered = table.getState().columnFilters.length > 0;
 
-  const columns = React.useMemo(
-    () => table.getAllColumns().filter((column) => column.getCanFilter()),
-    [table],
-  );
+  const columns = table.getAllColumns().filter((column) => column.getCanFilter());
 
   const onReset = React.useCallback(() => {
     table.resetColumnFilters();
diff --git a/web/src/components/data-table/data-table-view-options.tsx b/web/src/components/data-table/data-table-view-options.tsx
--- a/web/src/components/data-table/data-table-view-options.tsx
+++ b/web/src/components/data-table/data-table-view-options.tsx
@@ -31,16 +31,12 @@
   disabled,
   ...props
 }: DataTableViewOptionsProps<TData>) {
-  const columns = React.useMemo(
-    () =>
-      table
-        .getAllColumns()
-        .filter(
-          (column) =>
-            typeof column.accessorFn !== "undefined" && column.getCanHide(),
-        ),
-    [table],
-  );
+  const columns = table
+    .getAllColumns()
+    .filter(
+      (column) =>
+        typeof column.accessorFn !== "undefined" && column.getCanHide(),
+    );
 
   return (
     <Popover>
diff --git a/web/src/components/data-table/data-table.tsx b/web/src/components/data-table/data-table.tsx
--- a/web/src/components/data-table/data-table.tsx
+++ b/web/src/components/data-table/data-table.tsx
@@ -18,11 +18,15 @@
 interface DataTableProps<TData> extends React.ComponentProps<"div"> {
   table: TanstackTable<TData>;
   actionBar?: React.ReactNode;
+  showPagination?: boolean;
+  onRowClick?: (row: TData) => void;
 }
 
 export function DataTable<TData>({
   table,
   actionBar,
+  showPagination = true,
+  onRowClick,
   children,
   className,
   ...props
@@ -63,6 +67,12 @@
                 <TableRow
                   key={row.id}
                   data-state={row.getIsSelected() && "selected"}
+                  className={onRowClick ? "cursor-pointer" : undefined}
+                  onClick={
+                    onRowClick
+                      ? () => onRowClick(row.original)
+                      : undefined
+                  }
                 >
                   {row.getVisibleCells().map((cell) => (
                     <TableCell
@@ -92,12 +102,14 @@
           </TableBody>
         </Table>
       </div>
-      <div className="flex flex-col gap-2.5">
-        <DataTablePagination table={table} />
-        {actionBar &&
-          table.getFilteredSelectedRowModel().rows.length > 0 &&
-          actionBar}
-      </div>
+      {showPagination && (
+        <div className="flex flex-col gap-2.5">
+          <DataTablePagination table={table} />
+          {actionBar &&
+            table.getFilteredSelectedRowModel().rows.length > 0 &&
+            actionBar}
+        </div>
+      )}
     </div>
   );
 }
diff --git a/web/src/components/ui/sidebar.tsx b/web/src/components/ui/sidebar.tsx
--- a/web/src/components/ui/sidebar.tsx
+++ b/web/src/components/ui/sidebar.tsx
@@ -309,7 +309,7 @@
     <main
       data-slot="sidebar-inset"
       className={cn(
-        "bg-background relative flex w-full flex-1 flex-col",
+        "bg-background relative flex min-w-0 w-full flex-1 flex-col",
         "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
         className
       )}
diff --git a/web/src/app/(dashboard)/records/page.tsx b/web/src/app/(dashboard)/records/page.tsx
--- a/web/src/app/(dashboard)/records/page.tsx
+++ b/web/src/app/(dashboard)/records/page.tsx
@@ -1,133 +1,137 @@
-"use client"
+"use client";
 
-import { useCallback, useEffect, useMemo, useState } from "react"
+import { useCallback, useEffect, useMemo, useState } from "react";
 import {
   type ColumnDef,
-  flexRender,
+  type VisibilityState,
   getCoreRowModel,
   useReactTable,
-} from "@tanstack/react-table"
+} from "@tanstack/react-table";
 
-import { useAuth } from "@/lib/auth-context"
+import { useAuth } from "@/lib/auth-context";
 import {
   getStats,
   getAdminRecords,
   type CollectionStat,
   type AdminRecord,
-} from "@/lib/api"
-import { SiteHeader } from "@/components/site-header"
-import { Button } from "@/components/ui/button"
+} from "@/lib/api";
+import { DataTable } from "@/components/data-table/data-table";
+import { DataTableViewOptions } from "@/components/data-table/data-table-view-options";
+import { SiteHeader } from "@/components/site-header";
+import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog"
+} from "@/components/ui/dialog";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table"
+} from "@/components/ui/select";
+import { ChevronLeft, ChevronRight } from "lucide-react";
 
 function parseAtUri(uri: string): { did: string; rkey: string } {
-  const parts = uri.replace("at://", "").split("/")
-  return { did: parts[0] ?? "", rkey: parts[2] ?? "" }
+  const parts = uri.replace("at://", "").split("/");
+  return { did: parts[0] ?? "", rkey: parts[2] ?? "" };
 }
 
 function formatCellValue(value: unknown): string {
-  if (value === null || value === undefined) return ""
-  if (typeof value === "string") return value
+  if (value === null || value === undefined) return "";
+  if (typeof value === "string") return value;
   if (typeof value === "number" || typeof value === "boolean")
-    return String(value)
-  return JSON.stringify(value)
+    return String(value);
+  return JSON.stringify(value);
 }
 
 export default function RecordsPage() {
-  const { getToken } = useAuth()
-  const [collections, setCollections] = useState<CollectionStat[]>([])
-  const [selectedCollection, setSelectedCollection] = useState<string>("")
-  const [records, setRecords] = useState<AdminRecord[]>([])
-  const [cursorStack, setCursorStack] = useState<string[]>([])
-  const [nextCursor, setNextCursor] = useState<string | undefined>()
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const [viewRecord, setViewRecord] = useState<AdminRecord | null>(null)
+  const { getToken } = useAuth();
+  const [collections, setCollections] = useState<CollectionStat[]>([]);
+  const [selectedCollection, setSelectedCollection] = useState<string>("");
+  const [records, setRecords] = useState<AdminRecord[]>([]);
+  const [cursorStack, setCursorStack] = useState<string[]>([]);
+  const [nextCursor, setNextCursor] = useState<string | undefined>();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [viewRecord, setViewRecord] = useState<AdminRecord | null>(null);
+
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
 
   useEffect(() => {
     getStats(getToken)
       .then((stats) => setCollections(stats.collections))
-      .catch((e) => setError(e.message))
-  }, [getToken])
+      .catch((e) => setError(e.message));
+  }, [getToken]);
 
   const fetchRecords = useCallback(
     async (collection: string, cursor?: string) => {
-      setLoading(true)
-      setError(null)
+      setLoading(true);
+      setError(null);
       try {
-        const data = await getAdminRecords(getToken, collection, 20, cursor)
-        setRecords(data.records)
-        setNextCursor(data.cursor)
+        const data = await getAdminRecords(getToken, collection, 20, cursor);
+        setRecords(data.records);
+        setNextCursor(data.cursor);
       } catch (e: unknown) {
-        setError(e instanceof Error ? e.message : String(e))
-        setRecords([])
-        setNextCursor(undefined)
+        setError(e instanceof Error ? e.message : String(e));
+        setRecords([]);
+        setNextCursor(undefined);
       } finally {
-        setLoading(false)
+        setLoading(false);
       }
     },
-    [getToken]
-  )
+    [getToken],
+  );
 
   // Build columns dynamically from the union of all record keys
   const columns = useMemo<ColumnDef<AdminRecord>[]>(() => {
-    const keySet = new Set<string>()
+    const keySet = new Set<string>();
     for (const r of records) {
       for (const key of Object.keys(r.record)) {
-        keySet.add(key)
+        keySet.add(key);
       }
     }
 
     const cols: ColumnDef<AdminRecord>[] = [
       {
         id: "did",
-        header: "DID",
         accessorFn: (row) => parseAtUri(row.uri).did,
+        header: "DID",
         cell: ({ getValue }) => (
           <span className="font-mono text-xs whitespace-nowrap">
             {getValue<string>()}
           </span>
         ),
+        enableSorting: false,
+        enableHiding: false,
+        meta: { label: "DID" },
       },
       {
         id: "rkey",
-        header: "Rkey",
         accessorFn: (row) => parseAtUri(row.uri).rkey,
+        header: "Record Key",
         cell: ({ getValue }) => (
           <span className="font-mono text-xs whitespace-nowrap">
             {getValue<string>()}
           </span>
         ),
+        enableSorting: false,
+        enableHiding: false,
+        meta: { label: "Record Key" },
       },
-    ]
+    ];
 
     for (const key of keySet) {
       cols.push({
         id: key,
-        header: key,
         accessorFn: (row) => row.record[key],
+        header: key,
+        enableSorting: false,
         cell: ({ getValue }) => {
-          const val = getValue<unknown>()
-          const str = formatCellValue(val)
+          const val = getValue<unknown>();
+          const str = formatCellValue(val);
           return (
             <span
               className="font-mono text-xs block max-w-xs truncate"
@@ -135,41 +139,47 @@
             >
               {str}
             </span>
-          )
+          );
         },
-      })
+        meta: { label: key },
+      });
     }
 
-    return cols
-  }, [records])
+    return cols;
+  }, [records]);
 
   const table = useReactTable({
     data: records,
     columns,
+    state: {
+      columnVisibility,
+    },
+    onColumnVisibilityChange: setColumnVisibility,
     getCoreRowModel: getCoreRowModel(),
     getRowId: (row) => row.uri,
-  })
+  });
 
   function handleSelectCollection(collection: string) {
-    setSelectedCollection(collection)
-    setCursorStack([])
-    setNextCursor(undefined)
-    fetchRecords(collection)
+    setSelectedCollection(collection);
+    setCursorStack([]);
+    setNextCursor(undefined);
+    setColumnVisibility({});
+    fetchRecords(collection);
   }
 
   function handleNext() {
-    if (!nextCursor || !selectedCollection) return
-    setCursorStack((prev) => [...prev, nextCursor])
-    fetchRecords(selectedCollection, nextCursor)
+    if (!nextCursor || !selectedCollection) return;
+    setCursorStack((prev) => [...prev, nextCursor]);
+    fetchRecords(selectedCollection, nextCursor);
   }
 
   function handlePrevious() {
-    if (cursorStack.length === 0 || !selectedCollection) return
-    const stack = [...cursorStack]
-    stack.pop()
-    const prevCursor = stack.length > 0 ? stack[stack.length - 1] : undefined
-    setCursorStack(stack)
-    fetchRecords(selectedCollection, prevCursor)
+    if (cursorStack.length === 0 || !selectedCollection) return;
+    const stack = [...cursorStack];
+    stack.pop();
+    const prevCursor = stack.length > 0 ? stack[stack.length - 1] : undefined;
+    setCursorStack(stack);
+    fetchRecords(selectedCollection, prevCursor);
   }
 
   return (
@@ -178,105 +188,59 @@
       <div className="flex flex-1 flex-col gap-4 p-4 md:p-6">
         {error && <p className="text-destructive text-sm">{error}</p>}
 
-        <div className="flex items-center gap-4">
-          <Select
-            value={selectedCollection}
-            onValueChange={handleSelectCollection}
-          >
-            <SelectTrigger className="w-80">
-              <SelectValue placeholder="Select a collection" />
-            </SelectTrigger>
-            <SelectContent>
-              {collections.map((col) => (
-                <SelectItem key={col.collection} value={col.collection}>
-                  {col.collection} ({col.count.toLocaleString()})
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
+        <DataTable
+          table={table}
+          showPagination={false}
+          onRowClick={setViewRecord}
+        >
+          <div className="flex w-full items-center justify-between gap-2 p-1">
+            <Select
+              value={selectedCollection}
+              onValueChange={handleSelectCollection}
+            >
+              <SelectTrigger className="h-8 w-80 text-sm">
+                <SelectValue placeholder="Select a collection" />
+              </SelectTrigger>
+              <SelectContent>
+                {collections.map((col) => (
+                  <SelectItem key={col.collection} value={col.collection}>
+                    {col.collection} ({col.count.toLocaleString()})
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <DataTableViewOptions table={table} />
+          </div>
+        </DataTable>
 
         {selectedCollection && (
-          <>
-            <div className="overflow-x-auto rounded-lg border">
-              <Table>
-                <TableHeader>
-                  {table.getHeaderGroups().map((headerGroup) => (
-                    <TableRow key={headerGroup.id}>
-                      {headerGroup.headers.map((header) => (
-                        <TableHead key={header.id} className="whitespace-nowrap">
-                          {header.isPlaceholder
-                            ? null
-                            : flexRender(
-                                header.column.columnDef.header,
-                                header.getContext()
-                              )}
-                        </TableHead>
-                      ))}
-                    </TableRow>
-                  ))}
-                </TableHeader>
-                <TableBody>
-                  {loading && (
-                    <TableRow>
-                      <TableCell
-                        colSpan={columns.length}
-                        className="text-muted-foreground text-center"
-                      >
-                        Loading...
-                      </TableCell>
-                    </TableRow>
-                  )}
-                  {!loading && table.getRowModel().rows.length === 0 && (
-                    <TableRow>
-                      <TableCell
-                        colSpan={columns.length}
-                        className="text-muted-foreground text-center"
-                      >
-                        No records found.
-                      </TableCell>
-                    </TableRow>
-                  )}
-                  {!loading &&
-                    table.getRowModel().rows.map((row) => (
-                      <TableRow
-                        key={row.id}
-                        className="cursor-pointer"
-                        onClick={() => setViewRecord(row.original)}
-                      >
-                        {row.getVisibleCells().map((cell) => (
-                          <TableCell key={cell.id}>
-                            {flexRender(
-                              cell.column.columnDef.cell,
-                              cell.getContext()
-                            )}
-                          </TableCell>
-                        ))}
-                      </TableRow>
-                    ))}
-                </TableBody>
-              </Table>
-            </div>
-
-            <div className="flex items-center justify-end gap-2">
+          <div className="flex w-full items-center justify-between gap-4 overflow-auto p-1">
+            <p className="text-muted-foreground flex-1 whitespace-nowrap text-sm">
+              {records.length} record(s) on this page.
+            </p>
+            <div className="flex items-center space-x-2">
               <Button
+                aria-label="Go to previous page"
                 variant="outline"
-                size="sm"
-                disabled={cursorStack.length === 0}
+                size="icon"
+                className="size-8"
+                disabled={cursorStack.length === 0 || loading}
                 onClick={handlePrevious}
               >
-                Previous
+                <ChevronLeft />
               </Button>
               <Button
+                aria-label="Go to next page"
                 variant="outline"
-                size="sm"
-                disabled={!nextCursor}
+                size="icon"
+                className="size-8"
+                disabled={!nextCursor || loading}
                 onClick={handleNext}
               >
-                Next
+                <ChevronRight />
               </Button>
             </div>
-          </>
+          </div>
         )}
 
         {viewRecord && (
@@ -295,5 +259,5 @@
         )}
       </div>
     </>
-  )
+  );
 }

--
tangled.sh