es-grid-template 1.9.50 → 1.9.52

package/es/table-component/hook/utils.js

@@ -177,6 +177,9 @@ export function getDateValueType(value) {
   }
   const datetimeRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(:\d{2})?(\.\d+)?(Z|[+-]\d{2}:\d{2})?$/;
   const timeRegex = /^\d{2}:\d{2}(:\d{2})?$/;
+
+  // const timeRegex = /^(?:[01]\d|2[0-3])\s*:\s*[0-5]\d(?:\s*:\s*[0-5]\d)?$/;
+
   if (datetimeRegex.test(value)) {
     return 'datetime';
   }
@@ -191,7 +194,8 @@ export const convertToDate = (value, format) => {
   }
   const valueType = getDateValueType(value);
   if (valueType === 'time') {
-    const date = dayjs(value, format, true);
+    // const date = dayjs(value, format ? [format, 'HH:mm:ss', 'HH:mm' ] : ['HH:mm:ss', 'HH:mm'], true);
+    const date = dayjs(value, format ?? ['HH:mm:ss', 'HH:mm'], true);
     return date.isValid() ? moment(date.toDate()).format() : '';
   }
   if (valueType === 'datetime') {
@@ -1230,6 +1234,14 @@ export const isEditable = (column, rowData) => {
   }
   return column?.editEnable;
 };
