diff options
| author | rlaks5757 <rlaks5757@gmail.com> | 2025-03-26 16:51:54 +0900 |
|---|---|---|
| committer | rlaks5757 <rlaks5757@gmail.com> | 2025-03-27 17:32:42 +0900 |
| commit | 92ddb4f13d48cbf344dc2bf63df4457b3c713608 (patch) | |
| tree | 38108e1ca08a86c1b36941d39acc47601529a14a /components/form-data/form-data-table-columns.tsx | |
| parent | 2ca4c91514feadb5edd0c9411670c7d9964d21e3 (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.tsx | 112 |
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]; +} |
