summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--components/client-data-table/data-table.tsx16
-rw-r--r--components/data-table/data-table.tsx15
-rw-r--r--components/data-table/expandable-data-table.tsx20
-rw-r--r--components/data-table/infinite-data-table.tsx20
4 files changed, 53 insertions, 18 deletions
diff --git a/components/client-data-table/data-table.tsx b/components/client-data-table/data-table.tsx
index 44168bd2..a38de73d 100644
--- a/components/client-data-table/data-table.tsx
+++ b/components/client-data-table/data-table.tsx
@@ -28,6 +28,7 @@ import {
TableRow,
} from "@/components/ui/table"
import { getCommonPinningStylesWithBorder } from "@/lib/data-table"
+import { cn } from "@/lib/utils"
import { ChevronRight, ChevronUp } from "lucide-react"
import { ClientDataTableAdvancedToolbar } from "./data-table-toolbar"
@@ -184,6 +185,13 @@ export function ClientDataTable<TData, TValue>({
emptyRow: "h-24",
}
+ // nested header 감지: columns 속성을 가진 헤더가 있는지 확인
+ const hasNestedHeader = React.useMemo(() => {
+ return table.getHeaderGroups().some(headerGroup =>
+ headerGroup.headers.some(header => 'columns' in header.column.columnDef)
+ )
+ }, [table])
+
// (2) 렌더
return (
<div className="w-full space-y-2.5 overflow-auto">
@@ -203,8 +211,12 @@ export function ClientDataTable<TData, TValue>({
onScroll={handleScroll} // 🎯 스크롤 이벤트 핸들러 추가
>
<UiTable
- className="[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10">
- {/* table-fixed 제거: nested header에서 동적 width 변경을 위해 유연한 레이아웃 사용 */}
+ className={cn(
+ "[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10",
+ !hasNestedHeader && "table-fixed" // nested header가 없으면 table-fixed 적용
+ )}
+ style={{ minWidth: hasNestedHeader ? getTableWidth() : undefined }}>
+ {/* nested header가 있으면 table-fixed 제거, 없으면 적용 */}
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id} className={compactStyles.headerRow}>
diff --git a/components/data-table/data-table.tsx b/components/data-table/data-table.tsx
index f344904e..44cbd47b 100644
--- a/components/data-table/data-table.tsx
+++ b/components/data-table/data-table.tsx
@@ -60,6 +60,13 @@ export function DataTable<TData>({
useAutoSizeColumns(table, autoSizeColumns)
+ // nested header 감지: columns 속성을 가진 헤더가 있는지 확인
+ const hasNestedHeader = React.useMemo(() => {
+ return table.getHeaderGroups().some(headerGroup =>
+ headerGroup.headers.some(header => 'columns' in header.column.columnDef)
+ )
+ }, [table])
+
// ✅ compactStyles를 useMemo로 메모이제이션
const compactStyles = React.useMemo(() =>
compact ? COMPACT_STYLES : NORMAL_STYLES,
@@ -75,8 +82,12 @@ export function DataTable<TData>({
<div className={cn("w-full space-y-2.5 overflow-auto", className)} {...props}>
{stableChildren}
<div className="max-w-[100vw] overflow-auto" style={{ maxHeight: maxHeight || '35rem' }} >
- <Table className="[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10">
- {/* table-fixed 제거: nested header에서 동적 width 변경을 위해 유연한 레이아웃 사용 */}
+ <Table
+ className={cn(
+ "[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10",
+ !hasNestedHeader && "table-fixed" // nested header가 없으면 table-fixed 적용
+ )}>
+ {/* nested header가 있으면 table-fixed 제거, 없으면 적용 */}
{/* 테이블 헤더 */}
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
diff --git a/components/data-table/expandable-data-table.tsx b/components/data-table/expandable-data-table.tsx
index d36f0251..165ebd34 100644
--- a/components/data-table/expandable-data-table.tsx
+++ b/components/data-table/expandable-data-table.tsx
@@ -59,6 +59,13 @@ export function ExpandableDataTable<TData>({
useAutoSizeColumns(table, autoSizeColumns)
+ // nested header 감지: columns 속성을 가진 헤더가 있는지 확인
+ const hasNestedHeader = React.useMemo(() => {
+ return table.getHeaderGroups().some(headerGroup =>
+ headerGroup.headers.some(header => 'columns' in header.column.columnDef)
+ )
+ }, [table])
+
const containerRef = React.useRef<HTMLDivElement>(null)
const scrollRef = React.useRef<HTMLDivElement>(null)
const [expandedHeights, setExpandedHeights] = React.useState<Map<string, number>>(new Map())
@@ -499,13 +506,12 @@ export function ExpandableDataTable<TData>({
style={{ maxHeight: maxHeight || '34rem' }}
onScroll={handleScroll}
>
- <Table
- className="[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10"
- style={{
- width: getTableWidth(),
- minWidth: '100%'
- }}
- >
+ <Table
+ className={cn(
+ "[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10",
+ !hasNestedHeader && "table-fixed" // nested header가 없으면 table-fixed 적용
+ )}>
+ {/* nested header가 있으면 table-fixed 제거, 없으면 적용 */}
<TableHeader className="bg-background">
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id} className={compactStyles.headerRow}>
diff --git a/components/data-table/infinite-data-table.tsx b/components/data-table/infinite-data-table.tsx
index d766f35c..0242e052 100644
--- a/components/data-table/infinite-data-table.tsx
+++ b/components/data-table/infinite-data-table.tsx
@@ -53,6 +53,13 @@ export function InfiniteDataTable<TData>({
useAutoSizeColumns(table, autoSizeColumns)
+ // nested header 감지: columns 속성을 가진 헤더가 있는지 확인
+ const hasNestedHeader = React.useMemo(() => {
+ return table.getHeaderGroups().some(headerGroup =>
+ headerGroup.headers.some(header => 'columns' in header.column.columnDef)
+ )
+ }, [table])
+
// 🎯 스크롤 상태 감지 추가
const [isScrolled, setIsScrolled] = React.useState(false)
@@ -143,13 +150,12 @@ export function InfiniteDataTable<TData>({
style={{ maxHeight: maxHeight || '35rem' }}
onScroll={handleScroll} // 🎯 스크롤 이벤트 핸들러 추가
>
- <Table
- className="[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10"
- style={{
- width: getTableWidth(), // 🎯 동적 너비 계산
- minWidth: '100%'
- }}
- >
+ <Table
+ className={cn(
+ "[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10",
+ !hasNestedHeader && "table-fixed" // nested header가 없으면 table-fixed 적용
+ )}>
+ {/* nested header가 있으면 table-fixed 제거, 없으면 적용 */}
{/* 테이블 헤더 */}
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
generated by cgit v1.2.3 (git 2.39.1) at 2025-12-07 14:05:16 +0000