diff options
| author | joonhoekim <26rote@gmail.com> | 2025-03-25 15:55:45 +0900 |
|---|---|---|
| committer | joonhoekim <26rote@gmail.com> | 2025-03-25 15:55:45 +0900 |
| commit | 1a2241c40e10193c5ff7008a7b7b36cc1d855d96 (patch) | |
| tree | 8a5587f10ca55b162d7e3254cb088b323a34c41b /components/client-data-table/data-table-toolbar.tsx | |
initial commit
Diffstat (limited to 'components/client-data-table/data-table-toolbar.tsx')
| -rw-r--r-- | components/client-data-table/data-table-toolbar.tsx | 100 |
1 files changed, 100 insertions, 0 deletions
diff --git a/components/client-data-table/data-table-toolbar.tsx b/components/client-data-table/data-table-toolbar.tsx new file mode 100644 index 00000000..286cffd6 --- /dev/null +++ b/components/client-data-table/data-table-toolbar.tsx @@ -0,0 +1,100 @@ +"use client" + +import * as React from "react" +import type { DataTableAdvancedFilterField } from "@/types/table" +import { type Table } from "@tanstack/react-table" + +import { cn } from "@/lib/utils" +import { ClientDataTableViewOptions } from "./data-table-view-options" +import { Button } from "../ui/button" +import { Download } from "lucide-react" + +import { exportTableToExcel } from "@/lib/export_all" +import { ClientDataTableSortList } from "./data-table-sort-list" +import { ClientDataTableGroupList } from "./data-table-group-list" +import { ClientDataTableAdvancedFilter } from "./data-table-filter-list" + +interface DataTableAdvancedToolbarProps<TData> + extends React.HTMLAttributes<HTMLDivElement> { + table: Table<TData> + filterFields: DataTableAdvancedFilterField<TData>[] + debounceMs?: number + shallow?: boolean + children?: React.ReactNode +} + +export function ClientDataTableAdvancedToolbar<TData>({ + table, + filterFields = [], + debounceMs = 300, + shallow = true, + children, + className, + ...props +}: DataTableAdvancedToolbarProps<TData>) { + + // 전체 엑셀 내보내기 + const handleExportAll = async () => { + try { + await exportTableToExcel(table, { + filename: "my-data", + onlySelected: false, + excludeColumns: ["select", "actions", "validation", "requestedAmount", "update"], + useGroupHeader: false, + allPages: true, + + }) + } catch (err) { + console.error("Export error:", err) + // 필요하면 토스트나 알림 처리 + } + } + + + + 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"> + <ClientDataTableAdvancedFilter + table={table} + filterFields={filterFields} + /> + <ClientDataTableSortList table={table} /> + <ClientDataTableViewOptions table={table} /> + <ClientDataTableGroupList table={table}/> + <Button variant="outline" size="sm" onClick={handleExportAll}> + <Download className="size-4" /> + {/* i18n 버튼 문구 */} + <span className="hidden sm:inline"> + {"Export All" } + </span> + </Button> + </div> + + {/* 오른쪽: Export 버튼 + children */} + <div className="flex items-center gap-2"> + + + {/* 자식 컴포넌트(추가 버튼 등) */} + {children} + + {/* 선택된 행만 내보내기 버튼 예시 (필요 시 주석 해제) */} + {/* + <Button variant="outline" size="sm" onClick={handleExportSelected}> + <Download className="size-4" /> + <span className="hidden sm:inline"> + {t("common.exportSelected", { defaultValue: "Export Selected" })} + </span> + </Button> + */} + </div> + </div> + ) +}
\ No newline at end of file |
