initial commit

1 files changed, 88 insertions, 0 deletions

diff --git a/components/data-table/data-table-pin-right.tsx b/components/data-table/data-table-pin-right.tsx
new file mode 100644
index 00000000..051dd985
--- /dev/null
+++ b/components/data-table/data-table-pin-right.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import * as React from "react"
+import { type Table } from "@tanstack/react-table"
+import { Check, ChevronsUpDown, MoveRight } 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 Right” Popover. Similar to PinLeftButton, but pins columns to "right".
+ */
+export function PinRightButton<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"
+        >
+          <MoveRight className="size-4" />
+
+          <span className="hidden sm:inline">
+            Right
+          </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?.()
+                  return (
+                    <CommandItem
+                      key={column.id}
+                      onSelect={() => {
+                        column.pin?.(pinned === "right" ? false : "right")
+                      }}
+                    >
+                      <span className="truncate">
+                        {toSentenceCase(column.id)}
+                      </span>
+                      <Check
+                        className={cn(
+                          "ml-auto size-4 shrink-0",
+                          pinned === "right" ? "opacity-100" : "opacity-0"
+                        )}
+                      />
+                    </CommandItem>
+                  )
+                })}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
\ No newline at end of file