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-view-options.tsx | 44 +++++++++++++++++------
 1 file changed, 33 insertions(+), 11 deletions(-)

(limited to 'components/data-table/data-table-view-options.tsx')

diff --git a/components/data-table/data-table-view-options.tsx b/components/data-table/data-table-view-options.tsx
index c55617ec..69666237 100644
--- a/components/data-table/data-table-view-options.tsx
+++ b/components/data-table/data-table-view-options.tsx
@@ -24,6 +24,12 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
 
 // Sortable
 import {
@@ -36,9 +42,11 @@ import {
 /**
  * ViewOptionsProps:
  * - table: TanStack Table instance
+ * - resetAutoSize: Function to reset autosize calculations (optional)
  */
 interface DataTableViewOptionsProps<TData> {
   table: Table<TData>
+  resetAutoSize?: () => void
 }
 
 declare module "@tanstack/table-core" {
@@ -56,13 +64,12 @@ declare module "@tanstack/table-core" {
  */
 export function DataTableViewOptions<TData>({
   table,
+  resetAutoSize,
 }: DataTableViewOptionsProps<TData>) {
   const triggerRef = React.useRef<HTMLButtonElement>(null)
 
   // 1) Identify columns that can be hidden
   const hideableCols = React.useMemo(() => {
-
-
     return table
       .getAllLeafColumns()
       .filter((col) =>  col.getCanHide())
@@ -103,7 +110,10 @@ export function DataTableViewOptions<TData>({
 
     // Now we set the table's official column order
     table.setColumnOrder(finalOrder)
-  }, [columnOrder, hideableCols, table])
+    
+    // Reset auto-size when column order changes
+    resetAutoSize?.()
+  }, [columnOrder, hideableCols, table, resetAutoSize])
 
 
   return (
@@ -118,7 +128,7 @@ export function DataTableViewOptions<TData>({
           className="gap-2"
         >
           <Settings2 className="size-4" />
-          <span className="hidden sm:inline">View</span>
+          <span className="hidden sm:inline">보기</span>
           <ChevronsUpDown className="ml-auto size-4 shrink-0 opacity-50 hidden sm:inline" />
         </Button>
       </PopoverTrigger>
@@ -145,16 +155,19 @@ export function DataTableViewOptions<TData>({
                 {columnOrder.map((colId) => {
                   // find column instance
                   const column = hideableCols.find((c) => c.id === colId)
-
     
                   if (!column) return null
 
+                  const columnLabel = column?.columnDef?.meta?.excelHeader || column.id
+
                   return (
                     <SortableItem key={colId} value={colId} asChild>
                       <CommandItem
-                        onSelect={() =>
+                        onSelect={() => {
                           column.toggleVisibility(!column.getIsVisible())
-                        }
+                          // Reset autosize calculations when toggling columns
+                          resetAutoSize?.()
+                        }}
                       >
                         {/* Drag handle on the left */}
                         <SortableDragHandle
@@ -165,10 +178,19 @@ export function DataTableViewOptions<TData>({
                           <GripVertical className="size-3.5" aria-hidden="true" />
                         </SortableDragHandle>
 
-                        {/* label */}
-                        <span className="truncate">
-                          {column?.columnDef?.meta?.excelHeader}
-                        </span>
+                        {/* label with tooltip for long names */}
+                        <TooltipProvider>
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <span className="truncate">
+                                {columnLabel}
+                              </span>
+                            </TooltipTrigger>
+                            <TooltipContent>
+                              {columnLabel}
+                            </TooltipContent>
+                          </Tooltip>
+                        </TooltipProvider>
 
                         {/* check if visible */}
                         <Check
-- 
cgit v1.2.3