Merge pull request #197 from taleshape-com/table-sticky-header

Sticky table headers for full-width tables

Author: jorinvo

ui/src/components/dashboard/DashboardTable.tsx

@@ -24,7 +24,7 @@ function DashboardTable ({ headers, data }: TableProps) {
   return (
     <TableRoot>
       <Table>
-        <TableHead className="z-10">
+        <TableHead className="z-10 sticky top-0">
           <TableRow>
             {headers.map((header) => (
               <TableHeaderCell

ui/src/components/dashboard/index.tsx

@@ -571,7 +571,7 @@ const renderContent = (
   }
   return (
     <div
-      className={cx("overflow-auto", { "h-full": numQueriesInSection > 1 })}
+      className={cx({ "overflow-auto h-full": numQueriesInSection > 1 })}
     >
       <DashboardTable headers={query.columns} data={query.rows as (string | number | boolean)[][]} />
     </div>