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
|
"use client"
import * as React from "react"
import type { DataTableAdvancedFilterField } from "@/types/table"
import { type Table } from "@tanstack/react-table"
import { LayoutGrid, TableIcon } from "lucide-react"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"
import { DataTableFilterList } from "@/components/data-table/data-table-filter-list"
import { DataTableSortList } from "@/components/data-table/data-table-sort-list"
import { DataTableViewOptions } from "@/components/data-table/data-table-view-options"
import { DataTablePinList } from "./data-table-pin"
import { PinLeftButton } from "./data-table-pin-left"
import { PinRightButton } from "./data-table-pin-right"
import { DataTableGlobalFilterDetail } from "./data-table-global-filter-detail"
import { DataTableGroupList } from "./data-table-group-list"
interface DataTableAdvancedToolbarDetailProps<TData>
extends React.HTMLAttributes<HTMLDivElement> {
/**
* The table instance returned from useReactTable hook
* @type Table<TData>
*/
table: Table<TData>
/**
* An array of filter field configurations for the data table.
* @type DataTableAdvancedFilterField<TData>[]
*/
filterFields: DataTableAdvancedFilterField<TData>[]
/**
* Debounce time (ms) for filter updates to enhance performance during rapid input.
* @default 300
*/
debounceMs?: number
/**
* 컴팩트 모드를 사용할지 여부 (토글 버튼을 숨기려면 null)
* @default true
*/
enableCompactToggle?: boolean | null
/**
* 초기 컴팩트 모드 상태
* @default false
*/
initialCompact?: boolean
/**
* 컴팩트 모드가 변경될 때 호출될 콜백 함수
*/
onCompactChange?: (isCompact: boolean) => void
}
export function DataTableAdvancedToolbarDetail<TData>({
table,
filterFields = [],
debounceMs = 300,
enableCompactToggle = true,
initialCompact = false,
onCompactChange,
children,
className,
...props
}: DataTableAdvancedToolbarDetailProps<TData>) {
const [isCompact, setIsCompact] = React.useState(initialCompact)
const handleCompactToggle = React.useCallback(() => {
const newCompact = !isCompact
setIsCompact(newCompact)
onCompactChange?.(newCompact)
}, [isCompact, onCompactChange])
return (
<div
className={cn(
"flex w-full items-center justify-between gap-2 overflow-auto p-1",
className
)}
{...props}
>
<div className="flex items-center gap-2">
{enableCompactToggle !== null && (
<Button
variant="outline"
size="sm"
onClick={handleCompactToggle}
title={isCompact ? "확장 보기로 전환" : "컴팩트 보기로 전환"}
className="h-8 px-2"
>
{isCompact ? <LayoutGrid size={16} /> : <TableIcon size={16} />}
</Button>
)}
<DataTableViewOptions table={table} />
<DataTableFilterList
table={table}
filterFields={filterFields}
debounceMs={debounceMs}
/>
<DataTableSortList
table={table}
debounceMs={debounceMs}
/>
<DataTableGroupList table={table} debounceMs={debounceMs} />
<PinLeftButton table={table} />
<PinRightButton table={table} />
<DataTableGlobalFilterDetail table={table} />
</div>
<div className="flex items-center gap-2">
{children}
</div>
</div>
)
}
|
