diff options
Diffstat (limited to 'components/form-data/form-data-table-columns.tsx')
| -rw-r--r-- | components/form-data/form-data-table-columns.tsx | 77 |
1 files changed, 45 insertions, 32 deletions
diff --git a/components/form-data/form-data-table-columns.tsx b/components/form-data/form-data-table-columns.tsx index d44616f8..38f5cad8 100644 --- a/components/form-data/form-data-table-columns.tsx +++ b/components/form-data/form-data-table-columns.tsx @@ -27,24 +27,27 @@ export type ColumnType = "STRING" | "NUMBER" | "LIST" export interface DataTableColumnJSON { - key: string + key: string; /** 실제 Excel 등에서 구분용으로 쓰이는 label (고정) */ label: string /** UI 표시용 label (예: 단위를 함께 표시) */ 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 +58,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,7 +74,7 @@ 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 }) => { @@ -81,7 +84,9 @@ export function getColumns<TData extends object>({ switch (col.type) { case "NUMBER": // 예: number인 경우 콤마 등 표시 - return <div>{cellValue ? Number(cellValue).toLocaleString() : ""}</div> + return ( + <div>{cellValue ? Number(cellValue).toLocaleString() : ""}</div> + ); // case "date": // // 예: 날짜 포맷팅 @@ -108,30 +113,38 @@ 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] |
