From 7df9bc00357e5e249268e0ecf2d958eaf5b28e13 Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Sat, 18 Jul 2026 05:11:10 +0200
Subject: [PATCH] feat(datatable): sticky table header row
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Make the DataTable's <thead> sticky so the column headers stay put at the
top of the page scroller while the rows scroll under them — the core of
'the table header should be fixed, only the rows scroll'. Benefits every
DataTable page (Channels manager, discovery, Audit log).

Each header cell gets bg-bg so rows don't show through; the header's
bottom border rides an inset box-shadow because a sticky <tr>'s own
border can scroll away with the collapsed table box. Verified on the
Audit log: 500 rows scroll under a header stuck at the scroller top; the
scroller's top fade is unobtrusive behind the solid header. Suite 15/15.
---
 frontend/src/components/DataTable.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/DataTable.tsx b/frontend/src/components/DataTable.tsx
index f08bb64..f247260 100644
--- a/frontend/src/components/DataTable.tsx
+++ b/frontend/src/components/DataTable.tsx
@@ -350,8 +350,12 @@ export default function DataTable<T>({
       {/* Wide screens: table. The wrapper isn't clipped so header filter popovers can overflow. */}
       <div className="hidden md:block">
         <table className="w-full border-collapse text-sm">
-          <thead>
-            <tr className="text-muted border-b border-border">
+          {/* Sticky header row: the column headers stay put at the top of the page scroller while
+              the rows scroll under them. `bg-bg` on each cell keeps rows from showing through; the
+              border rides a pseudo-element (box-shadow) since a sticky <tr>'s own border scrolls
+              away with the collapsed table box in some browsers. */}
+          <thead className="sticky top-0 z-10">
+            <tr className="text-muted [&>th]:shadow-[inset_0_-1px_0_var(--border)]">
               {columns.map((col) => {
                 const sorted_ = sort?.key === col.key;
                 const filterOn = isActive(filters[col.key]);
@@ -359,7 +363,7 @@ export default function DataTable<T>({
                   <th
                     key={col.key}
                     style={col.width ? { width: col.width } : undefined}
-                    className={`relative font-medium px-2 py-2 whitespace-nowrap ${align(col.align)}`}
+                    className={`relative font-medium px-2 py-2 whitespace-nowrap bg-bg ${align(col.align)}`}
                   >
                     <span className="inline-flex items-center gap-1">
                       <button