+export const getNextEditableColumn = (columns, currentIndex, rowData) => {
+  for (let i = currentIndex + 1; i < columns.length; i++) {
+    if (isEditable(columns[i].columnDef.meta, rowData)) {
+      return columns[i];
+    }
+  }
+  return undefined;
+};
 export const checkFieldKey = key => {
   if (key) {
     return key;
@@ -2718,4 +2730,24 @@ export function sumNumberFields(columns, data, childrenKey = 'children') {
 export const getTreeDepth = rows => {
   if (!rows?.length) return 0;
   return 1 + Math.max(0, ...rows.map(r => getTreeDepth(r.children)));
+};
+const TOKEN_MAP = {
+  YYYY: 'year',
+  MM: 'month',
+  DD: 'day',
+  HH: 'hour',
+  mm: 'minute',
+  ss: 'second'
+};
+export const isDateChanged = (oldDate, newDate, format) => {
+  const prev = dayjs(oldDate, format, true);
+  const next = dayjs(newDate, format, true);
+  const tokens = ['YYYY', 'MM', 'DD', 'HH', 'mm', 'ss'];
+  for (const token of tokens) {
+    if (!format.includes(token)) continue;
+    if (!prev.isSame(next, TOKEN_MAP[token])) {
+      return token;
+    }
+  }
+  return null;
 };

package/es/table-component/style.js

@@ -48,4 +48,4 @@ const colorDark = '#e6e4f3e6 ';
 export const GridStyle = styled.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-hdqm5k-0"
-})(["&.", "-grid{color:", ";font-size:", ";background-color:", ";font-family:", ";&.", "-grid-editable{.", "-grid-container{.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#ffffff;font-weight:500;}}}}}table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:'';pointer-events:none;}.", "-grid-cell{padding:5px 8px;&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{justify-content:flex-end;text-align:right;}&.", "-grid-cell-ellipsis{.ui-rc_cell-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;&.select-cell{padding-right:18px;position:relative;}.caret-down{float:right;position:absolute;right:0;&::before{content:'';display:inline-block;margin-left:4px;vertical-align:middle;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #6f7777;}}}}&.", "-grid-cell-wrap{white-space:normal;text-overflow:ellipsis;word-break:break-word;}.", "-grid-header-text-wrap{white-space:normal;overflow:hidden;text-overflow:ellipsis;word-break:break-word;}}.", "-grid-thead{background-color:", ";font-weight:", ";.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;z-index:3;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{font-weight:", ";background-color:", ";color:", ";&.", "-grid-row-odd{background-color:#f9f8fd;}&.", "-grid-row-even{}&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}.ui-rc-toolbar-bottom{border-right:1px solid #e0e0e0;border-left:1px solid #e0e0e0;.be-toolbar-item{.ui-rc-btn{font-size:12px;}.toolbar-dropdown-button{font-size:12px;.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-color:#28c76f;}.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-color:#28c76f;.ui-rc-btn-icon{color:#28c76f;}}}}}.ui-rc-toolbar-bottom_border-bottom{border-bottom:1px solid #e0e0e0;}.ui-rc-toolbar-bottom{position:relative;padding:.15rem 0.5rem;background-color:#ffffff;.toolbar-button{border-radius:3px;}.ui-rc-btn{border-radius:3px;height:28px;&.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-start-start-radius:0;border-end-start-radius:0;}&.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-start-end-radius:0;border-end-end-radius:0;}}}}"], props => props.$prefix, color, fontSize, BgColor, fontFamily, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, fwHeader, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, fwBody, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);
+})(["&.", "-grid{color:", ";font-size:", ";background-color:", ";font-family:", ";&.", "-grid-editable{.", "-grid-container{.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#ffffff;font-weight:500;}}}}}table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:'';pointer-events:none;}.", "-grid-cell{padding:5px 8px;&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{justify-content:flex-end;text-align:right;}&.", "-grid-cell-ellipsis{.ui-rc_cell-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;&.select-cell{padding-right:18px;position:relative;}.caret-down{float:right;position:absolute;right:0;&::before{content:'';display:inline-block;margin-left:4px;vertical-align:middle;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #6f7777;}}}}&.", "-grid-cell-wrap{white-space:normal;text-overflow:ellipsis;word-break:break-word;}.", "-grid-header-text-wrap{white-space:normal;overflow:hidden;text-overflow:ellipsis;word-break:break-word;}}.", "-grid-thead{background-color:", ";font-weight:", ";.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;z-index:3;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{font-weight:", ";background-color:", ";color:", ";&.", "-grid-row-odd{background-color:#f9f8fd;}&.", "-grid-row-even{}&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}.ui-rc-toolbar-bottom{border-right:1px solid #e0e0e0;border-left:1px solid #e0e0e0;.be-toolbar-item{.ui-rc-btn{font-size:12px;line-height:1.5}.toolbar-dropdown-button{font-size:12px;.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-color:#28c76f;}.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-color:#28c76f;.ui-rc-btn-icon{color:#28c76f;}}}}}.ui-rc-toolbar-bottom_border-bottom{border-bottom:1px solid #e0e0e0;}.ui-rc-toolbar-bottom{position:relative;padding:.15rem 0.5rem;background-color:#ffffff;.toolbar-button{border-radius:3px;}.ui-rc-btn{border-radius:3px;height:28px;&.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-start-start-radius:0;border-end-start-radius:0;}&.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-start-end-radius:0;border-end-end-radius:0;}}}}"], props => props.$prefix, color, fontSize, BgColor, fontFamily, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, fwHeader, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, fwBody, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);

package/es/table-component/style.scss

@@ -1195,4 +1195,10 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
   .ui-rc-toolbar-bottom_border-bottom {
     border-bottom-color: $tableBorderColorDark;
   }
+}
+
+.ui-rc-checkbox {
+  &:has(input:focus) span {
+  border-color: red;
+}
 }

package/lib/ali-table/utils/convertColumnsChoose.d.ts

@@ -1,5 +1,5 @@
-import { TreeDataNode } from "antd";
-import { ColumnTable } from "../../grid-component";
+import type { TreeDataNode } from "antd";
+import type { ColumnTable } from "../../grid-component";
 export declare function convertColumnsToTreeData(columns: ColumnTable[], groupColumns?: string[], t?: any): TreeDataNode[];
 export declare function filterColumnsByField(columns: ColumnTable[], fieldList: string[]): ColumnTable[];
 export declare function filterVisibleColumns(columns: ColumnTable[]): ColumnTable[];

package/lib/table-component/TableContainerEdit.js

