From ef4c533ebacc2cdc97e518f30e9a9350004fcdfb Mon Sep 17 00:00:00 2001
From: dujinkim <dujin.kim@dtsolution.co.kr>
Date: Mon, 28 Apr 2025 02:13:30 +0000
Subject: ~20250428 작업사항
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/data-table/data-table-pin-right.tsx | 150 +++++++++++++++++++------
 1 file changed, 116 insertions(+), 34 deletions(-)

(limited to 'components/data-table/data-table-pin-right.tsx')

diff --git a/components/data-table/data-table-pin-right.tsx b/components/data-table/data-table-pin-right.tsx
index 3ed42402..ad52e44d 100644
--- a/components/data-table/data-table-pin-right.tsx
+++ b/components/data-table/data-table-pin-right.tsx
@@ -67,6 +67,25 @@ function areAllSubColumnsPinned<TData>(
   }
 }
 
+/**
+ * Helper function to get the display name of a column
+ */
+function getColumnDisplayName<TData>(column: Column<TData>): string {
+  // First try to use excelHeader from meta if available
+  const excelHeader = column.columnDef.meta?.excelHeader
+  if (excelHeader) {
+    return excelHeader
+  }
+  
+  // Fall back to converting the column ID to sentence case
+  return toSentenceCase(column.id)
+}
+
+/**
+ * Array of column IDs that should be auto-pinned to the right when available
+ */
+const AUTO_PIN_RIGHT_COLUMNS = ['actions']
+
 /**
  * "Pin Right" Popover. Supports pinning both individual columns and header groups.
  */
