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.tsx50
1 files changed, 46 insertions, 4 deletions
diff --git a/components/form-data/form-data-table-columns.tsx b/components/form-data/form-data-table-columns.tsx
index 4db3a724..a1fbcae1 100644
--- a/components/form-data/form-data-table-columns.tsx
+++ b/components/form-data/form-data-table-columns.tsx
@@ -38,6 +38,8 @@ export interface DataTableColumnJSON {
options?: string[];
uom?: string;
uomId?: string;
+ shi?: boolean;
+
}
/**
* getColumns 함수에 필요한 props
@@ -78,17 +80,33 @@ export function getColumns<TData extends object>({
minWidth: 80,
paddingFactor: 1.2,
maxWidth: col.key === "TAG_NO" ? 120 : 150,
+ isReadOnly: col.shi === true, // shi 정보를 메타데이터에 저장
},
// (2) 실제 셀(cell) 렌더링: type에 따라 분기 가능
cell: ({ row }) => {
const cellValue = row.getValue(col.key);
+
+ // shi 속성이 true인 경우 적용할 스타일
+ const isReadOnly = col.shi === true;
+ const readOnlyClass = isReadOnly ? "read-only-cell" : "";
+
+ // 읽기 전용 셀의 스타일 (인라인 스타일과 클래스 동시 적용)
+ const cellStyle = isReadOnly
+ ? { backgroundColor: '#f5f5f5', color: '#666', cursor: 'not-allowed' }
+ : {};
// 데이터 타입별 처리
switch (col.type) {
case "NUMBER":
// 예: number인 경우 콤마 등 표시
return (
- <div>{cellValue ? Number(cellValue).toLocaleString() : ""}</div>
+ <div
+ className={readOnlyClass}
+ style={cellStyle}
+ title={isReadOnly ? "읽기 전용 필드입니다" : ""}
+ >
+ {cellValue ? Number(cellValue).toLocaleString() : ""}
+ </div>
);
// case "date":
@@ -101,11 +119,27 @@ export function getColumns<TData extends object>({
case "LIST":
// 예: select인 경우 label만 표시
- return <div>{String(cellValue ?? "")}</div>;
+ return (
+ <div
+ className={readOnlyClass}
+ style={cellStyle}
+ title={isReadOnly ? "읽기 전용 필드입니다" : ""}
+ >
+ {String(cellValue ?? "")}
+ </div>
+ );
case "STRING":
default:
- return <div>{String(cellValue ?? "")}</div>;
+ return (
+ <div
+ className={readOnlyClass}
+ style={cellStyle}
+ title={isReadOnly ? "읽기 전용 필드입니다" : ""}
+ >
+ {String(cellValue ?? "")}
+ </div>
+ );
}
},
}));
@@ -127,7 +161,15 @@ export function getColumns<TData extends object>({
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-40">
<DropdownMenuItem
- onSelect={() => setRowAction({ row, type: "update" })}
+ onSelect={() => {
+ // 행에 있는 모든 필드가 읽기 전용인지 확인할 수도 있습니다 (선택 사항)
+ // const allColumnsReadOnly = columnsJSON.every(col => col.shi === true);
+ // if(allColumnsReadOnly) {
+ // toast.info("이 항목은 읽기 전용입니다.");
+ // return;
+ // }
+ setRowAction({ row, type: "update" });
+ }}
>
Edit
</DropdownMenuItem>