summaryrefslogtreecommitdiff
path: root/components/form-data/form-data-table-columns.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'components/form-data/form-data-table-columns.tsx')
-rw-r--r--components/form-data/form-data-table-columns.tsx77
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]