@@ -74,9 +93,23 @@ export function PinRightButton<TData>({ table }: { table: Table<TData> }) {
   const [open, setOpen] = React.useState(false)
   const triggerRef = React.useRef<HTMLButtonElement>(null)
 
-  // Get all columns that can be pinned, including parent columns
+  // Try to auto-pin actions columns if they exist
+  React.useEffect(() => {
+    AUTO_PIN_RIGHT_COLUMNS.forEach((columnId) => {
+      const column = table.getColumn(columnId)
+      if (column?.getCanPin?.()) {
+        column.pin?.("right")
+      }
+    })
+  }, [table])
+  // Get all columns that can be pinned (excluding auto-pinned columns)
   const pinnableColumns = React.useMemo(() => {
     return table.getAllColumns().filter((column) => {
+      // Skip auto-pinned columns
+      if (AUTO_PIN_RIGHT_COLUMNS.includes(column.id)) {
+        return false
+      }
+      
       // If it's a leaf column, check if it can be pinned
       if (!isParentColumn(column)) {
         return column.getCanPin?.()
@@ -93,6 +126,25 @@ export function PinRightButton<TData>({ table }: { table: Table<TData> }) {
     })
   }, [table])
 
+  // Get flat list of all leaf columns for display
+  const allPinnableLeafColumns = React.useMemo(() => {
+    const leafColumns: Column<TData>[] = []
+    
+    // Function to recursively collect leaf columns
+    const collectLeafColumns = (column: Column<TData>) => {
+      if (isParentColumn(column)) {
+        column.columns.forEach(collectLeafColumns)
+      } else if (column.getCanPin?.() && !AUTO_PIN_RIGHT_COLUMNS.includes(column.id)) {
+        leafColumns.push(column)
+      }
+    }
+    
+    // Process all columns
+    table.getAllColumns().forEach(collectLeafColumns)
+    
+    return leafColumns
+  }, [table])
+
   // Handle column pinning
   const handleColumnPin = React.useCallback((column: Column<TData>) => {
     // For parent columns, pin/unpin all subcolumns
@@ -127,7 +179,7 @@ export function PinRightButton<TData>({ table }: { table: Table<TData> }) {
           <MoveRight className="size-4" />
           
           <span className="hidden sm:inline">
-            Right
+            오른 고정
           </span>
           <ChevronsUpDown className="ml-1 size-4 opacity-50 hidden sm:inline" />
         </Button>
@@ -140,42 +192,72 @@ export function PinRightButton<TData>({ table }: { table: Table<TData> }) {
       >
         <Command>
           <CommandInput placeholder="Search columns..." />
-          <CommandList>
+          <CommandList className="max-h-[300px]">
             <CommandEmpty>No columns found.</CommandEmpty>
             <CommandGroup>
-              {/* Header Columns (Parent Columns) */}
+              {/* Parent Columns with subcolumns */}
               {pinnableColumns
                 .filter(isParentColumn)
-                .map((column) => (
-                  <CommandItem
-                    key={column.id}
-                    onSelect={() => {
-                      handleColumnPin(column)
-                    }}
-                    className="font-medium"
-                  >
-                    <span className="truncate">
-                      {column.id === "Basic Info" || column.id === "Metadata" 
-                        ? column.id // Use column ID directly for common groups
-                        : toSentenceCase(column.id)}
-                    </span>
-                    <Check
-                      className={cn(
-                        "ml-auto size-4 shrink-0",
-                        isColumnPinned(column) ? "opacity-100" : "opacity-0"
-                      )}
-                    />
-                  </CommandItem>
+                .map((parentColumn) => (
+                  <React.Fragment key={parentColumn.id}>
+                    {/* Parent column header - can pin/unpin all children at once */}
+                    <CommandItem
+                      onSelect={() => {
+                        handleColumnPin(parentColumn)
+                      }}
+                      className="font-medium bg-muted/50"
+                    >
+                      <span className="truncate">
+                        {getColumnDisplayName(parentColumn)}
+                      </span>
+                      <Check
+                        className={cn(
+                          "ml-auto size-4 shrink-0",
+                          isColumnPinned(parentColumn) ? "opacity-100" : "opacity-0"
+                        )}
+                      />
+                    </CommandItem>
+                    
+                    {/* Individual subcolumns */}
+                    {parentColumn.columns
+                      .filter(col => !isParentColumn(col) && col.getCanPin?.())
+                      .map(subColumn => (
+                        <CommandItem
+                          key={subColumn.id}
+                          onSelect={() => {
+                            handleColumnPin(subColumn)
+                          }}
+                          className="pl-6 text-sm"
+                        >
+                          <span className="truncate">
+                            {getColumnDisplayName(subColumn)}
+                          </span>
+                          <Check
+                            className={cn(
+                              "ml-auto size-4 shrink-0",
+                              isColumnPinned(subColumn) ? "opacity-100" : "opacity-0"
+                            )}
+                          />
+                        </CommandItem>
+                      ))}
+                  </React.Fragment>
                 ))}
-              
-              {pinnableColumns.some(isParentColumn) && 
-               pinnableColumns.some(col => !isParentColumn(col)) && (
-                <CommandSeparator />
-              )}
-              
-              {/* Leaf Columns (individual columns) */}
-              {pinnableColumns
-                .filter(col => !isParentColumn(col))
+            </CommandGroup>
+            
+            {/* Separator if we have both parent columns and standalone leaf columns */}
+            {pinnableColumns.some(isParentColumn) && 
+             allPinnableLeafColumns.some(col => !pinnableColumns.find(parent => 
+               isParentColumn(parent) && parent.columns.includes(col))
+             ) && (
+              <CommandSeparator />
+            )}
+            
+            {/* Standalone leaf columns (not part of any parent column group) */}
+            <CommandGroup>
+              {allPinnableLeafColumns
+                .filter(col => !pinnableColumns.find(parent => 
+                  isParentColumn(parent) && parent.columns.includes(col)
+                ))
                 .map((column) => (
                   <CommandItem
                     key={column.id}
@@ -184,7 +266,7 @@ export function PinRightButton<TData>({ table }: { table: Table<TData> }) {
                     }}
                   >
                     <span className="truncate">
-                      {toSentenceCase(column.id)}
+                      {getColumnDisplayName(column)}
                     </span>
                     <Check
                       className={cn(
-- 
cgit v1.2.3