Merge pull request #431 from thormengkheang/pin-header

feat: update context menu to show pin/unpin header

Author: invisal

src/components/gui/query-result-table.tsx

@@ -10,6 +10,7 @@ import { cn } from "@/lib/utils";
 import {
   LucideChevronDown,
   LucidePin,
+  LucidePinOff,
   LucideSortAsc,
   LucideSortDesc,
 } from "lucide-react";
@@ -161,18 +162,22 @@ export default function ResultTable({
         );
       });
 
+      const handleOnPinColumnClick = () => {
+        setStickHeaderIndex(
+          header.index === stickyHeaderIndex ? undefined : header.index
+        );
+      };
+
       return (
         <Header key={header.name} header={header} internalState={data}>
           {extensionMenuItems}
-          <DropdownMenuItem
-            onClick={() => {
-              setStickHeaderIndex(
-                header.index === stickyHeaderIndex ? undefined : header.index
-              );
-            }}
-          >
-            <LucidePin className="mr-2 h-4 w-4" />
-            Pin Header
+          <DropdownMenuItem onClick={handleOnPinColumnClick}>
+            {header.sticky ? (
+              <LucidePinOff className="mr-2 h-4 w-4" />
+            ) : (
+              <LucidePin className="mr-2 h-4 w-4" />
+            )}
+            {header.sticky ? "Unpin Header" : "Pin Header"}
           </DropdownMenuItem>
           <DropdownMenuSeparator />
           <DropdownMenuItem

src/components/gui/table-optimized/table-header.tsx

@@ -24,8 +24,8 @@ export default function TableHeader<HeaderMetadata = unknown>({
   ) => ReactElement;
 }) {
   const className = cn(
-    sticky ? "z-30" : undefined,
-    "bg-background border-r border-b overflow-hidden sticky top-0 h-[35px] leading-[35px] flex text-left z-10 p-0"
+    sticky ? "z-30" : "z-10",
+    "bg-background border-r border-b overflow-hidden sticky top-0 h-[35px] leading-[35px] flex text-left p-0"
   );
 
   return (