diff options
Diffstat (limited to 'components/data-table/data-table-column-header.tsx')
| -rw-r--r-- | components/data-table/data-table-column-header.tsx | 15 |
1 files changed, 11 insertions, 4 deletions
diff --git a/components/data-table/data-table-column-header.tsx b/components/data-table/data-table-column-header.tsx index aa0c754b..795531c8 100644 --- a/components/data-table/data-table-column-header.tsx +++ b/components/data-table/data-table-column-header.tsx @@ -24,15 +24,18 @@ export function DataTableColumnHeader<TData, TValue>({ className, }: DataTableColumnHeaderProps<TData, TValue>) { if (!column.getCanSort() && !column.getCanHide()) { - return <div className={cn(className)}>{title}</div> + return <div className={cn("w-full", className)}>{title}</div> } const ascValue = `${column.id}-asc` const descValue = `${column.id}-desc` const hideValue = `${column.id}-hide` + // 현재 컬럼 pinned 상태 + const isPinned = column.getIsPinned(); + return ( - <div className={cn("flex items-center gap-2", className)}> + <div className={cn("flex items-center gap-2 w-full", className)}> <Select value={ column.getIsSorted() === "desc" @@ -55,7 +58,11 @@ export function DataTableColumnHeader<TData, TValue>({ ? "Sorted ascending. Click to sort descending." : "Not sorted. Click to sort ascending." } - className="-ml-3 h-8 w-fit border-none text-xs hover:bg-accent hover:text-accent-foreground data-[state=open]:bg-accent [&>svg:last-child]:hidden" + className={cn( + "-ml-3 h-8 w-full border-none text-xs hover:bg-accent hover:text-accent-foreground data-[state=open]:bg-accent [&>svg:last-child]:hidden", + // 고정된 상태일 때 추가 스타일 + isPinned && "sticky-content" + )} > {title} <SelectIcon asChild> @@ -106,4 +113,4 @@ export function DataTableColumnHeader<TData, TValue>({ </Select> </div> ) -} +}
\ No newline at end of file |