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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
"use client";
import { ColumnDef } from "@tanstack/react-table";
import { Checkbox } from "@/components/ui/checkbox";
import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header";
import Link from "next/link";
// 타입만 import
type TechVendorPossibleItemsData = {
id: number;
vendorId: number;
vendorCode: string | null;
vendorName: string;
techVendorType: string;
itemCode: string;
createdAt: Date;
updatedAt: Date;
};
import { format } from "date-fns";
import { ko } from "date-fns/locale";
import { Badge } from "@/components/ui/badge";
export function getColumns(): ColumnDef<TechVendorPossibleItemsData>[] {
return [
{
id: "select",
header: ({ table }) => (
<Checkbox
checked={
table.getIsAllPageRowsSelected() ||
(table.getIsSomePageRowsSelected() && "indeterminate")
}
onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
aria-label="모두 선택"
className="translate-y-[2px]"
/>
),
cell: ({ row }) => (
<Checkbox
checked={row.getIsSelected()}
onCheckedChange={(value) => row.toggleSelected(!!value)}
aria-label="행 선택"
className="translate-y-[2px]"
/>
),
enableSorting: false,
enableHiding: false,
},
{
accessorKey: "itemCode",
header: ({ column }) => (
<DataTableColumnHeaderSimple column={column} title="아이템코드" />
),
cell: ({ row }) => {
const itemCode = row.getValue("itemCode") as string;
return <div className="font-medium">{itemCode}</div>;
},
},
{
accessorKey: "vendorCode",
header: ({ column }) => (
<DataTableColumnHeaderSimple column={column} title="벤더코드" />
),
cell: ({ row }) => {
const vendorCode = row.getValue("vendorCode") as string;
return <div className="font-medium">{vendorCode || "-"}</div>;
},
},
{
accessorKey: "vendorName",
header: ({ column }) => (
<DataTableColumnHeaderSimple column={column} title="벤더명" />
),
cell: ({ row }) => {
const vendorName = row.getValue("vendorName") as string;
const vendorId = row.original.vendorId;
return (
<Link
href={`/ko/evcp/tech-vendors/${vendorId}/info`}
className="max-w-[200px] truncate hover:underline"
>
{vendorName}
</Link>
);
},
},
{
accessorKey: "techVendorType",
header: ({ column }) => (
<DataTableColumnHeaderSimple column={column} title="벤더타입" />
),
cell: ({ row }) => {
const techVendorType = row.getValue("techVendorType") as string;
// JSON 배열인지 확인하고 파싱
let types: string[] = [];
try {
const parsed = JSON.parse(techVendorType || "[]");
types = Array.isArray(parsed) ? parsed : [techVendorType];
} catch {
types = [techVendorType];
}
return (
<div className="flex flex-wrap gap-1">
{types.map((type, index) => (
<Badge key={index} variant="secondary" className="text-xs">
{type}
</Badge>
))}
</div>
);
},
filterFn: (row, id, value) => {
const techVendorType = row.getValue(id) as string;
try {
const parsed = JSON.parse(techVendorType || "[]");
const types = Array.isArray(parsed) ? parsed : [techVendorType];
return types.some(type => type.includes(value));
} catch {
return techVendorType?.includes(value) || false;
}
},
},
{
accessorKey: "createdAt",
header: ({ column }) => (
<DataTableColumnHeaderSimple column={column} title="생성일시" />
),
cell: ({ row }) => {
const createdAt = row.getValue("createdAt") as Date;
return (
<div className="text-sm text-muted-foreground">
{format(createdAt, "yyyy-MM-dd HH:mm", { locale: ko })}
</div>
);
},
},
];
}
|
