summaryrefslogtreecommitdiff
path: root/components/data-table
diff options
context:
space:
mode:
Diffstat (limited to 'components/data-table')
-rw-r--r--components/data-table/data-table-column-header.tsx15
-rw-r--r--components/data-table/data-table-pin-right.tsx173
-rw-r--r--components/data-table/data-table.tsx30
3 files changed, 171 insertions, 47 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
diff --git a/components/data-table/data-table-pin-right.tsx b/components/data-table/data-table-pin-right.tsx
index 051dd985..3ed42402 100644
--- a/components/data-table/data-table-pin-right.tsx
+++ b/components/data-table/data-table-pin-right.tsx
@@ -1,7 +1,7 @@
"use client"
import * as React from "react"
-import { type Table } from "@tanstack/react-table"
+import { type Column, type Table } from "@tanstack/react-table"
import { Check, ChevronsUpDown, MoveRight } from "lucide-react"
import { cn, toSentenceCase } from "@/lib/utils"
@@ -13,6 +13,7 @@ import {
CommandInput,
CommandItem,
CommandList,
+ CommandSeparator,
} from "@/components/ui/command"
import {
Popover,
@@ -21,12 +22,99 @@ import {
} from "@/components/ui/popover"
/**
- * “Pin Right” Popover. Similar to PinLeftButton, but pins columns to "right".
+ * Helper function to check if a column is a parent column (has subcolumns)
+ */
+function isParentColumn<TData>(column: Column<TData>): boolean {
+ return column.columns && column.columns.length > 0
+}
+
+/**
+ * Helper function to pin all subcolumns of a parent column
+ */
+function pinSubColumns<TData>(
+ column: Column<TData>,
+ pinType: false | "left" | "right"
+): void {
+ // If this is a parent column, pin all its subcolumns
+ if (isParentColumn(column)) {
+ column.columns.forEach((subColumn) => {
+ // Recursively handle nested columns
+ pinSubColumns(subColumn, pinType)
+ })
+ } else {
+ // For leaf columns, apply the pin if possible
+ if (column.getCanPin?.()) {
+ column.pin?.(pinType)
+ }
+ }
+}
+
+/**
+ * Checks if all subcolumns of a parent column are pinned to the specified side
+ */
+function areAllSubColumnsPinned<TData>(
+ column: Column<TData>,
+ pinType: "left" | "right"
+): boolean {
+ if (isParentColumn(column)) {
+ // Check if all subcolumns are pinned
+ return column.columns.every((subColumn) =>
+ areAllSubColumnsPinned(subColumn, pinType)
+ )
+ } else {
+ // For leaf columns, check if it's pinned to the specified side
+ return column.getIsPinned?.() === pinType
+ }
+}
+
+/**
+ * "Pin Right" Popover. Supports pinning both individual columns and header groups.
*/
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
+ const pinnableColumns = React.useMemo(() => {
+ return table.getAllColumns().filter((column) => {
+ // If it's a leaf column, check if it can be pinned
+ if (!isParentColumn(column)) {
+ return column.getCanPin?.()
+ }
+
+ // If it's a parent column, check if at least one subcolumn can be pinned
+ return column.columns.some((subCol) => {
+ if (isParentColumn(subCol)) {
+ // Recursively check nested columns
+ return subCol.columns.some(c => c.getCanPin?.())
+ }
+ return subCol.getCanPin?.()
+ })
+ })
+ }, [table])
+
+ // Handle column pinning
+ const handleColumnPin = React.useCallback((column: Column<TData>) => {
+ // For parent columns, pin/unpin all subcolumns
+ if (isParentColumn(column)) {
+ const allPinned = areAllSubColumnsPinned(column, "right")
+ pinSubColumns(column, allPinned ? false : "right")
+ } else {
+ // For leaf columns, toggle pin state
+ const isPinned = column.getIsPinned?.() === "right"
+ column.pin?.(isPinned ? false : "right")
+ }
+ }, [])
+
+ // Check if a column or its subcolumns are pinned right
+ const isColumnPinned = React.useCallback((column: Column<TData>): boolean => {
+ if (isParentColumn(column)) {
+ return areAllSubColumnsPinned(column, "right")
+ } else {
+ return column.getIsPinned?.() === "right"
+ }
+ }, [])
+
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
@@ -37,17 +125,17 @@ export function PinRightButton<TData>({ table }: { table: Table<TData> }) {
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"
+ className="w-56 p-0"
onCloseAutoFocus={() => triggerRef.current?.focus()}
>
<Command>
@@ -55,30 +143,57 @@ export function PinRightButton<TData>({ table }: { table: Table<TData> }) {
<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>
- )
- })}
+ {/* Header Columns (Parent Columns) */}
+ {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>
+ ))}
+
+ {pinnableColumns.some(isParentColumn) &&
+ pinnableColumns.some(col => !isParentColumn(col)) && (
+ <CommandSeparator />
+ )}
+
+ {/* Leaf Columns (individual columns) */}
+ {pinnableColumns
+ .filter(col => !isParentColumn(col))
+ .map((column) => (
+ <CommandItem
+ key={column.id}
+ onSelect={() => {
+ handleColumnPin(column)
+ }}
+ >
+ <span className="truncate">
+ {toSentenceCase(column.id)}
+ </span>
+ <Check
+ className={cn(
+ "ml-auto size-4 shrink-0",
+ isColumnPinned(column) ? "opacity-100" : "opacity-0"
+ )}
+ />
+ </CommandItem>
+ ))}
</CommandGroup>
</CommandList>
</Command>
diff --git a/components/data-table/data-table.tsx b/components/data-table/data-table.tsx
index 3d01994a..b1027cc0 100644
--- a/components/data-table/data-table.tsx
+++ b/components/data-table/data-table.tsx
@@ -41,8 +41,8 @@ export function DataTable<TData>({
return (
<div className={cn("w-full space-y-2.5 overflow-auto", className)} {...props}>
{children}
- <div className="max-w-[100vw] overflow-auto" style={{maxHeight:'36.1rem'}}>
- <Table className="[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10 table-fixed">
+ <div className="max-w-[100vw] overflow-auto" style={{ maxHeight: '36.1rem' }}>
+ <Table className="[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10 table-fixed">
{/* -------------------------------
Table Header
→ 그룹핑된 컬럼의 헤더는 숨김 처리
@@ -60,24 +60,26 @@ export function DataTable<TData>({
<TableHead
key={header.id}
colSpan={header.colSpan}
- data-column-id={header.column.id}
+ data-column-id={header.column.id}
style={{
...getCommonPinningStyles({ column: header.column }),
width: header.getSize(), // 리사이징을 위한 너비 설정
- position: "relative" // 리사이저를 위한 포지셔닝
+ // position: "relative" // 리사이저를 위한 포지셔닝
}}
>
- {header.isPlaceholder
- ? null
- : flexRender(
+ <div style={{ position: "relative" }}>
+ {header.isPlaceholder
+ ? null
+ : flexRender(
header.column.columnDef.header,
header.getContext()
)}
-
- {/* 리사이즈 핸들 - 별도의 컴포넌트로 분리 */}
- {header.column.getCanResize() && (
- <DataTableResizer header={header} />
- )}
+
+ {/* 리사이즈 핸들 - 별도의 컴포넌트로 분리 */}
+ {header.column.getCanResize() && (
+ <DataTableResizer header={header} />
+ )}
+ </div>
</TableHead>
)
})}
@@ -115,7 +117,7 @@ export function DataTable<TData>({
data-state={row.getIsExpanded() && "expanded"}
>
{/* 그룹 헤더는 한 줄에 합쳐서 보여주고, 토글 버튼 + 그룹 라벨 + 값 표기 */}
- <TableCell colSpan={table.getVisibleFlatColumns().length}>
+ <TableCell colSpan={table.getVisibleFlatColumns().length}>
{/* 확장/축소 버튼 (아이콘 중앙 정렬 + Indent) */}
{row.getCanExpand() && (
<button
@@ -164,7 +166,7 @@ export function DataTable<TData>({
return (
<TableCell
key={cell.id}
- data-column-id={cell.column.id}
+ data-column-id={cell.column.id}
style={{
...getCommonPinningStyles({ column: cell.column }),
width: cell.column.getSize(), // 리사이징을 위한 너비 설정
generated by cgit v1.2.3 (git 2.39.1) at 2025-12-07 13:04:38 +0000