@@ -257,39 +257,6 @@ const TableContainerEdit = props => {
   const rowsFocus = _react.default.useMemo(() => {
     return startCell && endCell ? (0, _utils.getRowIdsBetween)(table, startCell.rowId, endCell.rowId) : [];
   }, [endCell, startCell, table]);
-  const copySelectionToClipboard = _react.default.useCallback(() => {
-    if (!startCell || !endCell) {
-      return;
-    }
-
-    // const allRows = table.getRowModel().rows;
-    const allRows = table.getRowModel().flatRows;
-    // const allColumns = table.getAllLeafColumns();
-
-    const rowIds = (0, _utils.getRowIdsBetween)(table, startCell.rowId, endCell.rowId);
-    const colIds = (0, _utils.getColIdsBetween)(table, startCell.colId, endCell.colId);
-    const dataToCopy = [];
-    rowIds.forEach(rowId => {
-      const row = allRows.find(r => r.id === rowId);
-      if (!row) return;
-      const rowData = [];
-      colIds.forEach(colId => {
-        const cellll = row.getVisibleCells().find(c => c.column.id === colId);
-        const value = cellll?.getValue();
-        rowData.push(value !== undefined ? String(value) : '');
-      });
-      dataToCopy.push(rowData);
-    });
-
-    // Convert to TSV string
-    const tsv = dataToCopy.map(row => row.join('\t')).join('\n');
-
-    // Copy to clipboard
-    // navigator.clipboard.writeText(tsv).then(() => {
-    // });
-
-    copy(tsv).then(() => {}).catch(() => {});
-  }, [startCell, endCell, table]);
   const triggerChangeData = _react.default.useCallback((newData, args) => {
     onDataChange?.(newData, args);
   }, [onDataChange, dataSource]);
@@ -330,6 +297,55 @@ const TableContainerEdit = props => {
       });
     }
   }, [onCellPaste, originData, triggerChangeData]);
