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
|
"use client"
import * as React from "react"
import { type DataTableAdvancedFilterField } from "@/types/table"
import { useDataTable } from "@/hooks/use-data-table"
import { DataTable } from "@/components/data-table/data-table"
import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
import { getColumns, type AcceptedQuotationItem } from "./accepted-quotations-table-columns"
import { AcceptedQuotationsTableToolbarActions } from "./accepted-quotations-table-toolbar-actions"
interface AcceptedQuotationsTableProps {
data: AcceptedQuotationItem[]
pageCount: number
onRefresh?: () => void
}
export function AcceptedQuotationsTable({
data,
pageCount,
onRefresh,
}: AcceptedQuotationsTableProps) {
// 필터 필드 정의
const filterFields: DataTableAdvancedFilterField<AcceptedQuotationItem>[] = [
{
id: "rfqCode",
label: "RFQ 코드",
type: "text",
placeholder: "RFQ 코드로 필터...",
},
{
id: "vendorName",
label: "업체명",
type: "text",
placeholder: "업체명으로 필터...",
},
{
id: "vendorCode",
label: "업체 코드",
type: "text",
placeholder: "업체 코드로 필터...",
},
{
id: "projNm",
label: "프로젝트명",
type: "text",
placeholder: "프로젝트명으로 필터...",
},
{
id: "vendorCountry",
label: "국가",
type: "text",
placeholder: "국가로 필터...",
},
{
id: "currency",
label: "통화",
type: "select",
options: [
{ label: "USD", value: "USD" },
{ label: "EUR", value: "EUR" },
{ label: "KRW", value: "KRW" },
{ label: "JPY", value: "JPY" },
{ label: "CNY", value: "CNY" },
],
},
{
id: "rfqType",
label: "RFQ 타입",
type: "select",
options: [
{ label: "TOP", value: "TOP" },
{ label: "HULL", value: "HULL" },
],
},
{
id: "dueDate",
label: "마감일",
type: "date",
},
{
id: "acceptedAt",
label: "승인일",
type: "date",
},
]
const columns = React.useMemo(
() => getColumns(),
[]
)
const { table } = useDataTable({
data,
columns,
pageCount,
filterFields,
initialState: {
sorting: [{ id: "acceptedAt", desc: true }],
columnPinning: { left: ["select"] },
},
getRowId: (originalRow) => `${originalRow.id}`,
})
return (
<div className="w-full space-y-2.5 overflow-auto">
<DataTableAdvancedToolbar table={table} filterFields={filterFields}>
<AcceptedQuotationsTableToolbarActions
table={table}
onRefresh={onRefresh}
/>
</DataTableAdvancedToolbar>
<DataTable table={table} />
</div>
)
}
|
