1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
"use client"
import * as React from "react"
import { type DataTableRowAction } from "@/types/table"
import { type ColumnDef } from "@tanstack/react-table"
import { Eye } from "lucide-react"
import { formatDate } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
import { Project } from "@/db/schema"
import { projectsColumnsConfig } from "@/config/projectsColumnsConfig"
interface GetColumnsProps {
setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<Project> | null>>
onDetailClick: (project: Project) => void
}
/**
* tanstack table 컬럼 정의 (중첩 헤더 버전)
*/
// eslint-disable-next-line @typescript-eslint/no-unused-vars
export function getColumns({ setRowAction, onDetailClick }: GetColumnsProps): ColumnDef<Project>[] {
// 상세보기 버튼 컬럼
const detailColumn: ColumnDef<Project> = {
id: "action",
header: "상세보기",
size: 100,
cell: ({ row }) => {
const project = row.original
return (
<Button
variant="ghost"
size="sm"
onClick={() => onDetailClick(project)}
className="h-8 w-8 p-0"
>
<Eye className="h-4 w-4" />
<span className="sr-only">상세보기</span>
</Button>
)
},
}
// ----------------------------------------------------------------
// 3) 일반 컬럼들을 "그룹"별로 묶어 중첩 columns 생성
// ----------------------------------------------------------------
// 3-1) groupMap: { [groupName]: ColumnDef<Project>[] }
const groupMap: Record<string, ColumnDef<Project>[]> = {}
projectsColumnsConfig.forEach((cfg) => {
// 만약 group가 없으면 "_noGroup" 처리
const groupName = cfg.group || "_noGroup"
if (!groupMap[groupName]) {
groupMap[groupName] = []
}
// child column 정의
const childCol: ColumnDef<Project> = {
accessorKey: cfg.id,
enableResizing: true,
header: ({ column }) => (
<DataTableColumnHeaderSimple column={column} title={cfg.label} />
),
meta: {
excelHeader: cfg.excelHeader,
group: cfg.group,
type: cfg.type,
},
cell: ({ row, cell }) => {
if (cfg.id === "createdAt"||cfg.id === "updatedAt") {
const dateVal = cell.getValue() as Date
return formatDate(dateVal, "KR")
}
return row.getValue(cfg.id) ?? ""
},
}
groupMap[groupName].push(childCol)
})
// ----------------------------------------------------------------
// 3-2) groupMap에서 실제 상위 컬럼(그룹)을 만들기
// ----------------------------------------------------------------
const nestedColumns: ColumnDef<Project>[] = []
// 순서를 고정하고 싶다면 group 순서를 미리 정의하거나 sort해야 함
// 여기서는 그냥 Object.entries 순서
Object.entries(groupMap).forEach(([groupName, colDefs]) => {
if (groupName === "_noGroup") {
// 그룹 없음 → 그냥 최상위 레벨 컬럼
nestedColumns.push(...colDefs)
} else {
// 상위 컬럼
nestedColumns.push({
id: groupName,
header: groupName, // "Basic Info", "Metadata" 등
columns: colDefs,
})
}
})
// ----------------------------------------------------------------
// 4) 최종 컬럼 배열: detailColumn, nestedColumns
// ----------------------------------------------------------------
return [
detailColumn,
...nestedColumns,
]
}
|
