diff options
Diffstat (limited to 'components/data-table/data-table-view-options.tsx')
| -rw-r--r-- | components/data-table/data-table-view-options.tsx | 44 |
1 files changed, 33 insertions, 11 deletions
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 |
