Set proper background color on sticky table header (#1329)

paranext · Nov 22, 2024 · d93ffde · d93ffde
2 parents d59871d + 54484df
commit d93ffde
Show file tree

Hide file tree

Showing 6 changed files with 170 additions and 113 deletions.
diff --git a/lib/platform-bible-react/dist/index.cjs b/lib/platform-bible-react/dist/index.cjs
diff --git a/lib/platform-bible-react/dist/index.cjs.map b/lib/platform-bible-react/dist/index.cjs.map
diff --git a/lib/platform-bible-react/dist/index.js b/lib/platform-bible-react/dist/index.js
diff --git a/lib/platform-bible-react/dist/index.js.map b/lib/platform-bible-react/dist/index.js.map
diff --git a/lib/platform-bible-react/src/components/shadcn-ui/table.tsx b/lib/platform-bible-react/src/components/shadcn-ui/table.tsx
@@ -23,7 +23,7 @@ const TableHeader = React.forwardRef<
   <thead
     ref={ref}
     className={cn(
-      { 'tw-sticky tw-top-0 tw-bg-muted': stickyHeader },
+      { 'tw-sticky tw-top-[-1px] tw-bg-background tw-drop-shadow-sm': stickyHeader },
       '[&_tr]:tw-border-b',
       className,
     )}

diff --git a/lib/platform-bible-react/src/preview/pages/components/basics/table.examples.component.tsx b/lib/platform-bible-react/src/preview/pages/components/basics/table.examples.component.tsx
@@ -9,58 +9,95 @@ import {
   TableRow,
 } from '@/components/shadcn-ui/table';
 
-export default function TableExamples() {
-  const invoices = [
-    {
-      invoice: 'INV001',
-      paymentStatus: 'Paid',
-      totalAmount: '$250.00',
-      paymentMethod: 'Credit Card',
-    },
-    {
-      invoice: 'INV002',
-      paymentStatus: 'Pending',
-      totalAmount: '$150.00',
-      paymentMethod: 'PayPal',
-    },
-    {
-      invoice: 'INV003',
-      paymentStatus: 'Unpaid',
-      totalAmount: '$350.00',
-      paymentMethod: 'Bank Transfer',
-    },
-  ];
+const invoices = [
+  {
+    invoice: 'INV001',
+    paymentStatus: 'Paid',
+    totalAmount: '$250.00',
+    paymentMethod: 'Credit Card',
+  },
+  {
+    invoice: 'INV002',
+    paymentStatus: 'Pending',
+    totalAmount: '$150.00',
+    paymentMethod: 'PayPal',
+  },
+  {
+    invoice: 'INV003',
+    paymentStatus: 'Unpaid',
+    totalAmount: '$350.00',
+    paymentMethod: 'Bank Transfer',
+  },
+];
+
+const lotsOfInvoices = Array(10).fill(invoices).flat();
 
+export default function TableExamples() {
   return (
-    <Table className="tw-border">
-      <TableCaption>A list of your recent invoices.</TableCaption>
-      <TableHeader>
-        <TableRow>
-          <TableHead className="w-[100px]">Invoice</TableHead>
-          <TableHead>Status</TableHead>
-          <TableHead>Method</TableHead>
-          <TableHead className="tw-text-end">Amount</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {invoices.map((invoice) => (
-          <TableRow
-            key={invoice.invoice}
-            data-state={invoice.paymentStatus === 'Paid' ? 'selected' : ''}
-          >
-            <TableCell className="font-medium">{invoice.invoice}</TableCell>
-            <TableCell>{invoice.paymentStatus}</TableCell>
-            <TableCell>{invoice.paymentMethod}</TableCell>
-            <TableCell className="tw-text-end">{invoice.totalAmount}</TableCell>
+    <>
+      <Table className="tw-border">
+        <TableCaption>A list of your recent invoices.</TableCaption>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-[100px]">Invoice</TableHead>
+            <TableHead>Status</TableHead>
+            <TableHead>Method</TableHead>
+            <TableHead className="tw-text-end">Amount</TableHead>
           </TableRow>
-        ))}
-      </TableBody>
-      <TableFooter>
-        <TableRow>
-          <TableCell colSpan={3}>Total</TableCell>
-          <TableCell className="tw-text-end">-SUM-</TableCell>
-        </TableRow>
-      </TableFooter>
-    </Table>
+        </TableHeader>
+        <TableBody>
+          {invoices.map((invoice) => (
+            <TableRow
+              key={invoice.invoice}
+              data-state={invoice.paymentStatus === 'Paid' ? 'selected' : ''}
+            >
+              <TableCell className="font-medium">{invoice.invoice}</TableCell>
+              <TableCell>{invoice.paymentStatus}</TableCell>
+              <TableCell>{invoice.paymentMethod}</TableCell>
+              <TableCell className="tw-text-end">{invoice.totalAmount}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TableCell colSpan={3}>Total</TableCell>
+            <TableCell className="tw-text-end">-SUM-</TableCell>
+          </TableRow>
+        </TableFooter>
+      </Table>
+
+      <div className="tw-relative tw-max-h-80 tw-overflow-auto">
+        <Table stickyHeader className="tw-border">
+          <TableHeader stickyHeader>
+            <TableRow>
+              <TableHead className="w-[100px]">Invoice</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead>Method</TableHead>
+              <TableHead className="tw-text-end">Amount</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {lotsOfInvoices.map((invoice, index) => (
+              <TableRow
+                // eslint-disable-next-line react/no-array-index-key
+                key={invoice.invoice + index}
+                data-state={invoice.paymentStatus === 'Paid' ? 'selected' : ''}
+              >
+                <TableCell className="font-medium">{invoice.invoice}</TableCell>
+                <TableCell>{invoice.paymentStatus}</TableCell>
+                <TableCell>{invoice.paymentMethod}</TableCell>
+                <TableCell className="tw-text-end">{invoice.totalAmount}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+          <TableFooter>
+            <TableRow>
+              <TableCell colSpan={3}>Total</TableCell>
+              <TableCell className="tw-text-end">-SUM-</TableCell>
+            </TableRow>
+          </TableFooter>
+        </Table>
+      </div>
+    </>
   );
 }