@hzab/edit-table 0.1.1 → 0.1.3-alpha.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# @hzab/edit-table@0.1.3
+
+fix: 编辑数据优化
+
+# @hzab/edit-table@0.1.2
+
+fix: checkbox 选择子项时拿到对应行的数据
+
 # @hzab/edit-table@0.1.1
 
 fix: 无数据时取消聚焦框

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/edit-table",
-  "version": "0.1.1",
+  "version": "0.1.3-alpha.0",
   "description": "",
   "main": "src",
   "scripts": {
@@ -41,10 +41,12 @@
     "react-router-dom": "6.14.1",
     "typedoc": "0.24.8",
     "typescript": "4.9.4",
-    "webpack": "5.75.0",
+    "webpack": "5.75.0"
+  },
+  "peerDependencies": {
+    "@silevis/reactgrid": "^4.1.17",
     "@hzab/form-render": "^1.7.17",
-    "@hzab/list-render": "^1.11.0",
-    "@silevis/reactgrid": "^4.1.17"
+    "@hzab/list-render": "^1.11.0"
   },
   "directories": {
     "src": "src"

package/src/Template/NumberCellTemplate/index.less

@@ -0,0 +1,5 @@
+.number-cell-template {
+  .rg-input {
+    border: none;
+  }
+}

package/src/Template/NumberCellTemplate/index.tsx

@@ -0,0 +1,24 @@
+import { Input } from "antd";
+import "./index.less"
+const NumberCellTemplate = (props: any) => {
+  const { pattern, cell, componentProps } = props;
+  return (
+    <div className="number-cell-template">
+      {pattern == "readPretty" ? (
+        <div>{cell?.text}</div>
+      ) : (
+      <Input
+        className="rg-input"
+        type="number"
+        ref={(input) => {
+          if (input) {
+            input.focus();
+          }
+        }}
+        {...componentProps}
+      />
+      )}
+    </div>
+  );
+};
+export default NumberCellTemplate

package/src/Template/TextCellTemplate/index.less

@@ -0,0 +1,5 @@
+.text-cell-template {
+  .rg-input {
+    border: none;
+  }
+}

package/src/Template/TextCellTemplate/index.tsx

@@ -0,0 +1,22 @@
+import "./index.less"
+const TextCellTemplate = (props: any) => {
+  const { pattern, cell, componentProps } = props;
+  return (
+    <div className="text-cell-template">
+      {pattern == "readPretty" ? (
+        <div>{cell?.text}</div>
+      ) : (
+      <input
+        className="rg-input"
+        ref={(input) => {
+          if (input) {
+            input.focus();
+          }
+        }}
+        {...componentProps}
+      />
+      )}
+    </div>
+  );
+};
+export default TextCellTemplate

package/src/common/WidthWrapHoc.tsx

@@ -14,7 +14,7 @@ import {
 } from "@silevis/reactgrid";
 import { InfoCircleOutlined } from "@ant-design/icons";
 import { Popover } from "antd";
-
+import { isTriggerBlur } from "./childAntdComponent";
 export type OptionType = {
   label: string;
   value: string | number;
@@ -26,7 +26,6 @@ export interface BaseCell extends Cell {
   value: string | number;
   values: OptionType[];
   isDisabled?: boolean;
-  commit?: string;
 }
 interface DIProps {
   onCellChanged: (...args: any[]) => void;
@@ -37,42 +36,22 @@ interface DIProps {
 export const WidthWrapHoc = (WrapComponent: any) => {
   class createBaseCellTemplate implements CellTemplate<BaseCell> {
     getCompatibleCell(uncertainCell: Uncertain<BaseCell>): Compatible<BaseCell> {
-      let selectedValue: string | undefined;
-      try {
-        selectedValue = getCellProperty(uncertainCell, "selectedValue", "number");
-      } catch {
-        selectedValue = undefined;
-      }
-      if (!selectedValue) {
-        try {
-          selectedValue = getCellProperty(uncertainCell, "selectedValue", "string");
-        } catch {
-          selectedValue = undefined;
-        }
-      }
-      let commit: string;
-
-      try {
-        commit = getCellProperty(uncertainCell, "commit", "string");
-      } catch {
-        commit = "submit";
-      }
-
       let values: any;
       try {
         values = getCellProperty(uncertainCell, "values", "object");
       } catch {
         values = [];
       }
-      const value = selectedValue ? parseFloat(selectedValue) : NaN;
+      const value = uncertainCell.selectedValue ? parseFloat(uncertainCell.selectedValue) : NaN;
       let isDisabled = true;
       try {
         isDisabled = getCellProperty(uncertainCell, "isDisabled", "boolean");
       } catch {
         isDisabled = false;
       }
+      const selectedValue = uncertainCell.selectedValue;
       const text = selectedValue || "";
-      return { ...uncertainCell, selectedValue, text, value, values, isDisabled, commit };
+      return { ...uncertainCell, selectedValue, text, value, values, isDisabled };
     }
 
     update(cell: Compatible<BaseCell>, cellToMerge: UncertainCompatible<BaseCell>): Compatible<BaseCell> {
@@ -83,7 +62,6 @@ export const WidthWrapHoc = (WrapComponent: any) => {
       return this.getCompatibleCell({
         ...cell,
         selectedValue: selectedValueFromText,
-        commit: cellToMerge?.commit,
       });
     }
 
@@ -104,10 +82,13 @@ export const WidthWrapHoc = (WrapComponent: any) => {
     }
     /** render 不能抽出来组件，否则点击会失效 */
     render(cell: any, isInEditMode: boolean, onCellChanged: (cell: any, commit: boolean) => void): React.ReactNode {
-      const [isOpen, setIsOpen] = useState<boolean>(false);
+      const [edit, setEdit] = useState<boolean>(false);
+      const [open, setOpen] = useState<boolean>(false);
       const datatypeId = cell?.columnId + cell?.rowId;
       const [comValue, setComValue] = useState(cell?.text);
+      const [isValidator, setIsValidator] = useState(false);
       const comValueInit = useRef<any>(cell?.text);
+      const openTimerRef = useRef<any>();
       useEffect(() => {
         setComValue(cell?.text);
         comValueInit.current = cell?.text;
@@ -115,9 +96,9 @@ export const WidthWrapHoc = (WrapComponent: any) => {
 
       useEffect(() => {
         // 处理下拉选项弹层失焦逻辑
-        function onClick() {
+        function onClick(e) {
           if ((window as any).gridEditId != datatypeId) {
-            setIsOpen(false);
+            setEdit(false);
           }
         }
         document.addEventListener("click", onClick);
@@ -126,65 +107,111 @@ export const WidthWrapHoc = (WrapComponent: any) => {
         };
       }, []);
 
-      const isValidator = useMemo(() => {
+      /** 校验触发器 */
+      const onValidator = (val) => {
         let flag = false;
         let isVerify = false;
         for (let it of cell?.validatorList || []) {
-          if (it?.pattern?.test(comValue)) {
+          if (it?.pattern?.test(val)) {
             flag = true;
           }
           break;
         }
-        isVerify = !flag && cell?.validatorList?.length > 0;
+        isVerify = !flag && Array.isArray(cell?.validatorList) && cell?.validatorList?.length > 0;
+        setIsValidator(isVerify);
+      };
+
+      useEffect(() => {
+        if (!open) return;
+        // 等下一帧，弹窗DOM渲染完成
+        const timer = setTimeout(() => {
+          const popup: any = document.querySelector(".ant-picker-dropdown");
+          if (!popup) return;
+
+          const stopPointer = (e: PointerEvent) => {
+            // 阻断事件往上冒泡到document
+            e.stopPropagation();
+          };
+          // 捕获阶段监听 pointerdown！！必须是pointerdown不是mousedown
+          popup.addEventListener("pointerdown", stopPointer, true);
+
+          // 清理函数
+          return () => {
+            popup.removeEventListener("pointerdown", stopPointer, true);
+          };
+        }, 0);
+
+        return () => clearTimeout(timer);
+      }, [open]);
+
+      /** 失焦提交 */
+      const onBlurSubmit = () => {
+        let targetValue = comValueInit.current;
+        onCellChanged(
+          this.getCompatibleCell({
+            ...cell,
+            text: targetValue,
+            selectedValue: targetValue,
+          }),
+          true,
+        );
+      };
 
-        return isVerify;
-      }, [cell?.validatorList, comValue]);
+      const dataPickerProps = useMemo(() => {
+        if (isTriggerBlur?.includes(cell?.type)) {
+          return {
+            open: open,
+            /** 兼容datapicker 闪烁问题 */
+            onOpenChange: (isOpen) => {
+              if (openTimerRef.current) {
+                clearTimeout(openTimerRef.current);
+              }
+              openTimerRef.current = setTimeout(() => {
+                setOpen(isOpen);
+              }, 80);
+            },
+          };
+        }
+        return {};
+      }, [cell]);
+      /** 监听上传组件失焦回调 */
+      useEffect(() => {
+        if (!edit && cell.type == "Upload" && (window as any).uploadEdit && (window as any).uploadEdit == datatypeId) {
+          (window as any).uploadEdit = null;
+          onBlurSubmit();
+        }
+      }, [edit, comValue]);
 
       return (
         <div
-          className="base-hoc"
+          className={`base-hoc ${edit ? "base-hoc-edit" : ""}`}
           onDoubleClick={(e) => {
             if (cell?.nonEditable) {
               return;
             }
-            setIsOpen(true);
+            if (cell.type === "Upload") {
+              (window as any).uploadEdit = datatypeId;
+            }
+            setEdit(true);
           }}
         >
           <WrapComponent
+            onPointerDown={(e) => e.stopPropagation()}
             componentProps={{
               style: { width: "100%", display: "flex", alignItems: "center" },
               value: comValue,
               options: cell.values,
               onChange: (e) => {
-                cell["commit"] = "change";
-                const targetValue = e?.target?.value ?? e;
+                let targetValue = e?.target?.value ?? e;
                 setComValue(targetValue);
                 comValueInit.current = targetValue;
-
-                onCellChanged(
-                  this.getCompatibleCell({
-                    ...cell,
-                    text: targetValue,
-                    selectedValue: targetValue,
-                  }),
-                  true,
-                );
+                onValidator(targetValue);
               },
               onBlur: (e) => {
-                cell["commit"] = "submit";
-                if (isValidator) {
-                  cell["commit"] = "verify";
+                onBlurSubmit();
+                if (!isTriggerBlur?.includes(cell?.type)) {
+                  setEdit(false);
                 }
-                const targetValue = comValueInit.current;
-                onCellChanged(
-                  this.getCompatibleCell({
-                    ...cell,
-                    text: targetValue,
-                    selectedValue: targetValue,
-                  }),
-                  true,
-                );
-                setIsOpen(false);
               },
 
               onPointerDown: (e) => {
@@ -193,9 +220,10 @@ export const WidthWrapHoc = (WrapComponent: any) => {
               onKeyDown: (e) => {
                 if (isAlphaNumericKey(e.keyCode) || isNavigationKey(e.keyCode)) e.stopPropagation();
               },
+              ...dataPickerProps,
               ...((cell?.getField && cell?.getField()["x-component-props"]) || {}),
             }}
-            pattern={isOpen ? "" : "readPretty"}
+            pattern={edit ? "" : "readPretty"}
             cell={cell}
           ></WrapComponent>
           {isValidator && (

package/src/common/childAntdComponent.ts

@@ -12,3 +12,5 @@ export const childAntdComponent = {
   "Input.TextArea": Input.TextArea,
   "TimePicker.RangePicker": TimePicker.RangePicker,
 }
+export const isTriggerBlur = ["DatePicker", "DatePicker.MonthPicker", "DatePicker.QuarterPicker", "DatePicker.RangePicker", "DatePicker.TimePicker", "DatePicker.WeekPicker", "DatePicker.YearPicker", "TimePicker.RangePicker"];
+

package/src/index.less

@@ -18,6 +18,24 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    z-index: 2;
+  }
+
+  .rg-partial-area {
+    z-index: 3;
+
+  }
+
+  .rg-cell {
+    padding: 0px !important;
+  }
+
+  .rg-cell-focus {
+    z-index: 2;
+  }
+
+  .rg-fill-handle {
+    z-index: 2;
   }
 }
 
@@ -27,6 +45,13 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  z-index: 1;
+  padding: 4px;
+}
+
+.base-hoc-edit {
+  background-color: #fff;
+
 }
 
 .validator-icon {
@@ -46,4 +71,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
+}
+
+.rg-pane-left,
+.rg-pane-right {
+  z-index: 10 !important;
 }

package/src/index.tsx

@@ -1,10 +1,10 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { Checkbox, Empty, Spin } from "antd";
 import { ReactGrid } from "@silevis/reactgrid";
-import { TextTemplate } from "./Template/TextCellTemplate";
+import TextTemplate from "./Template/TextCellTemplate";
 import { antdComponents, customComponents } from "@hzab/form-render/src/index";
 import { WidthWrapHoc } from "./common/WidthWrapHoc";
-import { NumberTemplate } from "./Template/NumberCellTemplate";
+import NumberTemplate from "./Template/NumberCellTemplate";
 import { ExpandListTemplate } from "./Template/ExpandListTemplate";
 import { convertColumnsToRows, flattenColumns, isReactElement } from "./common/utils";
 import { childAntdComponent } from "./common/childAntdComponent";
@@ -33,7 +33,7 @@ interface CellEditTableProps {
   onRow?: (v: any, ri: number, ci: number) => void;
 }
 
-export default function CellEditTable(props: CellEditTableProps) {
+function CellEditTable(props: CellEditTableProps, ref: any) {
   const {
     columns,
     dataSource,
@@ -57,16 +57,22 @@ export default function CellEditTable(props: CellEditTableProps) {
 
   const [headerList, setHeaderList] = useState<any>([]);
   const [rows, setRows] = useState<any>([]);
-  /** 初始行数据 */
   const initRowsRef = useRef<any>([]);
-  const firstRender = useRef(true);
+  /** 初始行数据 */
   const [tableColumns, setTableColumns] = useState<any>([]);
   const [selectedRowKeys, setSelectedRowKeys] = useState<any>([]);
   const [newDataSource, setNewDataSource] = useState<any>([]);
   const [expandKeys, setExpandKeys] = useState<any>([]);
   const [headerCustomTemplate, setHeaderCustomTemplate] = useState<any>([]);
+  const [highlights, setHighlights] = useState([]);
   const gridRef = useRef<any>();
+  const currentCell = useRef<any>();
 
+  useImperativeHandle(ref, () => {
+    return {
+      rows,
+    };
+  });
   /** 递归处理子节点数据 */
   const handleDataSource = (arr, level = 0) => {
     arr?.forEach((el) => {
@@ -92,6 +98,9 @@ export default function CellEditTable(props: CellEditTableProps) {
     item?.cells?.forEach((el) => {
       if (el?.columnId && !fieldList?.includes(el?.columnId)) {
         obj[el?.columnId] = el?.text || el?.value || el?.selectedValue || "";
+        if (el?.type == "Number") {
+          obj[el?.columnId] = el?.value;
+        }
       }
     });
 
@@ -108,6 +117,7 @@ export default function CellEditTable(props: CellEditTableProps) {
           type: "ExpandListTemplate",
           width: 14,
           key: "ExpandListTemplate",
+          nonEditable: true,
           style: rowSelection?.style || {
             background: "rgba(128, 128, 128, 0.1)",
           },
@@ -116,6 +126,7 @@ export default function CellEditTable(props: CellEditTableProps) {
       if (rowSelection) {
         columns.unshift({
           type: "rowSelection",
+          nonEditable: true,
           width: rowSelection?.width || 30,
           key: "rowSelection",
           style: rowSelection?.style || {
@@ -192,7 +203,10 @@ export default function CellEditTable(props: CellEditTableProps) {
             text: String(cellItem || ""),
             value: cellItem,
             selectedValue: cellItem || "",
-            style: columnsItem?.type == "rowSelection" ? { display: "flex", justifyContent: "center" } : {},
+            style:
+              columnsItem?.type == "rowSelection"
+                ? { display: "flex", justifyContent: "center" }
+                : { color: cellItem == 0 ? "#CACDD7" : "" },
             ...((onRow && onRow(item, index, ind)) || {}),
             ...((columnsItem?.onCell && columnsItem?.onCell(item, index, ind)) || {}),
             ...(columnsItem?.cellProps || {}),
@@ -206,13 +220,17 @@ export default function CellEditTable(props: CellEditTableProps) {
         }),
       };
     });
-    if (firstRender.current) {
-      initRowsRef.current = [...headerList, ...tempDataSource];
-      firstRender.current = false;
-    }
-    setRows([...headerList, ...tempDataSource]);
+    const mergerList = [...headerList, ...tempDataSource];
+    setRows(mergerList);
   }, [newDataSource, tableColumns, headerList]);
-
+  useEffect(() => {
+    if (loading) {
+      const item = rows?.find((el) => el?.rowId == currentCell.current?.rowId);
+      let newItem = item?.cells?.find((it) => it?.columnId == currentCell.current?.columnId);
+      newItem = { ...currentCell.current };
+      initRowsRef.current = rows;
+    }
+  }, [loading, rows]);
   // 单元格编辑回调
   const handleCellsChanged = async (changes) => {
     const batchQuery: any = [];
@@ -225,11 +243,10 @@ export default function CellEditTable(props: CellEditTableProps) {
 
     setRows((prevRows) => {
       changes.forEach(async (change) => {
-        // const hasDiff = JSON.stringify( change?.newCell?.text) != JSON.stringify(change.previousCell?.text);
-        // if (hasDiff) return;
         const changeRowIdx = prevRows.findIndex((el) => el.rowId == change.rowId);
         const changeColumnIdx = tableColumns.findIndex((el) => el.columnId == change.columnId);
         prevRows[changeRowIdx].cells[changeColumnIdx] = { ...change.newCell };
+        currentCell.current = { ...change.newCell };
         batchQuery.push(handleArrayToObj(prevRows[changeRowIdx]));
         if (formulaConfig) {
           for (let key in formulaConfig) {
@@ -248,18 +265,15 @@ export default function CellEditTable(props: CellEditTableProps) {
             prevRows[changeRowIdx].cells[resultColumnIdx] = newCell;
           }
         }
-
-        if (change?.newCell?.commit == "submit" && onEditSubmit && !isBatchSubmit) {
+        if (onEditSubmit && !isBatchSubmit) {
           try {
             await onEditSubmit(batchQuery);
           } catch (err) {
             getList && getList();
           }
         }
-
         onChange && onChange(prevRows[changeRowIdx]);
       });
-      initRowsRef.current = prevRows;
       return [...prevRows];
     });
 
@@ -271,6 +285,7 @@ export default function CellEditTable(props: CellEditTableProps) {
       }
     }
   };
+
   /** 自定义组件注册 */
   const baseTemplate = useMemo(() => {
     const mergeTemplate: any = { ...(antdComponents || {}), ...(customComponents || {}), ...childAntdComponent };
@@ -285,50 +300,64 @@ export default function CellEditTable(props: CellEditTableProps) {
   }, [antdComponents, customComponents]);
 
   const ActionDom = (props) => {
+    const rowData = rows?.find((el) => el?.rowId == props?.cell?.rowId);
     return (
       <div onPointerDown={(e) => e.stopPropagation()}>
-        {Slots?.tableActionsSlot && <Slots.tableActionsSlot {...props?.cell} />}
-        {Slots?.actionPrefixSlot && <Slots.actionPrefixSlot {...props?.cell} />}
-        {Slots?.actionCenterSlot && <Slots.actionCenterSlot {...props?.cell} />}
-        {Slots?.actionSuffixSlot && <Slots.actionSuffixSlot {...props?.cell} />}
+        {Slots?.tableActionsSlot && <Slots.tableActionsSlot {...props?.cell} rowData={rowData} />}
+        {Slots?.actionPrefixSlot && <Slots.actionPrefixSlot {...props?.cell} rowData={rowData} />}
+        {Slots?.actionCenterSlot && <Slots.actionCenterSlot {...props?.cell} rowData={rowData} />}
+        {Slots?.actionSuffixSlot && <Slots.actionSuffixSlot {...props?.cell} rowData={rowData} />}
       </div>
     );
   };
-
+  function flattenDataSource(arr: any) {
+    const result: any = [];
+    function loop(list: any) {
+      for (const item of list) {
+        result.push(item);
+        if (item.children && item.children.length) {
+          loop(item.children);
+        }
+      }
+    }
+    loop(arr);
+    return result;
+  }
   const CheckBoxDom = (props) => {
     const { record, rowId } = props?.cell;
+    const newDataSource = flattenDataSource(dataSource);
     return (
       <Checkbox
         {...props?.componentProps}
         checked={
           rowSelection?.selectedRowKeys?.includes((record && record[rowKey]) || "") ||
-          (rowSelection?.selectedRowKeys?.length == dataSource?.length && dataSource?.length > 0)
+          (rowSelection?.selectedRowKeys?.length == newDataSource?.length && newDataSource?.length > 0)
         }
         indeterminate={
           !rowId &&
           rowSelection?.selectedRowKeys?.length > 0 &&
-          rowSelection?.selectedRowKeys?.length < dataSource?.length
+          rowSelection?.selectedRowKeys?.length < newDataSource?.length
         }
         onChange={(e) => {
           if (e.target.checked && rowId) {
             const newSelectedRowKeys = [...rowSelection?.selectedRowKeys, record[rowKey]];
-            const rows = dataSource?.filter((el) => newSelectedRowKeys?.includes(el[rowKey]));
+            const rows = newDataSource?.filter((el) => newSelectedRowKeys?.includes(el[rowKey]));
 
             rowSelection?.onChange(newSelectedRowKeys, rows);
           } else if (!e.target.checked && rowId) {
             const newSelectedRowKeys = rowSelection?.selectedRowKeys?.filter((el) => el != record[rowKey]);
-            const rows = dataSource?.filter((el) => newSelectedRowKeys?.includes(el[rowKey]));
+            const rows = newDataSource?.filter((el) => newSelectedRowKeys?.includes(el[rowKey]));
 
             rowSelection?.onChange(
               rowSelection?.selectedRowKeys?.filter((el) => el != record[rowKey]),
               rows,
             );
           } else if (e.target.checked && !rowId) {
-            const newSelectedRowKeys = dataSource?.map((el) => el[rowKey]);
-            const rows = dataSource?.filter((el) => newSelectedRowKeys?.includes(el[rowKey]));
+            const newSelectedRowKeys = newDataSource?.map((el) => el[rowKey]);
+            const rows = newDataSource?.filter((el) => newSelectedRowKeys?.includes(el[rowKey]));
 
             rowSelection?.onChange(
-              dataSource?.map((el) => el[rowKey]),
+              newDataSource?.map((el) => el[rowKey]),
               rows,
             );
           } else if (!e.target.checked && !rowId) {
@@ -340,7 +369,8 @@ export default function CellEditTable(props: CellEditTableProps) {
   };
   useEffect(() => {
     if (rowSelection) {
-      const rows = dataSource?.filter((el) => selectedRowKeys?.includes(el[rowKey]));
+      const newDataSource = flattenDataSource(dataSource);
+      const rows = newDataSource?.filter((el) => selectedRowKeys?.includes(el[rowKey]));
       rowSelection?.onChange(selectedRowKeys, rows);
     }
   }, [selectedRowKeys, dataSource]);
@@ -357,6 +387,19 @@ export default function CellEditTable(props: CellEditTableProps) {
     return templatesObj;
   }, [reactGridProps?.customCellTemplates]);
 
+  /** 选中高亮整行 */
+  const onHightsRow = (cell: any, rows: any) => {
+    const list = rows
+      ?.find((el) => el?.rowId == cell?.rowId)
+      ?.cells?.map((item) => ({
+        columnId: item?.columnId,
+        rowId: cell?.rowId,
+        className: "custom-highlights-row",
+        borderColor: "transparent",
+      }));
+    setHighlights(list);
+  };
+
   return (
     <Spin spinning={loading}>
       <div className={`grid-container ${className}`} style={reactGridStyle}>
@@ -370,15 +413,23 @@ export default function CellEditTable(props: CellEditTableProps) {
           enableRangeSelection={true}
           horizontalStickyBreakpoint={120}
           {...reactGridProps}
+          highlights={reactGridProps?.highlights ?? highlights}
           onFocusLocationChanging={(cell: any) => {
             const datatypeId = cell?.columnId + cell?.rowId;
             (window as any).gridEditId = datatypeId;
             if (["_$actions", "rowSelection", "ExpandListTemplate"]?.includes(cell?.columnId)) {
               return false;
             }
+            if (typeof cell?.rowId == "string" && cell?.rowId?.indexOf("header-") > -1) {
+              return false;
+            }
+            if (reactGridProps?.isRowHighlights && cell?.columnId) {
+              onHightsRow(cell, rows);
+            }
             if (reactGridProps?.onFocusLocationChanging) {
               return reactGridProps?.onFocusLocationChanging(cell, rows);
             }
+
             return cell;
           }}
           customCellTemplates={{
@@ -388,8 +439,8 @@ export default function CellEditTable(props: CellEditTableProps) {
             ...headerCustomTemplate,
             _$actions: WidthWrapHoc(ActionDom),
             rowSelection: WidthWrapHoc(CheckBoxDom),
-            Input: TextTemplate,
-            Number: NumberTemplate,
+            Input: WidthWrapHoc(TextTemplate),
+            Number: WidthWrapHoc(NumberTemplate),
           }}
         />
         {dataSource?.length <= 0 && (
@@ -401,3 +452,5 @@ export default function CellEditTable(props: CellEditTableProps) {
     </Spin>
   );
 }
+
+export default forwardRef(CellEditTable);

package/src/Template/NumberCellTemplate.tsx

@@ -1,168 +0,0 @@
-import {
-  Cell,
-  CellTemplate,
-  Compatible,
-  getCellProperty,
-  getCharFromKey,
-  inNumericKey,
-  isAllowedOnNumberTypingKey,
-  isCharAllowedOnNumberInput,
-  isFunctionKey,
-  isNavigationKey,
-  isNumpadNumericKey,
-  keyCodes,
-  Uncertain,
-  UncertainCompatible,
-} from "@silevis/reactgrid";
-import * as React from "react";
-import { parseLocaleNumber } from "../common/utils";
-
-// NOTE: all modules imported below may be imported from '@silevis/reactgrid'
-
-export interface NumberCell extends Cell {
-  type: "number";
-  value: number;
-  format?: Intl.NumberFormat;
-  validator?: (value: number) => boolean;
-  nanToZero?: boolean;
-  hideZero?: boolean;
-  errorMessage?: string;
-}
-
-export class NumberCellTemplate implements CellTemplate<NumberCell> {
-  private wasEscKeyPressed = false;
-
-  getCompatibleCell(uncertainCell: Uncertain<NumberCell>): Compatible<NumberCell> {
-    let value: number;
-    try {
-      value = getCellProperty(uncertainCell, "value", "number");
-    } catch (error) {
-      value = NaN;
-    }
-    const numberFormat = uncertainCell.format || new Intl.NumberFormat(window.navigator.language);
-    const displayValue = uncertainCell.nanToZero && Number.isNaN(value) ? 0 : value;
-    const text =
-      Number.isNaN(displayValue) || (uncertainCell.hideZero && displayValue === 0)
-        ? ""
-        : numberFormat.format(displayValue);
-    return { ...uncertainCell, value: displayValue, text };
-  }
-
-  handleKeyDown(
-    cell: Compatible<NumberCell>,
-    keyCode: number,
-    ctrl: boolean,
-    shift: boolean,
-    alt: boolean,
-    key: string,
-    capsLock: boolean,
-  ): { cell: Compatible<NumberCell>; enableEditMode: boolean } {
-    if (isNumpadNumericKey(keyCode)) keyCode -= 48;
-    if (isFunctionKey(keyCode)) {
-      if (keyCode === keyCodes.F2) return { cell, enableEditMode: true };
-      return { cell, enableEditMode: false };
-    }
-
-    const char = getCharFromKey(key);
-
-    if (!ctrl && isCharAllowedOnNumberInput(char)) {
-      const value = Number(char);
-
-      if (Number.isNaN(value) && isCharAllowedOnNumberInput(char))
-        return { cell: { ...this.getCompatibleCell({ ...cell, value }), text: char }, enableEditMode: true };
-      return { cell: this.getCompatibleCell({ ...cell, value }), enableEditMode: true };
-    }
-
-    return {
-      cell,
-      enableEditMode: keyCode === keyCodes.POINTER || keyCode === keyCodes.ENTER,
-    };
-  }
-
-  update(cell: Compatible<NumberCell>, cellToMerge: UncertainCompatible<NumberCell>): Compatible<NumberCell> {
-    return this.getCompatibleCell({ ...cell, value: cellToMerge.value });
-  }
-
-  private getTextFromCharCode = (cellText: string): string => {
-    switch (cellText.charCodeAt(0)) {
-      case keyCodes.DASH:
-      case keyCodes.FIREFOX_DASH:
-      case keyCodes.SUBTRACT:
-        return "-";
-      case keyCodes.COMMA:
-        return ",";
-      case keyCodes.PERIOD:
-      case keyCodes.DECIMAL:
-        return ".";
-      default:
-        return cellText;
-    }
-  };
-
-  getClassName(cell: Compatible<NumberCell>, isInEditMode: boolean): string {
-    const isValid = cell.validator?.(cell.value) ?? true;
-    const className = cell.className || "";
-    return `${!isValid ? "rg-invalid" : ""} ${className}`;
-  }
-
-  render(
-    cell: Compatible<NumberCell>,
-    isInEditMode: boolean,
-    onCellChanged: (cell: Compatible<NumberCell>, commit: boolean) => void,
-  ): React.ReactNode {
-    if (!isInEditMode) {
-      const isValid = cell.validator?.(cell.value) ?? true;
-      const textToDisplay = !isValid && cell.errorMessage ? cell.errorMessage : cell.text;
-      return textToDisplay;
-    }
-
-    const locale = cell.format ? cell.format.resolvedOptions().locale : window.navigator.languages[0];
-    const format = new Intl.NumberFormat(locale, { useGrouping: false, maximumFractionDigits: 20 });
-
-    return (
-      <input
-        className="rg-input"
-        inputMode="decimal"
-        ref={(input) => {
-          if (input) {
-            input.focus();
-            input.setSelectionRange(input.value.length, input.value.length);
-          }
-        }}
-        defaultValue={Number.isNaN(cell.value) ? this.getTextFromCharCode(cell.text) : format.format(cell.value)}
-        onChange={(e) =>
-          onCellChanged(this.getCompatibleCell({ ...cell, value: parseLocaleNumber(e.currentTarget.value) }), false)
-        }
-        onBlur={(e) => {
-          onCellChanged(
-            this.getCompatibleCell({ ...cell, value: parseLocaleNumber(e.currentTarget.value) }),
-            !this.wasEscKeyPressed,
-          );
-          this.wasEscKeyPressed = false;
-        }}
-        onKeyDown={(e) => {
-          if (
-            inNumericKey(e.keyCode) ||
-            isNavigationKey(e.keyCode) ||
-            isAllowedOnNumberTypingKey(e.keyCode) ||
-            ((e.ctrlKey || e.metaKey) && e.keyCode === keyCodes.KEY_A)
-          )
-            e.stopPropagation();
-          if (
-            !inNumericKey(e.keyCode) &&
-            !isNavigationKey(e.keyCode) &&
-            !isCharAllowedOnNumberInput(getCharFromKey(e.key))
-          )
-            e.preventDefault();
-          if (e.keyCode === keyCodes.ESCAPE) this.wasEscKeyPressed = true;
-        }}
-        onCopy={(e) => e.stopPropagation()}
-        onCut={(e) => e.stopPropagation()}
-        onPaste={(e) => e.stopPropagation()}
-        onPointerDown={(e) => e.stopPropagation()}
-      />
-    );
-  }
-}
-
-export const NumberTemplate = new NumberCellTemplate();

package/src/Template/TextCellTemplate.tsx

@@ -1,123 +0,0 @@
-import {
-  Cell,
-  CellTemplate,
-  Compatible,
-  getCellProperty,
-  getCharFromKey,
-  isAlphaNumericKey,
-  isFunctionKey,
-  keyCodes,
-  Uncertain,
-  UncertainCompatible,
-} from "@silevis/reactgrid";
-import * as React from "react";
-
-export interface TextCell extends Cell {
-  type: "Input";
-  text: string;
-  placeholder?: string;
-  validator?: (text: string) => boolean;
-  renderer?: (text: string) => React.ReactNode;
-  errorMessage?: string;
-}
-
-export class TextCellTemplate implements CellTemplate<TextCell> {
-  private wasEscKeyPressed = false;
-
-  getCompatibleCell(uncertainCell: Uncertain<TextCell>): Compatible<TextCell> {
-    const text = getCellProperty(uncertainCell, "text", "string");
-    let placeholder: string | undefined;
-    try {
-      placeholder = getCellProperty(uncertainCell, "placeholder", "string");
-    } catch {
-      placeholder = "";
-    }
-    const value = parseFloat(text); // TODO more advanced parsing for all text based cells
-    return { ...uncertainCell, text, value, placeholder };
-  }
-
-  update(cell: Compatible<TextCell>, cellToMerge: UncertainCompatible<TextCell>): Compatible<TextCell> {
-    return this.getCompatibleCell({ ...cell, text: cellToMerge.text, placeholder: cellToMerge.placeholder });
-  }
-
-  handleKeyDown(
-    cell: Compatible<TextCell>,
-    keyCode: number,
-    ctrl: boolean,
-    shift: boolean,
-    alt: boolean,
-    key: string,
-    capsLock: boolean,
-  ): { cell: Compatible<TextCell>; enableEditMode: boolean } {
-    if (isFunctionKey(keyCode)) {
-      if (keyCode === keyCodes.F2) return { cell, enableEditMode: true };
-      return { cell, enableEditMode: false };
-    }
-
-    const char = getCharFromKey(key, shift, capsLock);
-
-    if (!ctrl && !alt && isAlphaNumericKey(keyCode) && !(shift && keyCode === keyCodes.SPACE))
-      return { cell: this.getCompatibleCell({ ...cell, text: char }), enableEditMode: true };
-    return {
-      cell,
-      enableEditMode: keyCode === keyCodes.POINTER || keyCode === keyCodes.ENTER,
-    };
-  }
-
-  handleCompositionEnd(
-    cell: Compatible<TextCell>,
-    eventData: any,
-  ): { cell: Compatible<TextCell>; enableEditMode: boolean } {
-    return { cell: { ...cell, text: eventData }, enableEditMode: true };
-  }
-
-  getClassName(cell: Compatible<TextCell>, isInEditMode: boolean): string {
-    const isValid = cell.validator ? cell.validator(cell.text) : true;
-    const className = cell.className ? cell.className : "";
-    return `${isValid ? "valid" : "rg-invalid"} ${
-      cell.placeholder && cell.text === "" ? "placeholder" : ""
-    } ${className}`;
-  }
-
-  render(
-    cell: Compatible<TextCell>,
-    isInEditMode: boolean,
-    onCellChanged: (cell: Compatible<TextCell>, commit: boolean) => void,
-  ): React.ReactNode {
-    if (!isInEditMode) {
-      const isValid = cell.validator ? cell.validator(cell.text) : true;
-      const cellText = cell.text || cell.placeholder || "";
-      const textToDisplay = !isValid && cell.errorMessage ? cell.errorMessage : cellText;
-      return cell.renderer ? cell.renderer(textToDisplay) : textToDisplay;
-    }
-
-    return (
-      <input
-        className="rg-input"
-        ref={(input) => {
-          if (input) {
-            input.focus();
-            // input.setSelectionRange(input.value.length, input.value.length);
-          }
-        }}
-        defaultValue={cell.text}
-        onChange={(e) => onCellChanged(this.getCompatibleCell({ ...cell, text: e.currentTarget.value }), false)}
-        onBlur={(e) => {
-          onCellChanged(this.getCompatibleCell({ ...cell, text: e.currentTarget.value }), !this.wasEscKeyPressed);
-          this.wasEscKeyPressed = false;
-        }}
-        onCopy={(e) => e.stopPropagation()}
-        onCut={(e) => e.stopPropagation()}
-        onPaste={(e) => e.stopPropagation()}
-        onPointerDown={(e) => e.stopPropagation()}
-        placeholder={cell.placeholder}
-        onKeyDown={(e) => {
-          // if (isAlphaNumericKey(e.keyCode) || isNavigationKey(e.keyCode)) e.stopPropagation();
-          // if (e.keyCode === keyCodes.ESCAPE) this.wasEscKeyPressed = true;
-        }}
-      />
-    );
-  }
-}
-
-export const TextTemplate = new TextCellTemplate();