+
+  // Copy
+
+  const copySelectionToClipboard = _react.default.useCallback(() => {
+    if (!startCell || !endCell) {
+      return;
+    }
+
+    // const allRows = table.getRowModel().rows;
+    const allRows = table.getRowModel().flatRows;
+    // const allColumns = table.getAllLeafColumns();
+
+    const rowIds = (0, _utils.getRowIdsBetween)(table, startCell.rowId, endCell.rowId);
+    const colIds = (0, _utils.getColIdsBetween)(table, startCell.colId, endCell.colId);
+    const dataToCopy = [];
+    rowIds.forEach(rowId => {
+      const row = allRows.find(r => r.id === rowId);
+      if (!row) return;
+      const rowData = [];
+      colIds.forEach(colId => {
+        const cellll = row.getVisibleCells().find(c => c.column.id === colId);
+        const value = cellll?.getValue();
+        rowData.push(value !== undefined ? String(value) : '');
+      });
+      dataToCopy.push(rowData);
+    });
+
+    // Convert to TSV string
+    const tsv = dataToCopy.map(row => row.join('\t')).join('\n');
+
+    // Copy to clipboard
+    // navigator.clipboard.writeText(tsv).then(() => {
+    // });
+
+    copy(tsv).then(() => {}).catch(() => {});
+  }, [startCell, endCell, table]);
+  _react.default.useEffect(() => {
+    const handleKeyDown = e => {
+      if (e.ctrlKey && e.key === 'c' && startCell && endCell && !editingKey) {
+        e.preventDefault();
+        copySelectionToClipboard();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [startCell, endCell, table, copySelectionToClipboard, editingKey]);
+
+  // Paste
+
   const handlePasted = _react.default.useCallback(pasteData => {
     if (!startCell) {
       return;
@@ -337,7 +353,8 @@ const TableContainerEdit = props => {
     const rows = pasteData.slice(0, onCellPaste?.maxRowsPaste ?? 200);
 
     // const allRows = table.getRowModel().rows;
-    const allRows = table.getRowModel().flatRows;
+    const flatRows = table.getRowModel().flatRows;
+    const allRows = flatRows.filter((item, index, self) => index === self.findIndex(x => x.id === item.id));
     const allCols = table.getVisibleLeafColumns();
     const startRowIdx = allRows.findIndex(r => r.id === startCell.rowId);
     const startColIdx = allCols.findIndex(c => c.id === startCell.colId);
@@ -361,7 +378,7 @@ const TableContainerEdit = props => {
         const targetRow = startRow + rowIndex;
 
         // Nếu vượt quá số dòng hiện có, thêm dòng mới
-        if (targetRow >= newData.length) {
+        if (targetRow > newData.length) {
           const newID = (0, _utils.newGuid)();
           const defaultRowValue = (0, _utils.getDefaultValue)(defaultValue);
           newData.push(defaultValue ? {
@@ -417,11 +434,14 @@ const TableContainerEdit = props => {
               }
             } else if (columnOri.type === 'data' || columnOri.type === 'datatime' || columnOri.editType === 'date' || columnOri.editType === 'datetime') {
               const isDate = (0, _utils.isDateValue)(cellValue.trim());
-              const colFormat = typeof columnOri?.format === 'function' ? columnOri?.format(record) : columnOri?.format;
-              const cellFormat = (0, _utils.getFormat)(colFormat, format);
-              const editType = (0, _utils.getEditType)(columnOri);
-              const dateFormat = (0, _utils.getDatepickerFormat)(editType, cellFormat);
-              const date = isDate && !(0, _utils.isEmpty)(cellValue.trim()) ? (0, _moment.default)(cellValue.trim(), dateFormat).format("YYYY-MM-DDTHH:mm:ssZ") : null;
+
+              // const colFormat = typeof columnOri?.format === 'function' ? columnOri?.format(record) : columnOri?.format
+              // const cellFormat = getFormat(colFormat, format)
+              // const editType = getEditType(columnOri as any)
+              // const dateFormat = getDatepickerFormat(editType, cellFormat)
+              // const date = isDate && !isEmpty(cellValue.trim()) ? moment(cellValue.trim(), dateFormat, true).format() : null
+
+              const date = isDate && !(0, _utils.isEmpty)(cellValue.trim()) ? (0, _moment.default)(cellValue.trim()).format() : null;
               newData[targetRow] = {
                 ...newData[targetRow],
                 [columnKey]: date
@@ -522,11 +542,17 @@ const TableContainerEdit = props => {
               }
             } else if (columnOri.type === 'data' || columnOri.type === 'datatime' || columnOri.editType === 'date' || columnOri.editType === 'datetime') {
               const isDate = (0, _utils.isDateValue)(cellValue.trim());
-              const colFormat = typeof columnOri?.format === 'function' ? columnOri?.format(record) : columnOri?.format;
-              const cellFormat = (0, _utils.getFormat)(colFormat, format);
-              const editType = (0, _utils.getEditType)(columnOri);
-              const dateFormat = (0, _utils.getDatepickerFormat)(editType, cellFormat);
-              const date = isDate && !(0, _utils.isEmpty)(cellValue.trim()) ? (0, _moment.default)(cellValue.trim(), dateFormat).format("YYYY-MM-DDTHH:mm:ssZ") : null;
+
+              // const colFormat = typeof columnOri?.format === 'function' ? columnOri?.format(record) : columnOri?.format
+              // const cellFormat = getFormat(colFormat, format)
+
+              // const editType = getEditType(columnOri as any)
+
+              // const dateFormat = getDatepickerFormat(editType, cellFormat)
+
+              // const date = isDate && !isEmpty(cellValue.trim()) ? moment(cellValue.trim(), dateFormat).format("YYYY-MM-DDTHH:mm:ssZ") : null
+
+              const date = isDate && !(0, _utils.isEmpty)(cellValue.trim()) ? (0, _moment.default)(cellValue.trim()).format() : null;
               childData[targetRow] = {
                 ...childData[targetRow],
                 [columnKey]: date
@@ -601,16 +627,6 @@ const TableContainerEdit = props => {
       handlePasted(rowsPasted);
     }
   }, [handlePasted, onCellPaste?.maxRowsPaste, startCell]);
-  _react.default.useEffect(() => {
-    const handleKeyDown = e => {
-      if (e.ctrlKey && e.key === 'c' && startCell && endCell && !editingKey) {
-        e.preventDefault();
-        copySelectionToClipboard();
-      }
-    };
-    document.addEventListener('keydown', handleKeyDown);
-    return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [startCell, endCell, table, copySelectionToClipboard, editingKey]);
   _react.default.useEffect(() => {
     const handlePaste = e => {
       if (startCell && !editingKey) {

package/lib/table-component/body/EditableCell.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import type { EditType } from "rc-master-ui";
 import type { ColumnTable, IFormat } from "../../grid-component/type";
+import type { Column } from "@tanstack/react-table";
 interface EditableCellProps<DataType> extends React.HTMLAttributes<HTMLElement> {
     t?: any;
     dataIndex: string;
@@ -11,6 +12,8 @@ interface EditableCellProps<DataType> extends React.HTMLAttributes<HTMLElement>
     indexRow: number;
     indexCol: number;
     cellEditing?: any;
+    visibleColumns?: Column<DataType>[];
+    handleNextCell?: () => void;
 }
 declare const EditableCell: <T>(props: EditableCellProps<T>) => JSX.Element;
 export default EditableCell;

package/lib/table-component/body/EditableCell.js

@@ -51,7 +51,9 @@ const EditableCell = props => {
     // children,
     column,
     indexRow,
-    indexCol
+    indexCol,
+    // visibleColumns,
+    handleNextCell
     // cellEditing,
     // ...restProps
   } = props;
@@ -69,8 +71,7 @@ const EditableCell = props => {
   } = (0, _react.useContext)(_useContext.TableContext);
   const datePickerRef = _react.default.useRef(null);
   const dateTimePickerRef = _react.default.useRef(null);
-  // const timePickerRef = React.useRef(null);
-
+  const timePickerRef = _react.default.useRef(null);
   const colFormat = typeof column?.format === 'function' ? column?.format(record) : column?.format;
   const cellFormat = (0, _utils.getFormat)(colFormat, format);
   const inputNode = (value, onChange) => {
@@ -107,7 +108,24 @@ const EditableCell = props => {
     const options = validateOption ? validateOption(record, column.field) : selectOptions ?? [];
     const optionsTree = validateOption ? (0, _utils.convertArrayWithIndent)(validateOption(record, column.field)) : selectOptions ? (0, _utils.convertArrayWithIndent)(selectOptions) : [];
 
-    // const currt = flatColumns2()
+    // const focusToken = (token: FormatToken, fmt: string) => {
+    //   const input: HTMLInputElement | null =
+    //     timePickerRef.current?.nativeElement?.querySelector('input') ??
+    //     timePickerRef.current?.input;
+
+    //   if (!input) return;
+
+    //   const start = fmt.indexOf(token);
+    //   if (start === -1) return;
+
+    //   input.focus();
+
+    //   input.setSelectionRange(start, start + token.length - 1);
+
+    //   requestAnimationFrame(() => {
+    //     input.setSelectionRange(start, start + token.length);
+    //   });
+    // };
 
     switch (editType) {
       case 'date':
@@ -332,6 +350,7 @@ const EditableCell = props => {
         const maxTime = maxTimeValue ? (0, _dayjs.default)(maxTimeValue, timeFormat) : undefined;
         const minTime = minTimeValue ? (0, _dayjs.default)(minTimeValue, timeFormat) : undefined;
         return /*#__PURE__*/_react.default.createElement(_rcMasterUi.TimePicker, {
+          ref: timePickerRef,
           format: {
             format: timeFormat,
             type: 'mask'
@@ -352,8 +371,79 @@ const EditableCell = props => {
           "data-tooltip-content": message,
           "data-tooltip-id": `${id}-tooltip-error`,
           autoFocus: column.field === startCell?.colId,
-          defaultOpen: column.field === startCell?.colId,
-          onChange: (newDate, dateString) => {
+          defaultOpen: column.field === startCell?.colId
+
+          // onChange={(newDate, dateString) => {
+
+          //   if (typeTime === 'time') {
+
+          //     onChange(dateString)
+
+          //   } else {
+
+          //     // const datetime = dayjs(dateString as string, timeFormat, true);
+
+          //     const newVal =  newDate ? moment(newDate.toDate()).format() : undefined
+
+          //     // const newVal = datetime.isValid() ? moment(datetime.toDate()).format() : ''
+          //     onChange(newVal)
+
+          //   }
+
+          //   setTimeout(() => {
+          //     // @ts-ignore
+          //     dateTimePickerRef.current?.focus()
+          //   }, 0)
+
+          // }}
+
+          // onBlur={() => {
+          //   const formState = getValues()
+          //   const itemState = getValues(dataIndex)
+          //   // @ts-ignore
+          //   const prevState = record[dataIndex]
+          //   const newState = itemState
+
+          //   let newValue = newState
+
+          //   if (typeTime === 'time') {
+
+          //     newValue = newState
+
+          //   } else {
+
+          //     const datetime = dayjs(newState as string, timeFormat, true);
+
+          //     const newVal = datetime.isValid() ? moment(datetime.toDate()).format() : undefined
+          //     onChange(newVal)
+
+          //     newValue = newVal
+
+          //   }
+
+          //   if (prevState !== newState) {
+          //     handleCellChange?.({
+          //       key: key as any,
+          //       field: column.field ?? column.field as any,
+          //       record: formState,
+          //       prevState,
+          //       newState: newValue,
+          //       option: newValue,
+          //       indexCol,
+          //       indexRow,
+          //       type: 'blur'
+          //     })
+          //   }
+          // }}
+
+          //  needConfirm={false}
+          ,
+
+          onCalendarChange: (newDate, dateString) => {
+            // const newDateValue = dateString ? moment(convertDayjsToDate(dateString as string, dateFormat)).format() : null
+
+            // onChange(newDateValue)
+
             if (typeTime === 'time') {
               onChange(dateString);
             } else {
@@ -366,38 +456,34 @@ const EditableCell = props => {
             }
             setTimeout(() => {
               // @ts-ignore
-              dateTimePickerRef.current?.focus();
-            }, 0);
+              timePickerRef.current?.focus();
+            });
           },
-          onBlur: () => {
-            console.log('22222222222');
-            const formState = getValues();
-            const itemState = getValues(dataIndex);
-            // @ts-ignore
-            const prevState = record[dataIndex];
-            const newState = itemState;
-            let newValue = newState;
-            if (typeTime === 'time') {
-              newValue = newState;
-            } else {
-              const datetime = (0, _dayjs.default)(newState, timeFormat, true);
-              const newVal = datetime.isValid() ? (0, _moment.default)(datetime.toDate()).format() : undefined;
-              onChange(newVal);
-              newValue = newVal;
+          onOpenChange: open => {
+            if (!open) {
+              const formState = getValues();
+              const itemState = getValues(dataIndex);
+              // @ts-ignore
+              const prevState = record[dataIndex];
+              const newState = itemState;
+              if (prevState !== newState) {
+                handleCellChange?.({
+                  key: key,
+                  field: column.field ?? column.field,
+                  record: formState,
+                  prevState,
+                  newState,
+                  option: newState,
+                  indexCol,
+                  indexRow,
+                  type: 'blur'
+                });
+              }
             }
-            console.log('newValue', newValue);
-            if (prevState !== newState) {
-              handleCellChange?.({
-                key: key,
-                field: column.field ?? column.field,
-                record: formState,
-                prevState,
-                newState: newValue,
-                option: newValue,
-                indexCol,
-                indexRow,
-                type: 'blur'
-              });
+          },
+          onKeyDown: e => {
+            if (e?.code === "Tab") {
+              handleNextCell?.();
             }
           }
         });

package/lib/table-component/body/TableBodyCellEdit.js

@@ -239,6 +239,7 @@ const TableBodyCellEdit = props => {
     format
   } = _react.default.useContext(_useContext.TableContext);
   const expandIconColumnIndex = expandable?.expandIconColumnIndex;
+  const visibleColumns = table.getVisibleLeafColumns();
   const record = cell.row.original;
   const columnMeta = cell.column.columnDef.meta ?? {};
   const [isOpenTooltip, setIsOpenTooltip] = _react.default.useState(false);
@@ -316,7 +317,9 @@ const TableBodyCellEdit = props => {
     }
   }, [cell, columnMeta, isOpenTooltip, record, valueCellString]);
   const triggerDragPaste = (pasteState, ctrlKey) => {
-    const tmpCols = table.getVisibleLeafColumns();
+    const tmpCols = {
+      ...visibleColumns
+    };
     const rowPasteIds = (0, _utils.getRowIdsBetween)(table, startPasteCell?.rowId ?? '', endPasteCell?.rowId ?? '');
     const colPasteds = (0, _utils.getColIdsBetween)(table, startPasteCell?.colId ?? '', endPasteCell?.colId ?? '');
     const rowSelectIds = (0, _utils.getRowIdsBetween)(table, startCell?.rowId ?? '', endCell?.rowId ?? '');
@@ -390,7 +393,9 @@ const TableBodyCellEdit = props => {
     setRangePasteState?.(undefined);
   };
   const triggerPointPaste = (pasteState, cellStart, cellEnd, ctrlKey) => {
-    const tmpCols = table.getVisibleLeafColumns();
+    const tmpCols = {
+      ...visibleColumns
+    };
     const rowPasteIds = (0, _utils.getRowIdsBetween)(table, cellStart?.rowId ?? '', cellEnd?.rowId ?? '');
     const colPasteds = (0, _utils.getColIdsBetween)(table, cellStart?.colId ?? '', cellEnd?.colId ?? '');
     const rowSelectIds = (0, _utils.getRowIdsBetween)(table, startCell?.rowId ?? '', endCell?.rowId ?? '');
@@ -591,7 +596,9 @@ const TableBodyCellEdit = props => {
   function handleKeyDown(e, rowId, colId) {
     if (e.key === 'Tab') {
       e.preventDefault();
-      const allCols = table.getVisibleLeafColumns();
+      const allCols = {
+        ...visibleColumns
+      };
       const currentColIndex = table.getColumn(colId)?.getIndex() ?? 0;
       const nextCol = allCols[currentColIndex + 1];
       if (nextCol) {
@@ -655,7 +662,7 @@ const TableBodyCellEdit = props => {
     if (e.key === 'ArrowRight') {
       e.preventDefault();
       e.stopPropagation();
-      const allCols = table.getVisibleLeafColumns().filter(it => !_hooks.nonActionColumn.includes(it.id));
+      const allCols = visibleColumns.filter(it => !_hooks.nonActionColumn.includes(it.id));
       const currentColIndex = allCols.findIndex(it => it.id === cell.column.id);
       const nextCol = allCols[currentColIndex + 1];
       if (nextCol) {
@@ -686,7 +693,7 @@ const TableBodyCellEdit = props => {
     }
     if (e.key === 'ArrowLeft') {
       e.preventDefault();
-      const allCols = table.getVisibleLeafColumns().filter(it => !_hooks.nonActionColumn.includes(it.id));
+      const allCols = visibleColumns.filter(it => !_hooks.nonActionColumn.includes(it.id));
 
       // const currentColIndex = table.getColumn(colId)?.getIndex() ?? 0;
       const currentColIndex = allCols.findIndex(it => it.id === cell.column.id);
@@ -834,7 +841,7 @@ const TableBodyCellEdit = props => {
   }
   const handleMouseDownIndex = rowId => {
     setIsSelecting?.(true);
-    const allColumns = table.getVisibleLeafColumns().filter(it => !_hooks.nonActionColumn.includes(it.id));
+    const allColumns = visibleColumns.filter(it => !_hooks.nonActionColumn.includes(it.id));
     const firstCOlSpin = (0, _utils.findFirst)(allColumns);
     const startCol = allColumns[0].id;
     const endCol = allColumns[allColumns.length - 1].id;
@@ -868,7 +875,7 @@ const TableBodyCellEdit = props => {
   };
   const handleMouseEnterIndex = rowId => {
     if (isSelecting) {
-      const allColumns = table.getVisibleLeafColumns().filter(it => !_hooks.nonActionColumn.includes(it.id));
+      const allColumns = visibleColumns.filter(it => !_hooks.nonActionColumn.includes(it.id));
 
       // const firstCOl = findFirst(allColumns)
 
@@ -1118,6 +1125,58 @@ const TableBodyCellEdit = props => {
       }, 100);
     }
   };
+  const handleNextCell = () => {
+    const allCols = visibleColumns;
+
+    // const colId = cell.column.id
+    const rowId = cell.row.id;
+
+    // const currentColIndex = table.getColumn(colId)?.getIndex() ?? 0;
+    // const currentColIndex = indexCol;
+
+    const isNextCol = allCols[colIndex + 1];
+    const nextCol = (0, _utils.getNextEditableColumn)(visibleColumns, colIndex, record);
+    if (isNextCol && nextCol) {
+      setFocusedCell?.({
+        rowId,
+        colId: nextCol.id
+      });
+      setStartCell?.({
+        rowId,
+        colId: nextCol.id
+      });
+      setEndCell?.({
+        rowId,
+        colId: nextCol.id
+      });
+      setRangeState?.((0, _utils.getSelectedCellMatrix)(table, {
+        rowId,
+        colId: nextCol.id
+      }, {
+        rowId,
+        colId: nextCol.id
+      }));
+      columnVirtualizer.scrollToIndex(nextCol.getIndex(), {
+        align: 'center'
+      });
+      const nextItem = document.querySelector(`.ui-rc-grid-row .cell-editing[data-row-key="${rowId}"].cell-editing[data-col-key="${nextCol.id}"] input`);
+
+      // const input = document.querySelector(`.ui-rc-table-row .cell-editing[data-row-index="${startSelectedCells.current.row}"].cell-editing[data-col-index="${startSelectedCells.current.col}"] input`) as HTMLInputElement
+      // const textarea = document.querySelector(`.ui-rc-table-row .cell-editing[data-row-index="${rowNumber}"].cell-editing[data-col-index="${startSelectedCells.current.col}"] textarea`) as any
+
+      const textarea = document.querySelector(`.ui-rc-grid-row .cell-editing[data-row-key="${rowId}"].cell-editing[data-col-key="${nextCol.id}"] textarea`);
+      setTimeout(() => {
+        if (textarea) {
+          textarea.focus();
+          textarea.setSelectionRange(textarea.value.length, textarea.value.length);
+          return;
+        }
+        if (nextItem) {
+          nextItem.focus();
+        }
+      });
+    }
+  };
   const cellValue = cell.getValue();
   const rowIndex = cell.row.index;
   const colFormat = typeof columnMeta?.format === 'function' ? columnMeta?.format(record) : columnMeta?.format;
@@ -1253,7 +1312,9 @@ const TableBodyCellEdit = props => {
     editType: (0, _utils.getEditType)(cell.column.columnDef.meta, record),
     indexCol: cell.column.getIndex(),
     indexRow: cell.row.index,
-    record: record
+    record: record,
+    visibleColumns: visibleColumns,
+    handleNextCell: handleNextCell
     // rowKey={rowKey}
   }) : /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('ui-rc_cell-content', {

package/lib/table-component/hook/useColumns.js

@@ -48,9 +48,10 @@ const renderValueCell = (column, value, record, rowIndex, colIndex, format, edit
     case 'date':
       return value ? (0, _dayjs.default)(value).format(format?.dateFormat ?? 'DD/MM/YYYY') : '';
     case 'time':
-      const timeFormat = format?.timeFormat ?? 'HH:mm';
+      const timeFormat = format?.timeFormat;
+      console.log('timeFormat', timeFormat);
       const abc = (0, _utils.convertToDate)(value, timeFormat);
-      const timeValue = value ? (0, _dayjs.default)(abc).format(timeFormat) : '';
+      const timeValue = value ? (0, _dayjs.default)(abc).format(timeFormat ?? 'HH:mm') : '';
       return timeValue ?? '';
     case 'year':
       const year = value ? (0, _moment.default)(value).format('yyyy') : '';