@noraent/nora-datagrid 0.0.11 → 0.0.13

package/lib/cjs/App.js

@@ -1,11 +1,17 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
 import { DataGrid } from "./DataGrid";
+import { useGridApiRef } from "./hooks/useGridApiRef";
+const RenderCell = (params) => {
+    return _jsx("div", { style: { background: "green" }, children: params.value });
+};
+const RenderEditCell = (params) => {
+    return _jsx("input", Object.assign({}, params, { style: { background: "yellow" } }));
+};
 function App() {
-    const ref = React.useRef(null);
+    // const ref = React.useRef<GirdApi>(null);
+    const ref = useGridApiRef();
     return (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => {
-                    var _a;
-                    console.log("!!!!!", (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.getData());
+                    console.log("!!!!!", ref.current.getData());
                 }, children: "dd" }), _jsx("button", { children: "dd" }), _jsx("div", { style: { width: "1200px", height: "100%", maxHeight: "600px" }, children: _jsx(DataGrid, { gridRef: ref, columns: [
                         {
                             fieldId: "firstName",
@@ -15,6 +21,8 @@ function App() {
                             fieldId: "lastName",
                             fieldName: "이름",
                             width: "120",
+                            renderCell: RenderCell,
+                            renderEditCell: RenderEditCell,
                         },
                         {
                             fieldId: "currency",
@@ -116,7 +124,7 @@ function App() {
                             fieldName: "currency21",
                             width: "120",
                         },
-                    ], dataSource: Array.from({ length: 30 }, (_, i) => {
+                    ], dataSource: Array.from({ length: 100 }, (_, i) => {
                         return {
                             id: i,
                             firstName: `test-${i}`,

package/lib/cjs/buildPackage.json

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

package/lib/cjs/components/TwoDimensionalVirtualizedList.js

@@ -59,7 +59,6 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
         window.addEventListener("focusout", (event) => {
             var _a;
             if (((_a = event.target.nextElementSibling) === null || _a === void 0 ? void 0 : _a.className) === "nora-data-grid-container") {
-                console.log("???", gridRef.current.store.gridContainer.current);
             }
         });
         return () => {
@@ -210,7 +209,6 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
         });
     }, [updateScroll, gridRef]);
     useEffect(() => {
-        console.log("start, end!", start, end);
         gridRef.current.store.state.renderedRowStartEnd = [start, end];
     }, [start, end]);
     return (_jsxs("div", { style: { position: "relative" }, children: [_jsxs("div", { style: {
@@ -252,8 +250,6 @@ const VirtualListItem = React.memo(({ item, startColumnIndex, cumulativeWidths,
     const { start, end } = getItemRange();
     const visibleColumns = useMemo(() => columns.slice(start, end + 1), [start, end, columns]);
     const cellStyle = useMemo(() => ({ height: `${item.height}px` }), [item.height]);
-    if (item.__dataRowindex === 0)
-        console.log("row", row);
     return (_jsx(TableRow, { "aria-rowindex": item.__ariaRowindex, style: cellStyle, className: classes.TableClasses.body.row.root, children: visibleColumns.map((column) => (_jsx(VirtualItem, { column: column, row: row, rowIndex: item.__dataRowindex, isFocus: isColIndex === column.__ariaColindex, editStatus: isColIndex === column.__ariaColindex ? editStatus : undefined }, column.__uuid))) }, item.id));
 });
 const VirtualItem = React.memo(({ column, row, isFocus, editStatus, rowIndex, }) => {
@@ -314,17 +310,21 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
                     if (clickTimer.current) {
                         clearTimeout(clickTimer.current); // 더블 클릭 발생 시 실행 취소
                     }
+                    gridRef.current.setEditStatus(EditStatus.NON_EDITABLE).then((editState) => {
+                        store.setState(["state", "editStatus"], editState);
+                    });
                     clickTimer.current = setTimeout(() => {
                         if (gridRef.current.store.state.editStatus !== EditStatus.EDITING) {
-                            gridRef.current.setCellFocus(rowIndex, colIndex).then((res) => {
-                                store.setState(["state", "cellFocus"], res);
-                                gridRef.current.setEditStatus(EditStatus.NON_EDITABLE).then(() => {
-                                    var _a;
-                                    (_a = textAreaRef.current) === null || _a === void 0 ? void 0 : _a.focus(); // ime 활성화
+                            gridRef.current.setEditStatus(EditStatus.NON_EDITABLE).then((editState) => {
+                                var _a;
+                                store.setState(["state", "editStatus"], editState);
+                                (_a = textAreaRef.current) === null || _a === void 0 ? void 0 : _a.focus(); // ime 활성화
+                                gridRef.current.setCellFocus(rowIndex, colIndex).then((res) => {
+                                    store.setState(["state", "cellFocus"], res);
                                 });
                             });
                         }
-                    }, 250); // 더블 클릭 판별 시간 (기본적으로 250ms 정도 사용)
+                    }, 200); // 더블 클릭 판별 시간 (기본적으로 200ms 정도 사용)
                     gridRef.current.setCellFocus(rowIndex, colIndex).then((res) => {
                         store.setState(["state", "cellFocus"], res);
                     });
@@ -373,6 +373,7 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
             e.key === "Shift" ||
             e.ctrlKey ||
             (e.ctrlKey && e.key === "c")) {
+            // e.preventDefault();
             return;
         }
         if (e.key === "Enter") {
@@ -385,9 +386,11 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
             if (cell && row) {
                 const colIndex = Number(cell.getAttribute("aria-colindex"));
                 const rowIndex = Number(row.getAttribute("aria-rowindex"));
-                gridRef.current.setCellFocus(Math.min(rowIndex + 1, gridRef.current.store.state.dataSource.length), colIndex).then((res) => {
-                    store.setState(["state", "cellFocus"], res);
-                });
+                setTimeout(() => {
+                    gridRef.current.setCellFocus(Math.min(rowIndex + 1, gridRef.current.store.state.dataSource.length), colIndex).then((res) => {
+                        store.setState(["state", "cellFocus"], res);
+                    });
+                }, 0);
             }
             return;
         }
@@ -435,7 +438,6 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
     const handleArrowKey = React.useCallback((e) => {
         var _a;
         const { key } = e;
-        console.log("!!!!", gridRef.current.store.state.editStatus);
         if (gridRef.current.store.state.editStatus === EditStatus.EDITING) {
             if (!(key === "Tab" || e.ctrlKey)) {
                 return;
@@ -444,8 +446,9 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
         const { setCellFocus } = gridRef.current;
         const { gridContainer } = gridRef.current.store;
         const { cellFocus, columns, dataSource, renderedRowStartEnd } = gridRef.current.store.state;
-        if (!cellFocus || (key !== "ArrowRight" && key !== "ArrowLeft" && key !== "ArrowDown" && key !== "ArrowUp" && key !== "Tab"))
+        if (!cellFocus || (key !== "ArrowRight" && key !== "ArrowLeft" && key !== "ArrowDown" && key !== "ArrowUp" && key !== "Tab")) {
             return;
+        }
         // e.preventDefault();
         const direction = (key === "Tab" && !e.shiftKey) || ["ArrowRight", "ArrowDown"].includes(key) ? 1 : -1;
         if (!cellFocus[1])
@@ -490,35 +493,37 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
             return;
         }
         if (rowIndex > 0 && colIndex > 0 && colIndex <= maxColIndex) {
-            setCellFocus(rowIndex, colIndex).then((res) => {
-                ReactDOM.flushSync(() => {
-                    store.setState(["state", "cellFocus"], res);
-                    if (bodyElement) {
-                        const scrollThreshold = Math.max(0, sumWidths[newColumnIndex] - bodyElement.clientWidth);
-                        const scrollRowThreshold = Math.max(0, sumHeights[newRowIndex] - (bodyElement.clientHeight - 40));
-                        if (key === "ArrowRight" || (!e.shiftKey && key === "Tab" && bodyElement.scrollLeft < scrollThreshold)) {
-                            bodyElement.scrollLeft = scrollThreshold;
-                        }
-                        if (key === "ArrowLeft" || (e.shiftKey && key === "Tab" && bodyElement)) {
-                            const targetStart = sumWidths[newColumnIndex];
-                            const scrollStart = bodyElement.scrollLeft;
-                            if (scrollStart >= targetStart) {
-                                bodyElement.scrollLeft = targetStart - widths[newColumnIndex];
+            setTimeout(() => {
+                setCellFocus(rowIndex, colIndex).then((res) => {
+                    ReactDOM.flushSync(() => {
+                        store.setState(["state", "cellFocus"], res);
+                        if (bodyElement) {
+                            const scrollThreshold = Math.max(0, sumWidths[newColumnIndex] - bodyElement.clientWidth);
+                            const scrollRowThreshold = Math.max(0, sumHeights[newRowIndex] - (bodyElement.clientHeight - 40));
+                            if (key === "ArrowRight" || (!e.shiftKey && key === "Tab" && bodyElement.scrollLeft < scrollThreshold)) {
+                                bodyElement.scrollLeft = scrollThreshold;
                             }
-                        }
-                        if (key === "ArrowDown" && bodyElement.scrollTop < scrollRowThreshold) {
-                            bodyElement.scrollTop = scrollRowThreshold;
-                        }
-                        if (key === "ArrowUp" && bodyElement) {
-                            const targetStart = sumHeights[newRowIndex];
-                            const scrollStart = bodyElement.scrollTop;
-                            if (scrollStart >= targetStart) {
-                                bodyElement.scrollTop = targetStart - heights[newRowIndex];
+                            if (key === "ArrowLeft" || (e.shiftKey && key === "Tab" && bodyElement)) {
+                                const targetStart = sumWidths[newColumnIndex];
+                                const scrollStart = bodyElement.scrollLeft;
+                                if (scrollStart >= targetStart) {
+                                    bodyElement.scrollLeft = targetStart - widths[newColumnIndex];
+                                }
+                            }
+                            if (key === "ArrowDown" && bodyElement.scrollTop < scrollRowThreshold) {
+                                bodyElement.scrollTop = scrollRowThreshold;
+                            }
+                            if (key === "ArrowUp" && bodyElement) {
+                                const targetStart = sumHeights[newRowIndex];
+                                const scrollStart = bodyElement.scrollTop;
+                                if (scrollStart >= targetStart) {
+                                    bodyElement.scrollTop = targetStart - heights[newRowIndex];
+                                }
                             }
                         }
-                    }
+                    });
                 });
-            });
+            }, 0); // Tab시 한글 두번 입력되는 문제로 인해 넣음
         }
     }, []);
     const handleKeydown = useCallback((e) => {

package/lib/cjs/components/cell/CellMode.d.ts

@@ -1,10 +1,4 @@
 import React from "react";
-import { EditStatus } from "../../types/dataGridCoreEnum";
-import { DataGridPrivateColumnModel, DataGridPrivateDataSourceModel } from "../../types/dataGridCoreProps";
-declare const _default: React.MemoExoticComponent<({ column, value, editStatus, rowIndex, }: {
-    column: DataGridPrivateColumnModel;
-    value: keyof DataGridPrivateDataSourceModel;
-    editStatus: EditStatus | undefined;
-    rowIndex: number;
-}) => import("react/jsx-runtime").JSX.Element>;
+import { GridCellPrams } from "../../types/dataGridCoreProps";
+declare const _default: React.MemoExoticComponent<(props: GridCellPrams) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

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

@@ -4,7 +4,8 @@ import { useStore } from "../../provider/GridStoreContent";
 import { EditStatus } from "../../types/dataGridCoreEnum";
 import useGridApiContext from "../../hooks/useGridApiContext";
 import { Input } from "../virtualized/_styled";
-const CellMode = ({ column, value, editStatus, rowIndex, }) => {
+const CellMode = (props) => {
+    const { column, value, editStatus, rowIndex } = props;
     const gridRef = useGridApiContext();
     const [inputValue, setInputValue] = React.useState(value);
     const inputRef = React.useRef(null);
@@ -24,10 +25,14 @@ const CellMode = ({ column, value, editStatus, rowIndex, }) => {
             store.setState(["state", "dataSource"], dataSource, false);
         });
     }, [rowIndex]);
-    if (editStatus === EditStatus.EDITING)
-        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 });
+    const RenderEditCell = column.renderEditCell;
+    if (editStatus === EditStatus.EDITING) {
+        return (_jsx(React.Fragment, { children: RenderEditCell ? (_jsx(RenderEditCell, Object.assign({}, props, { onChange: handleInputChange }))) : (_jsx(Input, { autoFocus: true, ref: inputRef, value: inputValue, onChange: handleInputChange })) }));
+    }
+    const RenderCell = column.renderCell;
+    if (editStatus === EditStatus.NON_EDITABLE) {
+        return _jsx(React.Fragment, { children: RenderCell ? _jsx(RenderCell, Object.assign({}, props)) : value });
+    }
+    return _jsx(React.Fragment, { children: RenderCell ? _jsx(RenderCell, Object.assign({}, props)) : value });
 };
 export default React.memo(CellMode);

package/lib/cjs/hooks/useGridApiRef.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { GirdApi } from "../types/dataGridProps";
+/**
+ * 그리드 Ref Hook
+ * @returns
+ */
+export declare const useGridApiRef: <Api extends GirdApi>() => React.MutableRefObject<Api>;

package/lib/cjs/hooks/useGridApiRef.js

@@ -0,0 +1,6 @@
+import React from "react";
+/**
+ * 그리드 Ref Hook
+ * @returns
+ */
+export const useGridApiRef = () => React.useRef({});

package/lib/cjs/index.d.ts

@@ -1 +1,2 @@
 export { DataGrid } from "./DataGrid";
+export * from "./hooks/useGridApiRef";

package/lib/cjs/index.js

@@ -1 +1,2 @@
 export { DataGrid } from "./DataGrid";
+export * from "./hooks/useGridApiRef";

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

@@ -1,3 +1,4 @@
+import { EditStatus } from "./dataGridCoreEnum";
 export type DataGridColumn = DataGridColumnModel;
 export type DataGridColumns = Array<DataGridPrivateColumnModel>;
 export type DataGridDataSource = Array<DataGridPrivateDataSourceModel>;
@@ -10,6 +11,8 @@ interface DataGridColumnModel {
     fieldId: string;
     fieldName: string;
     width?: string;
+    renderCell?: (params: GridCellPrams) => React.ReactNode;
+    renderEditCell?: (params: GridEditCellPrams<any>) => React.ReactNode;
 }
 /**
  * Grid Column을 구성하는 내부적 구조 입니다.
@@ -68,4 +71,13 @@ export type CellRangeDef = {
 };
 export interface CellRangeTempDef extends Partial<CellRangeDef> {
 }
+export interface GridCellPrams {
+    column: DataGridPrivateColumnModel;
+    value: keyof DataGridPrivateDataSourceModel;
+    editStatus: EditStatus | undefined;
+    rowIndex: number;
+}
+export interface GridEditCellPrams<T extends HTMLInputElement = any> extends GridCellPrams {
+    onChange?: React.ChangeEventHandler<T> | undefined;
+}
 export {};

package/lib/esm/App.js

@@ -1,11 +1,17 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
 import { DataGrid } from "./DataGrid";
+import { useGridApiRef } from "./hooks/useGridApiRef";
+const RenderCell = (params) => {
+    return _jsx("div", { style: { background: "green" }, children: params.value });
+};
+const RenderEditCell = (params) => {
+    return _jsx("input", Object.assign({}, params, { style: { background: "yellow" } }));
+};
 function App() {
-    const ref = React.useRef(null);
+    // const ref = React.useRef<GirdApi>(null);
+    const ref = useGridApiRef();
     return (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => {
-                    var _a;
-                    console.log("!!!!!", (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.getData());
+                    console.log("!!!!!", ref.current.getData());
                 }, children: "dd" }), _jsx("button", { children: "dd" }), _jsx("div", { style: { width: "1200px", height: "100%", maxHeight: "600px" }, children: _jsx(DataGrid, { gridRef: ref, columns: [
                         {
                             fieldId: "firstName",
@@ -15,6 +21,8 @@ function App() {
                             fieldId: "lastName",
                             fieldName: "이름",
                             width: "120",
+                            renderCell: RenderCell,
+                            renderEditCell: RenderEditCell,
                         },
                         {
                             fieldId: "currency",
@@ -116,7 +124,7 @@ function App() {
                             fieldName: "currency21",
                             width: "120",
                         },
-                    ], dataSource: Array.from({ length: 30 }, (_, i) => {
+                    ], dataSource: Array.from({ length: 100 }, (_, i) => {
                         return {
                             id: i,
                             firstName: `test-${i}`,

package/lib/esm/buildPackage.json

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

package/lib/esm/components/TwoDimensionalVirtualizedList.js

@@ -59,7 +59,6 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
         window.addEventListener("focusout", (event) => {
             var _a;
             if (((_a = event.target.nextElementSibling) === null || _a === void 0 ? void 0 : _a.className) === "nora-data-grid-container") {
-                console.log("???", gridRef.current.store.gridContainer.current);
             }
         });
         return () => {
@@ -210,7 +209,6 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
         });
     }, [updateScroll, gridRef]);
     useEffect(() => {
-        console.log("start, end!", start, end);
         gridRef.current.store.state.renderedRowStartEnd = [start, end];
     }, [start, end]);
     return (_jsxs("div", { style: { position: "relative" }, children: [_jsxs("div", { style: {
@@ -252,8 +250,6 @@ const VirtualListItem = React.memo(({ item, startColumnIndex, cumulativeWidths,
     const { start, end } = getItemRange();
     const visibleColumns = useMemo(() => columns.slice(start, end + 1), [start, end, columns]);
     const cellStyle = useMemo(() => ({ height: `${item.height}px` }), [item.height]);
-    if (item.__dataRowindex === 0)
-        console.log("row", row);
     return (_jsx(TableRow, { "aria-rowindex": item.__ariaRowindex, style: cellStyle, className: classes.TableClasses.body.row.root, children: visibleColumns.map((column) => (_jsx(VirtualItem, { column: column, row: row, rowIndex: item.__dataRowindex, isFocus: isColIndex === column.__ariaColindex, editStatus: isColIndex === column.__ariaColindex ? editStatus : undefined }, column.__uuid))) }, item.id));
 });
 const VirtualItem = React.memo(({ column, row, isFocus, editStatus, rowIndex, }) => {
@@ -314,17 +310,21 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
                     if (clickTimer.current) {
                         clearTimeout(clickTimer.current); // 더블 클릭 발생 시 실행 취소
                     }
+                    gridRef.current.setEditStatus(EditStatus.NON_EDITABLE).then((editState) => {
+                        store.setState(["state", "editStatus"], editState);
+                    });
                     clickTimer.current = setTimeout(() => {
                         if (gridRef.current.store.state.editStatus !== EditStatus.EDITING) {
-                            gridRef.current.setCellFocus(rowIndex, colIndex).then((res) => {
-                                store.setState(["state", "cellFocus"], res);
-                                gridRef.current.setEditStatus(EditStatus.NON_EDITABLE).then(() => {
-                                    var _a;
-                                    (_a = textAreaRef.current) === null || _a === void 0 ? void 0 : _a.focus(); // ime 활성화
+                            gridRef.current.setEditStatus(EditStatus.NON_EDITABLE).then((editState) => {
+                                var _a;
+                                store.setState(["state", "editStatus"], editState);
+                                (_a = textAreaRef.current) === null || _a === void 0 ? void 0 : _a.focus(); // ime 활성화
+                                gridRef.current.setCellFocus(rowIndex, colIndex).then((res) => {
+                                    store.setState(["state", "cellFocus"], res);
                                 });
                             });
                         }
-                    }, 250); // 더블 클릭 판별 시간 (기본적으로 250ms 정도 사용)
+                    }, 200); // 더블 클릭 판별 시간 (기본적으로 200ms 정도 사용)
                     gridRef.current.setCellFocus(rowIndex, colIndex).then((res) => {
                         store.setState(["state", "cellFocus"], res);
                     });
@@ -373,6 +373,7 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
             e.key === "Shift" ||
             e.ctrlKey ||
             (e.ctrlKey && e.key === "c")) {
+            // e.preventDefault();
             return;
         }
         if (e.key === "Enter") {
@@ -385,9 +386,11 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
             if (cell && row) {
                 const colIndex = Number(cell.getAttribute("aria-colindex"));
                 const rowIndex = Number(row.getAttribute("aria-rowindex"));
-                gridRef.current.setCellFocus(Math.min(rowIndex + 1, gridRef.current.store.state.dataSource.length), colIndex).then((res) => {
-                    store.setState(["state", "cellFocus"], res);
-                });
+                setTimeout(() => {
+                    gridRef.current.setCellFocus(Math.min(rowIndex + 1, gridRef.current.store.state.dataSource.length), colIndex).then((res) => {
+                        store.setState(["state", "cellFocus"], res);
+                    });
+                }, 0);
             }
             return;
         }
@@ -435,7 +438,6 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
     const handleArrowKey = React.useCallback((e) => {
         var _a;
         const { key } = e;
-        console.log("!!!!", gridRef.current.store.state.editStatus);
         if (gridRef.current.store.state.editStatus === EditStatus.EDITING) {
             if (!(key === "Tab" || e.ctrlKey)) {
                 return;
@@ -444,8 +446,9 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
         const { setCellFocus } = gridRef.current;
         const { gridContainer } = gridRef.current.store;
         const { cellFocus, columns, dataSource, renderedRowStartEnd } = gridRef.current.store.state;
-        if (!cellFocus || (key !== "ArrowRight" && key !== "ArrowLeft" && key !== "ArrowDown" && key !== "ArrowUp" && key !== "Tab"))
+        if (!cellFocus || (key !== "ArrowRight" && key !== "ArrowLeft" && key !== "ArrowDown" && key !== "ArrowUp" && key !== "Tab")) {
             return;
+        }
         // e.preventDefault();
         const direction = (key === "Tab" && !e.shiftKey) || ["ArrowRight", "ArrowDown"].includes(key) ? 1 : -1;
         if (!cellFocus[1])
@@ -490,35 +493,37 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
             return;
         }
         if (rowIndex > 0 && colIndex > 0 && colIndex <= maxColIndex) {
-            setCellFocus(rowIndex, colIndex).then((res) => {
-                ReactDOM.flushSync(() => {
-                    store.setState(["state", "cellFocus"], res);
-                    if (bodyElement) {
-                        const scrollThreshold = Math.max(0, sumWidths[newColumnIndex] - bodyElement.clientWidth);
-                        const scrollRowThreshold = Math.max(0, sumHeights[newRowIndex] - (bodyElement.clientHeight - 40));
-                        if (key === "ArrowRight" || (!e.shiftKey && key === "Tab" && bodyElement.scrollLeft < scrollThreshold)) {
-                            bodyElement.scrollLeft = scrollThreshold;
-                        }
-                        if (key === "ArrowLeft" || (e.shiftKey && key === "Tab" && bodyElement)) {
-                            const targetStart = sumWidths[newColumnIndex];
-                            const scrollStart = bodyElement.scrollLeft;
-                            if (scrollStart >= targetStart) {
-                                bodyElement.scrollLeft = targetStart - widths[newColumnIndex];
+            setTimeout(() => {
+                setCellFocus(rowIndex, colIndex).then((res) => {
+                    ReactDOM.flushSync(() => {
+                        store.setState(["state", "cellFocus"], res);
+                        if (bodyElement) {
+                            const scrollThreshold = Math.max(0, sumWidths[newColumnIndex] - bodyElement.clientWidth);
+                            const scrollRowThreshold = Math.max(0, sumHeights[newRowIndex] - (bodyElement.clientHeight - 40));
+                            if (key === "ArrowRight" || (!e.shiftKey && key === "Tab" && bodyElement.scrollLeft < scrollThreshold)) {
+                                bodyElement.scrollLeft = scrollThreshold;
                             }
-                        }
-                        if (key === "ArrowDown" && bodyElement.scrollTop < scrollRowThreshold) {
-                            bodyElement.scrollTop = scrollRowThreshold;
-                        }
-                        if (key === "ArrowUp" && bodyElement) {
-                            const targetStart = sumHeights[newRowIndex];
-                            const scrollStart = bodyElement.scrollTop;
-                            if (scrollStart >= targetStart) {
-                                bodyElement.scrollTop = targetStart - heights[newRowIndex];
+                            if (key === "ArrowLeft" || (e.shiftKey && key === "Tab" && bodyElement)) {
+                                const targetStart = sumWidths[newColumnIndex];
+                                const scrollStart = bodyElement.scrollLeft;
+                                if (scrollStart >= targetStart) {
+                                    bodyElement.scrollLeft = targetStart - widths[newColumnIndex];
+                                }
+                            }
+                            if (key === "ArrowDown" && bodyElement.scrollTop < scrollRowThreshold) {
+                                bodyElement.scrollTop = scrollRowThreshold;
+                            }
+                            if (key === "ArrowUp" && bodyElement) {
+                                const targetStart = sumHeights[newRowIndex];
+                                const scrollStart = bodyElement.scrollTop;
+                                if (scrollStart >= targetStart) {
+                                    bodyElement.scrollTop = targetStart - heights[newRowIndex];
+                                }
                             }
                         }
-                    }
+                    });
                 });
-            });
+            }, 0); // Tab시 한글 두번 입력되는 문제로 인해 넣음
         }
     }, []);
     const handleKeydown = useCallback((e) => {

package/lib/esm/components/cell/CellMode.d.ts

@@ -1,10 +1,4 @@
 import React from "react";
-import { EditStatus } from "../../types/dataGridCoreEnum";
-import { DataGridPrivateColumnModel, DataGridPrivateDataSourceModel } from "../../types/dataGridCoreProps";
-declare const _default: React.MemoExoticComponent<({ column, value, editStatus, rowIndex, }: {
-    column: DataGridPrivateColumnModel;
-    value: keyof DataGridPrivateDataSourceModel;
-    editStatus: EditStatus | undefined;
-    rowIndex: number;
-}) => import("react/jsx-runtime").JSX.Element>;
+import { GridCellPrams } from "../../types/dataGridCoreProps";
+declare const _default: React.MemoExoticComponent<(props: GridCellPrams) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

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

@@ -4,7 +4,8 @@ import { useStore } from "../../provider/GridStoreContent";
 import { EditStatus } from "../../types/dataGridCoreEnum";
 import useGridApiContext from "../../hooks/useGridApiContext";
 import { Input } from "../virtualized/_styled";
-const CellMode = ({ column, value, editStatus, rowIndex, }) => {
+const CellMode = (props) => {
+    const { column, value, editStatus, rowIndex } = props;
     const gridRef = useGridApiContext();
     const [inputValue, setInputValue] = React.useState(value);
     const inputRef = React.useRef(null);
@@ -24,10 +25,14 @@ const CellMode = ({ column, value, editStatus, rowIndex, }) => {
             store.setState(["state", "dataSource"], dataSource, false);
         });
     }, [rowIndex]);
-    if (editStatus === EditStatus.EDITING)
-        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 });
+    const RenderEditCell = column.renderEditCell;
+    if (editStatus === EditStatus.EDITING) {
+        return (_jsx(React.Fragment, { children: RenderEditCell ? (_jsx(RenderEditCell, Object.assign({}, props, { onChange: handleInputChange }))) : (_jsx(Input, { autoFocus: true, ref: inputRef, value: inputValue, onChange: handleInputChange })) }));
+    }
+    const RenderCell = column.renderCell;
+    if (editStatus === EditStatus.NON_EDITABLE) {
+        return _jsx(React.Fragment, { children: RenderCell ? _jsx(RenderCell, Object.assign({}, props)) : value });
+    }
+    return _jsx(React.Fragment, { children: RenderCell ? _jsx(RenderCell, Object.assign({}, props)) : value });
 };
 export default React.memo(CellMode);

package/lib/esm/hooks/useGridApiRef.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { GirdApi } from "../types/dataGridProps";
+/**
+ * 그리드 Ref Hook
+ * @returns
+ */
+export declare const useGridApiRef: <Api extends GirdApi>() => React.MutableRefObject<Api>;

package/lib/esm/hooks/useGridApiRef.js

@@ -0,0 +1,6 @@
+import React from "react";
+/**
+ * 그리드 Ref Hook
+ * @returns
+ */
+export const useGridApiRef = () => React.useRef({});

package/lib/esm/index.d.ts

@@ -1 +1,2 @@
 export { DataGrid } from "./DataGrid";
+export * from "./hooks/useGridApiRef";

package/lib/esm/index.js

@@ -1 +1,2 @@
 export { DataGrid } from "./DataGrid";
+export * from "./hooks/useGridApiRef";

package/lib/esm/types/dataGridCoreProps.d.ts

@@ -1,3 +1,4 @@
+import { EditStatus } from "./dataGridCoreEnum";
 export type DataGridColumn = DataGridColumnModel;
 export type DataGridColumns = Array<DataGridPrivateColumnModel>;
 export type DataGridDataSource = Array<DataGridPrivateDataSourceModel>;
@@ -10,6 +11,8 @@ interface DataGridColumnModel {
     fieldId: string;
     fieldName: string;
     width?: string;
+    renderCell?: (params: GridCellPrams) => React.ReactNode;
+    renderEditCell?: (params: GridEditCellPrams<any>) => React.ReactNode;
 }
 /**
  * Grid Column을 구성하는 내부적 구조 입니다.
@@ -68,4 +71,13 @@ export type CellRangeDef = {
 };
 export interface CellRangeTempDef extends Partial<CellRangeDef> {
 }
+export interface GridCellPrams {
+    column: DataGridPrivateColumnModel;
+    value: keyof DataGridPrivateDataSourceModel;
+    editStatus: EditStatus | undefined;
+    rowIndex: number;
+}
+export interface GridEditCellPrams<T extends HTMLInputElement = any> extends GridCellPrams {
+    onChange?: React.ChangeEventHandler<T> | undefined;
+}
 export {};

package/package.json

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