1 files changed, 95 insertions, 0 deletions
diff --git a/components/data-table/data-table-pin-left.tsx b/components/data-table/data-table-pin-left.tsx
new file mode 100644
index 00000000..81e83564
--- /dev/null
+++ b/components/data-table/data-table-pin-left.tsx
@@ -0,0 +1,95 @@
+"use client"
+
+import * as React from "react"
+import { type Table } from "@tanstack/react-table"
+import { Check, ChevronsUpDown, MoveLeft } from "lucide-react"
+
+import { cn, toSentenceCase } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+
+/**
+ * “Pin Left” Popover. Lists columns that can be pinned. 
+ * If pinned===‘left’ → checked, if pinned!==‘left’ → unchecked.
+ * Toggling check => pin(‘left’) or pin(false).
+ */
+export function PinLeftButton<TData>({ table }: { table: Table<TData> }) {
+  const [open, setOpen] = React.useState(false)
+  const triggerRef = React.useRef<HTMLButtonElement>(null)
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          ref={triggerRef}
+          variant="outline"
+          size="sm"
+          className="h-8 gap-2"
+        >
+          <MoveLeft className="size-4" />
+
+          <span className="hidden sm:inline">
+            Left
+          </span>
+
+          <ChevronsUpDown className="ml-1 size-4 opacity-50 hidden sm:inline" />
+        </Button>
+      </PopoverTrigger>
+
+      <PopoverContent
+        align="end"
+        className="w-44 p-0"
+        onCloseAutoFocus={() => triggerRef.current?.focus()}
+      >
+        <Command>
+          <CommandInput placeholder="Search columns..." />
+          <CommandList>
+            <CommandEmpty>No columns found.</CommandEmpty>
+            <CommandGroup>
+              {table
+                .getAllLeafColumns()
+                .filter((col) => col.getCanPin?.())
+                .map((column) => {
+                  const pinned = column.getIsPinned?.() // 'left'|'right'|false
+                  // => pinned === 'left' => checked
+                  return (
+                    <CommandItem
+                      key={column.id}
+                      onSelect={() => {
+                        // if currently pinned===left => unpin
+                        // else => pin left
+                        column.pin?.(pinned === "left" ? false : "left")
+                      }}
+                    >
+                      <span className="truncate">
+                        {toSentenceCase(column.id)}
+                      </span>
+                      {/* Check if pinned===‘left’ */}
+                      <Check
+                        className={cn(
+                          "ml-auto size-4 shrink-0",
+                          pinned === "left" ? "opacity-100" : "opacity-0"
+                        )}
+                      />
+                    </CommandItem>
+                  )
+                })}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
+\ No newline at end of file