summaryrefslogtreecommitdiff
path: root/components/form-data/form-data-table-columns.tsx
diff options
context:
space:
mode:
authorrlaks5757 <rlaks5757@gmail.com>2025-03-26 16:51:54 +0900
committerrlaks5757 <rlaks5757@gmail.com>2025-03-27 17:32:42 +0900
commit92ddb4f13d48cbf344dc2bf63df4457b3c713608 (patch)
tree38108e1ca08a86c1b36941d39acc47601529a14a /components/form-data/form-data-table-columns.tsx
parent2ca4c91514feadb5edd0c9411670c7d9964d21e3 (diff)
feat: report batch download 기능 완료
Diffstat (limited to 'components/form-data/form-data-table-columns.tsx')
-rw-r--r--components/form-data/form-data-table-columns.tsx112
1 files changed, 62 insertions, 50 deletions
diff --git a/components/form-data/form-data-table-columns.tsx b/components/form-data/form-data-table-columns.tsx
index d44616f8..b23b2e70 100644
--- a/components/form-data/form-data-table-columns.tsx
+++ b/components/form-data/form-data-table-columns.tsx
@@ -1,8 +1,8 @@
-import type { ColumnDef, Row } from "@tanstack/react-table"
-import { ClientDataTableColumnHeaderSimple } from "../client-data-table/data-table-column-simple-header"
-import { Button } from "@/components/ui/button"
-import { Ellipsis } from "lucide-react"
-import { formatDate } from "@/lib/utils"
+import type { ColumnDef, Row } from "@tanstack/react-table";
+import { ClientDataTableColumnHeaderSimple } from "../client-data-table/data-table-column-simple-header";
+import { Button } from "@/components/ui/button";
+import { Ellipsis } from "lucide-react";
+import { formatDate } from "@/lib/utils";
import {
DropdownMenu,
DropdownMenuContent,
@@ -15,36 +15,38 @@ import {
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from "@/components/ui/dropdown-menu";
/** row 액션 관련 타입 */
export interface DataTableRowAction<TData> {
- row: Row<TData>
- type: "open" | "edit" | "update"
+ row: Row<TData>;
+ type: "open" | "edit" | "update";
}
/** 컬럼 타입 (필요에 따라 확장) */
-export type ColumnType = "STRING" | "NUMBER" | "LIST"
-
+export type ColumnType = "STRING" | "NUMBER" | "LIST";
export interface DataTableColumnJSON {
- key: string
+ key: string;
/** 실제 Excel 등에서 구분용으로 쓰이는 label (고정) */
- label: string
+ label: string;
/** UI 표시용 label (예: 단위를 함께 표시) */
- displayLabel?: string
+ displayLabel?: string;
- type: ColumnType
- options?: string[]
- uom?: string
+ type: ColumnType;
+ options?: string[];
+ uom?: string;
}
-/**
- * getColumns 함수에 필요한 props
+/**
+ * getColumns 함수에 필요한 props
* - TData: 테이블에 표시할 행(Row)의 타입
*/
interface GetColumnsProps<TData> {
- columnsJSON: DataTableColumnJSON[]
- setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<TData> | null>>
+ columnsJSON: DataTableColumnJSON[];
+ setRowAction: React.Dispatch<
+ React.SetStateAction<DataTableRowAction<TData> | null>
+ >;
+ setReportData: React.Dispatch<React.SetStateAction<{ [key: string]: any }[]>>;
}
/**
@@ -55,8 +57,8 @@ interface GetColumnsProps<TData> {
export function getColumns<TData extends object>({
columnsJSON,
setRowAction,
+ setReportData,
}: GetColumnsProps<TData>): ColumnDef<TData>[] {
-
// (1) 기본 컬럼들
const baseColumns: ColumnDef<TData>[] = columnsJSON.map((col) => ({
accessorKey: col.key,
@@ -71,17 +73,19 @@ export function getColumns<TData extends object>({
excelHeader: col.label,
minWidth: 80,
paddingFactor: 1.2,
- maxWidth: col.key ==="tagNumber"?120:150,
+ maxWidth: col.key === "tagNumber" ? 120 : 150,
},
// (2) 실제 셀(cell) 렌더링: type에 따라 분기 가능
cell: ({ row }) => {
- const cellValue = row.getValue(col.key)
+ const cellValue = row.getValue(col.key);
// 데이터 타입별 처리
switch (col.type) {
case "NUMBER":
// 예: number인 경우 콤마 등 표시
- return <div>{cellValue ? Number(cellValue).toLocaleString() : ""}</div>
+ return (
+ <div>{cellValue ? Number(cellValue).toLocaleString() : ""}</div>
+ );
// case "date":
// // 예: 날짜 포맷팅
@@ -93,14 +97,14 @@ export function getColumns<TData extends object>({
case "LIST":
// 예: select인 경우 label만 표시
- return <div>{String(cellValue ?? "")}</div>
+ return <div>{String(cellValue ?? "")}</div>;
case "STRING":
default:
- return <div>{String(cellValue ?? "")}</div>
+ return <div>{String(cellValue ?? "")}</div>;
}
},
- }))
+ }));
// (3) 액션 칼럼 - update 버튼 예시
const actionColumn: ColumnDef<TData> = {
@@ -108,31 +112,39 @@ export function getColumns<TData extends object>({
header: "",
cell: ({ row }) => (
<DropdownMenu>
- <DropdownMenuTrigger asChild>
- <Button
- aria-label="Open menu"
- variant="ghost"
- className="flex size-8 p-0 data-[state=open]:bg-muted"
- >
- <Ellipsis className="size-4" aria-hidden="true" />
- </Button>
- </DropdownMenuTrigger>
- <DropdownMenuContent align="end" className="w-40">
- <DropdownMenuItem
- onSelect={() => setRowAction({ row, type: "update" })}
- >
- Edit
- </DropdownMenuItem>
- </DropdownMenuContent>
- </DropdownMenu>
+ <DropdownMenuTrigger asChild>
+ <Button
+ aria-label="Open menu"
+ variant="ghost"
+ className="flex size-8 p-0 data-[state=open]:bg-muted"
+ >
+ <Ellipsis className="size-4" aria-hidden="true" />
+ </Button>
+ </DropdownMenuTrigger>
+ <DropdownMenuContent align="end" className="w-40">
+ <DropdownMenuItem
+ onSelect={() => setRowAction({ row, type: "update" })}
+ >
+ Edit
+ </DropdownMenuItem>
+ <DropdownMenuItem
+ onSelect={() => {
+ const { original } = row;
+ setReportData([original]);
+ }}
+ >
+ Create Report
+ </DropdownMenuItem>
+ </DropdownMenuContent>
+ </DropdownMenu>
),
- size:40,
- meta:{
- maxWidth:40
+ size: 40,
+ meta: {
+ maxWidth: 40,
},
enablePinning: true,
- }
+ };
// (4) 최종 반환
- return [...baseColumns, actionColumn]
-} \ No newline at end of file
+ return [...baseColumns, actionColumn];
+}