@noraent/nora-datagrid 0.0.4 → 0.0.6

package/lib/cjs/App.js

@@ -1,131 +1,131 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { DataGrid } from "./DataGrid";
 function App() {
     const ref = React.useRef(null);
-    return (_jsxs("div", { style: { width: "1200px", height: "500px" }, children: [_jsx("button", { children: "dd" }), _jsx("button", { children: "dd" }), _jsx(DataGrid, { gridRef: ref, columns: [
-                    {
-                        fieldId: "firstName",
-                        fieldName: "코드",
-                    },
-                    {
-                        fieldId: "lastName",
-                        fieldName: "이름",
-                        width: "120",
-                    },
-                    {
-                        fieldId: "currency",
-                        fieldName: "성명",
-                        width: "120",
-                    },
-                    {
-                        fieldId: "currency4",
-                        fieldName: "국가",
-                        width: "140",
-                    },
-                    {
-                        fieldId: "currency5",
-                        fieldName: "구매링크",
-                        width: "120",
-                    },
-                    {
-                        fieldId: "currency6",
-                        fieldName: "카드",
-                        width: "130",
-                    },
-                    {
-                        fieldId: "currency7",
-                        fieldName: "카드번호",
-                        width: "120",
-                    },
-                    {
-                        fieldId: "currency8",
-                        fieldName: "currency8",
-                        width: "140",
-                    },
-                    {
-                        fieldId: "currency9",
-                        fieldName: "currency9",
-                        width: "120",
-                    },
-                    {
-                        fieldId: "currency10",
-                        fieldName: "currency10",
-                        width: "130",
-                    },
-                    {
-                        fieldId: "currency11",
-                        fieldName: "currency11",
-                        width: "120",
-                    },
-                    {
-                        fieldId: "currency12",
-                        fieldName: "currency12",
-                        width: "120",
-                    },
-                    {
-                        fieldId: "currency13",
-                        fieldName: "Currency13",
-                        width: "120",
-                    },
-                    {
-                        fieldId: "currency14",
-                        fieldName: "currency14",
-                        width: "120",
-                    },
-                    {
-                        fieldId: "currency15",
-                        fieldName: "currency15",
-                        width: "120",
-                    },
-                    {
-                        fieldId: "currency16",
-                        fieldName: "Currency16",
-                        width: "120",
-                    },
-                    {
-                        fieldId: "currency17",
-                        fieldName: "currency17",
-                        width: "120",
-                    },
-                    {
-                        fieldId: "currency18",
-                        fieldName: "currency18",
-                        width: "120",
-                    },
-                    {
-                        fieldId: "currency19",
-                        fieldName: "currency19",
-                        width: "120",
-                    },
-                    {
-                        fieldId: "currency19",
-                        fieldName: "Currency19",
-                        width: "120",
-                    },
-                    {
-                        fieldId: "currency20",
-                        fieldName: "currency20",
-                        width: "120",
-                    },
-                    {
-                        fieldId: "currency21",
-                        fieldName: "currency21",
-                        width: "120",
-                    },
-                ], dataSource: Array.from({ length: 100 }, (_, i) => {
-                    return {
-                        id: i,
-                        firstName: `test-${i}`,
-                        lastName: `lastName-${i}`,
-                        currency: `currency-${i}`,
-                        currency14: `currency14-${i}`,
-                        currency15: `currency15-${i}`,
-                        __uuid: "",
-                        // height: 30,
-                        // height: Math.floor(Math.random() * 20) + 20,
-                    };
-                }) }), _jsx("button", { children: "dd" })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("button", { children: "dd" }), _jsx("button", { children: "dd" }), _jsx("div", { style: { width: "1200px", height: "100%", maxHeight: "600px" }, children: _jsx(DataGrid, { readOnly: true, gridRef: ref, columns: [
+                        {
+                            fieldId: "firstName",
+                            fieldName: "코드",
+                        },
+                        {
+                            fieldId: "lastName",
+                            fieldName: "이름",
+                            width: "120",
+                        },
+                        {
+                            fieldId: "currency",
+                            fieldName: "성명",
+                            width: "120",
+                        },
+                        {
+                            fieldId: "currency4",
+                            fieldName: "국가",
+                            width: "140",
+                        },
+                        {
+                            fieldId: "currency5",
+                            fieldName: "구매링크",
+                            width: "120",
+                        },
+                        {
+                            fieldId: "currency6",
+                            fieldName: "카드",
+                            width: "130",
+                        },
+                        {
+                            fieldId: "currency7",
+                            fieldName: "카드번호",
+                            width: "120",
+                        },
+                        {
+                            fieldId: "currency8",
+                            fieldName: "currency8",
+                            width: "140",
+                        },
+                        {
+                            fieldId: "currency9",
+                            fieldName: "currency9",
+                            width: "120",
+                        },
+                        {
+                            fieldId: "currency10",
+                            fieldName: "currency10",
+                            width: "130",
+                        },
+                        {
+                            fieldId: "currency11",
+                            fieldName: "currency11",
+                            width: "120",
+                        },
+                        {
+                            fieldId: "currency12",
+                            fieldName: "currency12",
+                            width: "120",
+                        },
+                        {
+                            fieldId: "currency13",
+                            fieldName: "Currency13",
+                            width: "120",
+                        },
+                        {
+                            fieldId: "currency14",
+                            fieldName: "currency14",
+                            width: "120",
+                        },
+                        {
+                            fieldId: "currency15",
+                            fieldName: "currency15",
+                            width: "120",
+                        },
+                        {
+                            fieldId: "currency16",
+                            fieldName: "Currency16",
+                            width: "120",
+                        },
+                        {
+                            fieldId: "currency17",
+                            fieldName: "currency17",
+                            width: "120",
+                        },
+                        {
+                            fieldId: "currency18",
+                            fieldName: "currency18",
+                            width: "120",
+                        },
+                        {
+                            fieldId: "currency19",
+                            fieldName: "currency19",
+                            width: "120",
+                        },
+                        {
+                            fieldId: "currency19",
+                            fieldName: "Currency19",
+                            width: "120",
+                        },
+                        {
+                            fieldId: "currency20",
+                            fieldName: "currency20",
+                            width: "120",
+                        },
+                        {
+                            fieldId: "currency21",
+                            fieldName: "currency21",
+                            width: "120",
+                        },
+                    ], dataSource: Array.from({ length: 30 }, (_, i) => {
+                        return {
+                            id: i,
+                            firstName: `test-${i}`,
+                            lastName: `lastName-${i}`,
+                            currency: `currency-${i}`,
+                            currency14: `currency14-${i}`,
+                            currency15: `currency15-${i}`,
+                            __uuid: "",
+                            // height: 30,
+                            // height: Math.floor(Math.random() * 20) + 20,
+                        };
+                    }) }) }), _jsx("button", { children: "dd" })] }));
 }
 export const initialItemsData = () => Array.from({ length: 10 }, (_, i) => {
     return {

package/lib/cjs/DataGrid.js

@@ -32,6 +32,6 @@ const DataGridMaster = React.forwardRef((props, _ref) => {
     //   }
     //   return () => clearInterval(id);
     // }, [count]);
-    return (_jsx(_Fragment, { children: _jsx(GridApiContext.Provider, { value: apiRef, children: _jsxs(GridStoreContentProvider, { value: apiRef, children: [_jsx("button", { onClick: () => { }, children: "!!" }), _jsxs(NoraDataGrid, { ref: containerRef, children: [_jsx(NoraDataGrid.Title, { children: "\uC624\uBC84\uB77C\uC774\uB4DC \uD588\uC5B4\uC6A9" }), _jsx(NoraDataGrid.Body, { children: !isPending && apiRef.current.store && _jsx(TwoDimensionalVirtualizedList, {}) })] })] }) }) }));
+    return (_jsx(_Fragment, { children: _jsx(GridApiContext.Provider, { value: apiRef, children: _jsx(GridStoreContentProvider, { value: apiRef, children: _jsxs(NoraDataGrid, { ref: containerRef, children: [_jsx(NoraDataGrid.Title, {}), _jsx(NoraDataGrid.Body, { children: !isPending && apiRef.current.store && _jsx(TwoDimensionalVirtualizedList, {}) })] }) }) }) }));
 });
 export const DataGrid = React.memo(DataGridMaster);

package/lib/cjs/buildPackage.json

@@ -1,6 +1,6 @@
 {
   "name": "@noraent/nora-datagrid",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "module": "./lib/esm/index.js",
   "main": "./lib/cjs/index.js",
   "private": false,

package/lib/cjs/components/TwoDimensionalVirtualizedList.js

@@ -10,6 +10,7 @@ import { useSelector, useStore } from "../provider/GridStoreContent";
 import { EditStatus } from "../types/dataGridCoreEnum";
 import CellMode from "./cell/CellMode";
 import ImeComponent from "./ime/IMEComponent";
+import NoDataComponent from "./body/NoDataComponent";
 const initialWindowWidth = 800;
 export const initialWindowHeight = 500;
 const initialBodyHeight = initialWindowHeight - 34;
@@ -31,15 +32,30 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
     const rightScrollRef = useRef(null);
     const bottomScrollRef = useRef(null);
     useEffect(() => {
-        const handleResize = () => {
-            var _a, _b, _c, _d, _f, _g;
-            const store = gridRef.current.store;
-            const width = (_c = (_b = (_a = store === null || store === void 0 ? void 0 : store.gridContainer.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.clientWidth) !== null && _c !== void 0 ? _c : 0;
-            const height = (_g = (_f = (_d = store === null || store === void 0 ? void 0 : store.gridContainer.current) === null || _d === void 0 ? void 0 : _d.parentElement) === null || _f === void 0 ? void 0 : _f.clientHeight) !== null && _g !== void 0 ? _g : 0;
-            setWindowSize({ width, height });
-        };
-        handleResize();
-        window.addEventListener("resize", handleResize);
+        var _a;
+        const store = gridRef.current.store;
+        const parentElement = (_a = store === null || store === void 0 ? void 0 : store.gridContainer.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+        // ResizeObserver 인스턴스 생성: 부모 요소의 크기 변화를 감지함
+        const observer = new ResizeObserver((entries) => {
+            // 감지된 모든 요소에 대해 반복
+            for (let entry of entries) {
+                // 감지된 요소의 현재 너비를 가져옴
+                const parentWidth = entry.contentRect.width;
+                const parentHeight = entry.contentRect.height;
+                // 새로운 자식 요소의 크기 계산
+                const newWidth = parentWidth;
+                const newHeight = parentHeight;
+                // // 자식 요소의 현재 크기와 새 크기가 다른 경우, 크기를 업데이트
+                setWindowSize({
+                    width: newWidth,
+                    height: newHeight,
+                });
+            }
+        });
+        // 부모 요소에 대한 참조가 있을 경우, 감지 시작
+        if (parentElement) {
+            observer.observe(parentElement);
+        }
         window.addEventListener("focusout", (event) => {
             var _a;
             if (((_a = event.target.nextElementSibling) === null || _a === void 0 ? void 0 : _a.className) === "nora-data-grid-container") {
@@ -47,7 +63,9 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
             }
         });
         return () => {
-            window.removeEventListener("resize", handleResize);
+            if (parentElement) {
+                observer.unobserve(parentElement);
+            }
         };
     }, []);
     const { columns } = useSelector((store) => ({
@@ -112,7 +130,8 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
         }
         // 포함 안되어있으면 추가
         if (rowIndex && rowIndex >= end) {
-            result.push(dataSource[rowIndex - 1]); // fixedIndex가 범위에 포함되지 않으면 첫 번째에 추가
+            if (result[result.length - 1].__ariaRowindex !== dataSource[rowIndex - 1].__ariaRowindex)
+                result.push(dataSource[rowIndex - 1]); // fixedIndex가 범위에 포함되지 않으면 첫 번째에 추가
         }
         return result;
     }, [dataSource, start, end]);
@@ -194,30 +213,30 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
         console.log("start, end!", start, end);
         gridRef.current.store.state.renderedRowStartEnd = [start, end];
     }, [start, end]);
-    return (_jsxs("div", { style: { position: "relative" }, children: [_jsx("div", { style: {
+    return (_jsxs("div", { style: { position: "relative" }, children: [_jsxs("div", { style: {
                     height: `${windowSize.height}px`,
                     width: `${windowSize.width}px`,
-                }, children: _jsxs(TableBody, { ref: domRef, style: {
-                        height: "100%",
-                        position: "relative",
-                        display: "flex",
-                        flexDirection: "column",
-                        overflow: "scroll",
-                        scrollbarWidth: "none",
-                    }, className: classes.TableClasses.body.scroll.root, onScroll: handleScroll, children: [_jsx(VirtualHorizontalHeader, { offsetLeft: offsetLeft, startColumnIndex: startColumnIndex, cumulativeWidths: cumulativeWidths, windowSize: windowSize, columnEndIndex: columnEndIndex }), _jsx("div", { style: {
-                                flexBasis: `${totalHeight}px`,
-                                flexShrink: 0,
-                            }, children: _jsx("div", { style: {
-                                    willChange: "transform, opacity",
-                                    transform: `translate3d(${offsetLeft}px, ${offsetTop}px, 0px)`,
-                                    position: "absolute",
-                                }, children: children(React.useMemo(() => ({
-                                    visibleItems,
-                                    startColumnIndex,
-                                    cumulativeWidths,
-                                    windowSize,
-                                    columnEndIndex,
-                                }), [visibleItems, startColumnIndex, cumulativeWidths, windowSize, columnEndIndex])) }) })] }) }), _jsx(RightScrollBar, { ref: rightScrollRef, style: { height: initialBodyHeight - 20, right: "0px" }, onScroll: handleScrollController, children: _jsx("div", { style: { width: "14px", height: `${totalHeight}px` } }) }), _jsx(BottomScrollBar, { ref: bottomScrollRef, style: { width: windowSize.width }, onScroll: handleScrollBottomController, children: _jsx("div", { style: { height: "14px", width: `${totalWidth}px` } }) })] }));
+                }, children: [_jsx(NoDataComponent, {}), _jsxs(TableBody, { ref: domRef, style: {
+                            height: "100%",
+                            position: "relative",
+                            display: "flex",
+                            flexDirection: "column",
+                            overflow: "scroll",
+                            scrollbarWidth: "none",
+                        }, className: classes.TableClasses.body.scroll.root, onScroll: handleScroll, children: [_jsx(VirtualHorizontalHeader, { offsetLeft: offsetLeft, startColumnIndex: startColumnIndex, cumulativeWidths: cumulativeWidths, windowSize: windowSize, columnEndIndex: columnEndIndex }), _jsx("div", { style: {
+                                    flexBasis: `${totalHeight}px`,
+                                    flexShrink: 0,
+                                }, children: _jsx("div", { style: {
+                                        willChange: "transform, opacity",
+                                        transform: `translate3d(${offsetLeft}px, ${offsetTop}px, 0px)`,
+                                        position: "absolute",
+                                    }, children: children(React.useMemo(() => ({
+                                        visibleItems,
+                                        startColumnIndex,
+                                        cumulativeWidths,
+                                        windowSize,
+                                        columnEndIndex,
+                                    }), [visibleItems, startColumnIndex, cumulativeWidths, windowSize, columnEndIndex])) }) })] })] }), _jsx(RightScrollBar, { ref: rightScrollRef, style: { height: windowSize.height - 40, right: "0px" }, onScroll: handleScrollController, children: _jsx("div", { style: { width: "14px", height: `${totalHeight}px` } }) }), _jsx(BottomScrollBar, { ref: bottomScrollRef, style: { width: windowSize.width }, onScroll: handleScrollBottomController, children: _jsx("div", { style: { height: "14px", width: `${totalWidth}px` } }) })] }));
 });
 const VirtualListItem = React.memo(({ item, startColumnIndex, cumulativeWidths, windowSize, columnEndIndex, isColIndex, editStatus }) => {
     const { columns, dataSource } = useSelector((store) => ({
@@ -240,7 +259,7 @@ const VirtualListItem = React.memo(({ item, startColumnIndex, cumulativeWidths,
 const VirtualItem = React.memo(({ column, row, isFocus, editStatus, rowIndex, }) => {
     const cellStyle = useMemo(() => ({ width: `${column.width}px` }), [column.width]);
     const cellClassName = useMemo(() => cx(classes.TableClasses.body.row.cell.root, classes.TableClasses.body.row.cell.classes), [classes.TableClasses.body.row.cell.root, classes.TableClasses.body.row.cell.classes]);
-    return (_jsx(TableCell, { "aria-colindex": column.__ariaColindex, tabIndex: isFocus ? 0 : -1, style: cellStyle, className: cellClassName, children: _jsx(CellMode, { column: column, value: row[column.fieldId], editStatus: editStatus, rowIndex: rowIndex }) }, column.__uuid));
+    return (_jsx(TableCell, { "aria-colindex": column.__ariaColindex, tabIndex: isFocus ? 0 : -1, style: cellStyle, className: cellClassName, children: _jsx(CellMode, { column: column, value: row ? row[column.fieldId] : "", editStatus: editStatus, rowIndex: rowIndex }) }, column.__uuid));
 });
 export const TwoDimensionalVirtualizedList = React.memo(() => {
     // 마우스 다운 시작지점점
@@ -497,9 +516,13 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
     }, []);
     const handleKeydown = useCallback((e) => {
         handleArrowKey(e);
+        if (gridRef.current.store.state.readOnly)
+            return;
         handleEditEvent(e);
     }, []);
     const handleDbClick = useCallback(() => {
+        if (gridRef.current.store.state.readOnly)
+            return;
         gridRef.current.setEditStatus(EditStatus.EDITING).then((editState) => {
             store.setState(["state", "editStatus"], editState);
         });

package/lib/cjs/components/body/NoDataComponent.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/lib/cjs/components/body/NoDataComponent.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo } from "react";
+import { useSelector } from "../../provider/GridStoreContent";
+import { ErrorIconBox, NoDataContent, NoDataTitle } from "./_styled";
+const NoDataComponent = () => {
+    const { dataSource } = useSelector((store) => ({
+        dataSource: store.state.dataSource,
+    }));
+    if (!dataSource || (dataSource && dataSource.length === 0)) {
+        return (_jsxs(NoDataContent, { children: [_jsx(ErrorIconBox, { children: _jsx(ErrorSvg, {}) }), _jsx(NoDataTitle, { children: "\uB370\uC774\uD130 \uC5C6\uC74C." })] }));
+    }
+    return _jsx(_Fragment, {});
+};
+function ErrorSvg() {
+    return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("g", { id: "bxs:error", children: _jsx("path", { id: "Vector", d: "M12.884 2.532C12.538 1.878 11.462 1.878 11.116 2.532L2.11596 19.532C2.03494 19.6844 1.99478 19.8551 1.99938 20.0276C2.00398 20.2001 2.05319 20.3685 2.14221 20.5164C2.23124 20.6642 2.35704 20.7864 2.50736 20.8712C2.65768 20.956 2.82739 21.0003 2.99996 21H21C21.1724 21.0004 21.342 20.956 21.4922 20.8713C21.6424 20.7866 21.7681 20.6644 21.8571 20.5167C21.946 20.3689 21.9951 20.2006 21.9997 20.0282C22.0042 19.8559 21.964 19.6852 21.883 19.533L12.884 2.532ZM13 18H11V16H13V18ZM11 14V9H13L13.001 14H11Z", fill: "white" }) }) }));
+}
+export default memo(NoDataComponent);

package/lib/cjs/components/body/_styled/index.d.ts

@@ -0,0 +1,12 @@
+export declare const NoDataContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const NoDataTitle: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+export declare const ErrorIconBox: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/cjs/components/body/_styled/index.js

@@ -0,0 +1,26 @@
+import styled from "@emotion/styled";
+export const NoDataContent = styled("div")(() => ({
+    display: "flex",
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "8px",
+}));
+export const NoDataTitle = styled("h2")(() => ({
+    fontSize: "14px",
+    fontWeight: "500",
+    color: "#5e5e5e", // 색상정의 필요 디자인 토큰 없는 관계로 하드 코딩
+}));
+export const ErrorIconBox = styled("div")(() => ({
+    display: "flex",
+    width: "48px",
+    height: "48px",
+    background: "rgb(221, 221, 221)",
+    borderRadius: "50px",
+    justifyContent: "center",
+    alignItems: "center",
+}));

package/lib/cjs/components/cell/CellMode.js

@@ -19,13 +19,13 @@ const CellMode = ({ column, value, editStatus, rowIndex, }) => {
     }, [editStatus]);
     const store = useStore();
     const handleInputChange = React.useCallback((e) => {
-        console.log("handleInputChange", rowIndex, e, e.target.value);
         setInputValue(e.target.value);
-        const dataSource = gridRef.current.cellByRowIndex(rowIndex, column.fieldId, e.target.value);
-        store.setState(["state", "dataSource"], dataSource, false);
+        gridRef.current.cellByRowIndex(rowIndex, column.fieldId, e.target.value).then((dataSource) => {
+            store.setState(["state", "dataSource"], dataSource, false);
+        });
     }, [rowIndex]);
     if (editStatus === EditStatus.EDITING)
-        return _jsx(Input, { autoFocus: true, ref: inputRef, value: inputValue, onChange: handleInputChange }, 1);
+        return _jsx(Input, { autoFocus: true, ref: inputRef, value: inputValue, onChange: handleInputChange });
     if (editStatus === EditStatus.NON_EDITABLE)
         return _jsx(React.Fragment, { children: value });
     return _jsx(React.Fragment, { children: value });

package/lib/cjs/components/ime/IMEComponent.js

@@ -14,48 +14,13 @@ const IMEComponent = React.forwardRef((props, ref) => {
     const { cellFocus } = useSelector((store) => ({
         cellFocus: store.state.cellFocus,
     }));
-    // React.useEffect(() => {
-    //   const currentRef = ref as React.MutableRefObject<HTMLTextAreaElement | null>;
-    //   if (currentRef.current) {
-    //     currentRef.current.addEventListener("keydown", handleTextAreaInput);
-    //   }
-    //   return () => {
-    //     if (currentRef.current) {
-    //       currentRef.current.removeEventListener("keydown", handleTextAreaInput);
-    //     }
-    //   };
-    // }, []);
     const handleValueChange = useCallback((e) => {
         setImeValue(e.target.value);
     }, []);
-    const handleTextAreaInput = React.useCallback((e) => {
-        var _a, _b;
-        const cellFocus = gridRef.current.store.state.cellFocus;
-        const rowIndex = cellFocus[0];
-        const colIndex = cellFocus[1];
-        const event = e.target;
-        const currentRef = ref;
-        // 셀위치 가져오기
-        const containerElement = gridRef.current.store.gridContainer.current;
-        if (containerElement) {
-            const rowElement = containerElement.querySelector(`.${classes.TableClasses.body.row.root}[aria-rowindex="${rowIndex}"]`);
-            if (rowElement) {
-                const cellElement = rowElement.querySelector(`.${classes.TableClasses.body.row.cell.root}[aria-colindex="${colIndex}"]`);
-                if (cellElement) {
-                    const top = (_a = cellElement.getBoundingClientRect().top) !== null && _a !== void 0 ? _a : 0;
-                    const left = (_b = cellElement.getBoundingClientRect().left) !== null && _b !== void 0 ? _b : 0;
-                    if (!currentRef.current)
-                        return;
-                    currentRef.current.style.top = `${top}px`;
-                    currentRef.current.style.left = `${left}px`;
-                }
-            }
-        }
-        if (currentRef.current)
-            currentRef.current.value = event.value;
-    }, [cellFocus]);
     const handleKeyDown = React.useCallback((e) => {
         var _a, _b, _c;
+        if (gridRef.current.store.state.readOnly)
+            return;
         if (e.nativeEvent.isComposing)
             return;
         if (e.key === "Enter") {
@@ -95,22 +60,6 @@ const IMEComponent = React.forwardRef((props, ref) => {
                 return;
             if (!colIndex)
                 return;
-            // if (e.key === "ArrowLeft") {
-            //   colIndex = colIndex - 1;
-            //   setImeValue("");
-            // }
-            // if (e.key === "ArrowRight") {
-            //   colIndex = colIndex + 1;
-            //   setImeValue("");
-            // }
-            // if (e.key === "ArrowDown") {
-            //   rowIndex = rowIndex + 1;
-            //   setImeValue("");
-            // }
-            // if (e.key === "ArrowUp") {
-            //   rowIndex = rowIndex - 1;
-            //   setImeValue("");
-            // }
             const event = e.target;
             const currentRef = ref;
             // 셀위치 가져오기

package/lib/cjs/hooks/internal/useInternalPrivateApi.js

@@ -36,7 +36,7 @@ export default function useInternalPrivateApi(apiRef) {
         return apiRef.current;
     }, []);
     const setBasicStore = React.useCallback((props) => {
-        const myFilterTypeKeys = ["columns", "dataSource", "cellFocus"];
+        const myFilterTypeKeys = ["columns", "dataSource", "cellFocus", "editStatus", "readOnly"];
         return myFilterTypeKeys.reduce((acc, key) => {
             if (key in props) {
                 if (key === "dataSource") {
@@ -71,6 +71,7 @@ export default function useInternalPrivateApi(apiRef) {
             gridRef: undefined,
             renderedRowStartEnd: undefined,
             editStatus: undefined,
+            readOnly: false,
         };
         return defaultValues[key];
     }

package/lib/cjs/types/dataGridProps.d.ts

@@ -42,6 +42,10 @@ export interface DataGridOptionPropsModel {
      * 현재 포커스된 셀의 수정 상태를 담고 있습니다.
      */
     editStatus: EditStatus;
+    /**
+     * 수정할 수 없는 상태
+     */
+    readOnly: boolean;
 }
 /**
  * 데이터 그리드 내부에서 사용되는 속성을 관리합니다