funda-ui 4.7.202 → 4.7.222

package/lib/cjs/Table/index.js

@@ -654,8 +654,8 @@ function tableElemScrolledInit(root, w) {
     });
   }
 }
-function cellMark(col, row) {
-  return "cell-".concat(col, "-").concat(row);
+function cellMark(row, col) {
+  return "cell-".concat(row, "-").concat(col);
 }
 function removeCellFocusClassName(root) {
   if (root) {
@@ -1027,7 +1027,7 @@ function useTableDraggable(_ref, deps) {
 }
 /* harmony default export */ const hooks_useTableDraggable = (useTableDraggable);
 ;// CONCATENATED MODULE: ./src/Table.tsx
-var _excluded = ["children", "wrapperClassName", "tableClassName", "bordered", "colGroup", "cellAutoWidth", "colSortable", "onColSort", "rowDraggable", "onRowDrag", "responsive", "enhancedResponsive", "enhancedResponsiveWithScrollBar", "data", "filterFields", "filterControlClassName", "filterControlPlaceholder", "filterLabel", "onChangeFilter", "dataSelected", "rowSelectable", "onChangeRowSelect", "keyboardFocusable", "onCellKeyPressed"];
+var _excluded = ["contentRef", "children", "wrapperClassName", "tableClassName", "bordered", "colGroup", "cellAutoWidth", "colSortable", "onColSort", "rowDraggable", "onRowDrag", "responsive", "enhancedResponsive", "enhancedResponsiveWithScrollBar", "data", "filterFields", "filterControlClassName", "filterControlPlaceholder", "filterLabel", "onChangeFilter", "dataSelected", "rowSelectable", "onChangeRowSelect", "keyboardFocusable", "onCellKeyPressed", "onCellPressEnter"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function Table_slicedToArray(arr, i) { return Table_arrayWithHoles(arr) || Table_iterableToArrayLimit(arr, i) || Table_unsupportedIterableToArray(arr, i) || Table_nonIterableRest(); }
 function Table_nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -1043,8 +1043,10 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 
 
+
 var Table = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.forwardRef)(function (_ref, externalRef) {
-  var children = _ref.children,
+  var contentRef = _ref.contentRef,
+    children = _ref.children,
     wrapperClassName = _ref.wrapperClassName,
     tableClassName = _ref.tableClassName,
     bordered = _ref.bordered,
@@ -1068,6 +1070,7 @@ var Table = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_a
     onChangeRowSelect = _ref.onChangeRowSelect,
     keyboardFocusable = _ref.keyboardFocusable,
     onCellKeyPressed = _ref.onCellKeyPressed,
+    onCellPressEnter = _ref.onCellPressEnter,
     attributes = _objectWithoutProperties(_ref, _excluded);
   var uniqueID = useComId_default()();
   var rootRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
@@ -1139,6 +1142,32 @@ var Table = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_a
       setSelectedItems(newSelectedItems);
     }
   }, [data, dataSelected]);
+
+  // Synchronous execution, which blocks rendering
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useLayoutEffect)(function () {
+    if (rootRef.current) {
+      // Initialize custom props of table elements
+      initRowColProps(rootRef.current);
+    }
+  }, [data]); // Re-run when data changes
+
+  // exposes the following methods
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useImperativeHandle)(contentRef, function () {
+    return {
+      setFocusableCell: function setFocusableCell(row, col) {
+        var _rootRef$current;
+        setFocusableCellId(cellMark(row, col));
+
+        // Find and focus the cell element
+        var cellElement = (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.querySelector(".".concat(cellMark(row, col)));
+        if (cellElement) {
+          removeCellFocusClassName(rootRef.current);
+          cellElement.focus(); // !!!Required
+          cellElement.classList.add('cell-focus');
+        }
+      }
+    };
+  }, [rootRef]);
   return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(TableProvider, {
     value: {
       originData: data,
@@ -1170,7 +1199,8 @@ var Table = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_a
       refNode: refNode,
       focusableCellId: focusableCellId,
       setFocusableCellId: setFocusableCellId,
-      onCellKeyPressed: onCellKeyPressed
+      onCellKeyPressed: onCellKeyPressed,
+      onCellPressEnter: onCellPressEnter
     }
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", _extends({}, attributes, {
     id: uniqueID,
@@ -1252,7 +1282,8 @@ const App = () => {
         refNode,
         focusableCellId,
         setFocusableCellId,
-        onCellKeyPressed
+        onCellKeyPressed,
+        onCellPressEnter,
     }, [rootRef]);
     
 
@@ -1278,20 +1309,32 @@ var useTableKeyPress = function useTableKeyPress(_ref, deps) {
     focusableCellId = _ref.focusableCellId,
     setFocusableCellId = _ref.setFocusableCellId,
     onCellKeyPressed = _ref.onCellKeyPressed,
+    onCellPressEnter = _ref.onCellPressEnter,
     onKeyDown = _ref.onKeyDown;
   var handleKeyPressed = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useCallback)( /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(event) {
-      var key, oldCellSignal, _row, _col, move;
+      var key, currentCell, row, col, nextCellSignal, oldCellSignal, _row, _col, move, _nextCellSignal;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
+            key = event.code;
+            if (!((key === 'Enter' || key === 'NumpadEnter') && !enabled)) {
+              _context.next = 8;
+              break;
+            }
+            currentCell = event.target;
+            row = Number(currentCell.getAttribute('data-table-row'));
+            col = Number(currentCell.getAttribute('data-table-col'));
+            nextCellSignal = cellMark(row, col);
+            onCellPressEnter === null || onCellPressEnter === void 0 ? void 0 : onCellPressEnter(nextCellSignal, refNode.current.get(nextCellSignal), event);
+            return _context.abrupt("return");
+          case 8:
             if (!(!Array.isArray(data) || rootDataInfo === null || spyElement === null || typeof enabled === 'undefined' || enabled === false)) {
-              _context.next = 2;
+              _context.next = 10;
               break;
             }
             return _context.abrupt("return");
-          case 2:
-            key = event.code;
+          case 10:
             oldCellSignal = focusableCellId === null || focusableCellId === void 0 ? void 0 : focusableCellId.replace('cell-', '').split('-');
             _row = Number(oldCellSignal[0]);
             _col = Number(oldCellSignal[1]);
@@ -1299,15 +1342,19 @@ var useTableKeyPress = function useTableKeyPress(_ref, deps) {
               var _spyElement$querySele;
               switch (key) {
                 case 'ArrowLeft':
+                case 'Numpad4':
                   _col = _col - 1 < 0 ? 0 : _col - 1;
                   break;
                 case 'ArrowRight':
+                case 'Numpad6':
                   _col = _col + 1 > data.length - 1 ? data.length - 1 : _col + 1;
                   break;
                 case 'ArrowUp':
+                case 'Numpad8':
                   _row = _row - 1 < 0 ? 0 : _row - 1;
                   break;
                 case 'ArrowDown':
+                case 'Numpad2':
                   _row = _row + 1 > rootDataInfo.totalRow - 1 ? rootDataInfo.totalRow - 1 : _row + 1;
                   break;
               }
@@ -1324,19 +1371,23 @@ var useTableKeyPress = function useTableKeyPress(_ref, deps) {
               onCellKeyPressed === null || onCellKeyPressed === void 0 ? void 0 : onCellKeyPressed(nextCellSignal, refNode.current.get(nextCellSignal), event);
               onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
             };
-            if (key === 'ArrowLeft') {
+            if (key === 'ArrowLeft' || key === 'Numpad4') {
               move('ArrowLeft');
             }
-            if (key === 'ArrowRight') {
+            if (key === 'ArrowRight' || key === 'Numpad6') {
               move('ArrowRight');
             }
-            if (key === 'ArrowUp') {
+            if (key === 'ArrowUp' || key === 'Numpad8') {
               move('ArrowUp');
             }
-            if (key === 'ArrowDown') {
+            if (key === 'ArrowDown' || key === 'Numpad2') {
               move('ArrowDown');
             }
-          case 11:
+            if (key === 'Enter' || key === 'NumpadEnter') {
+              _nextCellSignal = cellMark(_row, _col);
+              onCellPressEnter === null || onCellPressEnter === void 0 ? void 0 : onCellPressEnter(_nextCellSignal, refNode.current.get(_nextCellSignal), event);
+            }
+          case 19:
           case "end":
             return _context.stop();
         }
@@ -1402,7 +1453,8 @@ var TableCell = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_rea
     focusableCellId = _useContext.focusableCellId,
     setFocusableCellId = _useContext.setFocusableCellId,
     keyboardFocusable = _useContext.keyboardFocusable,
-    onCellKeyPressed = _useContext.onCellKeyPressed;
+    onCellKeyPressed = _useContext.onCellKeyPressed,
+    onCellPressEnter = _useContext.onCellPressEnter;
   var CellComponent = scope ? 'th' : 'td';
 
   // key press initialization
@@ -1416,6 +1468,7 @@ var TableCell = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_rea
       focusableCellId: focusableCellId,
       setFocusableCellId: setFocusableCellId,
       onCellKeyPressed: onCellKeyPressed,
+      onCellPressEnter: onCellPressEnter,
       onKeyDown: onKeyDown
     }, [rootRef]),
     handleKeyPressed = _useTableKeyPress.handleKeyPressed;

package/lib/cjs/Utils/time.d.ts

@@ -9,6 +9,8 @@
 
 console.log(getTimeslots("10:00", "14:00", 60, true)); //['10:00 - 11:00', '11:00 - 12:00', '12:00 - 13:00', '13:00 - 14:00']
 console.log(getTimeslots("10:00", "14:00", 60));   // ['10:00', '11:00', '12:00', '13:00']
+console.log(getTimeslots("08:00:00", "08:02:00", 0.4));   // ['08:00:00', '08:00:24', '08:00:48', '08:01:12', '08:01:36', '08:02:00']
+
 */
 declare function getTimeslots(startTime: string, endTime: string, timeInterval: number, formatRange?: boolean): string[];
 /**

package/lib/cjs/Utils/time.js

@@ -62,49 +62,54 @@ __webpack_require__.r(__webpack_exports__);
 
 console.log(getTimeslots("10:00", "14:00", 60, true)); //['10:00 - 11:00', '11:00 - 12:00', '12:00 - 13:00', '13:00 - 14:00']
 console.log(getTimeslots("10:00", "14:00", 60));   // ['10:00', '11:00', '12:00', '13:00']
+console.log(getTimeslots("08:00:00", "08:02:00", 0.4));   // ['08:00:00', '08:00:24', '08:00:48', '08:01:12', '08:01:36', '08:02:00']
+
 */
 
 function getTimeslots(startTime, endTime, timeInterval) {
   var formatRange = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  // Parse time string to seconds
   var parseTime = function parseTime(s) {
-    var c = s.split(':');
-    return parseInt(c[0]) * 60 + parseInt(c[1]);
-  };
-  var convertHours = function convertHours(mins) {
-    var hour = Math.floor(mins / 60);
-    mins = Math.trunc(mins % 60);
-    var converted = pad(hour, 2) + ':' + pad(mins, 2);
-    return converted;
+    var c = s.split(":").map(Number);
+    // Support HH:mm or HH:mm:ss
+    return c[0] * 3600 + c[1] * 60 + (c[2] || 0);
   };
+
+  // Pad with zeros
   var pad = function pad(str, max) {
     str = str.toString();
     return str.length < max ? pad("0" + str, max) : str;
   };
 
-  // calculate time slot
+  // Convert seconds to HH:mm:ss
+  var convertTime = function convertTime(secs) {
+    var hour = Math.floor(secs / 3600);
+    var min = Math.floor(secs % 3600 / 60);
+    var sec = secs % 60;
+    return pad(hour, 2) + ":" + pad(min, 2) + ":" + pad(sec, 2);
+  };
+
+  // Calculate time slots
   var calculateTimeSlot = function calculateTimeSlot(_startTime, _endTime, _timeInterval) {
     var timeSlots = [];
-    // Round start and end times to next 30 min interval
-    _startTime = Math.ceil(_startTime / 30) * 30;
-    _endTime = Math.ceil(_endTime / 30) * 30;
-
-    // Start and end of interval in the loop
     var currentTime = _startTime;
-    while (currentTime < _endTime) {
+    while (currentTime <= _endTime) {
       if (formatRange) {
-        var t = convertHours(currentTime) + ' - ' + convertHours(currentTime + _timeInterval);
+        var t = convertTime(currentTime) + ' - ' + convertTime(Math.min(currentTime + _timeInterval, _endTime));
         timeSlots.push(t);
       } else {
-        timeSlots.push(convertHours(currentTime));
+        timeSlots.push(convertTime(currentTime));
       }
       currentTime += _timeInterval;
     }
     return timeSlots;
   };
-  var inputEndTime = parseTime(endTime);
   var inputStartTime = parseTime(startTime);
-  var timeSegment = calculateTimeSlot(inputStartTime, inputEndTime, timeInterval);
-  return timeSegment;
+  var inputEndTime = parseTime(endTime);
+  // If timeInterval is not an integer, treat as minutes with decimals, convert to seconds
+  var isDecimal = !Number.isInteger(timeInterval);
+  var intervalInSeconds = isDecimal ? Math.round(timeInterval * 60) : timeInterval * 60;
+  return calculateTimeSlot(inputStartTime, inputEndTime, intervalInSeconds);
 }
 
 /**

package/lib/esm/Date/index.tsx

@@ -641,12 +641,17 @@ const Date = forwardRef((props: DateProps, externalRef: any) => {
 
         e.target.select();
 
+        
         resetDefauleValueExist();
 
+        // If there is no valid default value in the input field, 
+        // onChange should be triggered only after the resetDefauleValueExist() function is processed
+        if (!dateDefaultValueExist) {
+            const _date = `${splitVals[0]}-${splitVals[1]}-${splitVals[2]}`;
+            const _full = `${_date} ${splitVals[3]}:${splitVals[4]}:${splitVals[5]}`;
+            onChange?.(inputRef.current, valueResConverter(_full), isValidDate(_full), getAllSplittingInputs());
+        }
 
-        const _date = `${splitVals[0]}-${splitVals[1]}-${splitVals[2]}`;
-        const _full = `${_date} ${splitVals[3]}:${splitVals[4]}:${splitVals[5]}`;
-        onChange?.(inputRef.current, valueResConverter(_full), isValidDate(_full), getAllSplittingInputs());
 
     }
 
@@ -670,9 +675,17 @@ const Date = forwardRef((props: DateProps, externalRef: any) => {
     async function handleKeyPressedForSplitInputs(event: KeyboardEvent<HTMLDivElement>) {
         const key = event.code;
         const btnMark = (event.target as any).dataset.mark;
-        const move = (key: string) => {
+        
+        // Check for both regular arrow keys and numpad arrow keys
+        const isLeftArrow = key === 'ArrowLeft' || key === 'Numpad4';
+        const isRightArrow = key === 'ArrowRight' || key === 'Numpad6';
+        
+        const move = (direction: 'left' | 'right') => {
             const currentIndex = splitInputsIds.findIndex((s: string) => s === btnMark);
-            const nextIndex = key === 'ArrowLeft' ? currentIndex === splitInputsIds.length - 1 ? 0 : currentIndex - 1 : currentIndex === splitInputsIds.length - 1 ? 0 : currentIndex + 1;
+            const nextIndex = direction === 'left' 
+                ? currentIndex === 0 ? splitInputsIds.length - 1 : currentIndex - 1 
+                : currentIndex === splitInputsIds.length - 1 ? 0 : currentIndex + 1;
+                
             const nextOption = splitInputsIds.at(nextIndex);
             if (nextOption) {
                 setTimeout(() => {
@@ -681,13 +694,13 @@ const Date = forwardRef((props: DateProps, externalRef: any) => {
                 setFocusableSplitInputId(nextOption);
             }
         };
-      
-        if (key === 'ArrowLeft') {
-            move('ArrowLeft');
+
+        if (isLeftArrow) {
+            move('left');
         }
 
-        if (key === 'ArrowRight') {
-            move('ArrowRight');
+        if (isRightArrow) {
+            move('right');
         }
     }
 
@@ -700,6 +713,7 @@ const Date = forwardRef((props: DateProps, externalRef: any) => {
 
 
     function resetDefauleValueExist() {
+        // Does the current input box have a "valid default value"?
         if (!dateDefaultValueExist) setDateDefaultValueExist(true);
     }
 

package/lib/esm/Select/index.tsx

@@ -53,7 +53,19 @@ import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
 
-export type SelectOptionChangeFnType = (arg1: any, arg2: any, arg3: any) => void;
+export interface MultiSelectValue {
+    items: { label: string; value: string }[];
+    labels: string[];
+    values: string[];
+    labelsOfString: string;
+    valuesOfString: string;
+}
+
+export type SelectOptionChangeFnType = (
+    event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
+    element: HTMLElement,
+    value: OptionConfig | MultiSelectValue
+) => void | Promise<void>;
 
 
 export interface MultiSelectControlValConfig {
@@ -69,7 +81,8 @@ export interface OptionConfig {
     listItemLabel?: string;
     value: string | number | boolean;
     queryString: string | number;
-    callback?: () => void;
+    callback?: () => void | Promise<void>;
+    [key: string]: string | number | boolean | any[] | (() => void | Promise<void>) | undefined;
 }
 
 
@@ -147,14 +160,28 @@ export type SelectProps = {
     fetchFuncAsync?: any;
     fetchFuncMethod?: string;
     fetchFuncMethodParams?: any[];
-    fetchCallback?: (data: any) => void;
-    onFetch?: (e: any, e2: any, value: string, data: any, incomingData: string | null | undefined) => void;
-    onLoad?: (e: any, e2: any, value: string | null | undefined) => void;
-    onSelect?: (data: any) => void;
+    fetchCallback?: (data: OptionConfig[]) => OptionConfig[];
+    onFetch?: (
+        event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
+        element: HTMLElement,
+        value: string,
+        data: OptionConfig[],
+        incomingData: string | null | undefined
+    ) => void;
+    onLoad?: (
+        event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
+        element: HTMLElement,
+        value: string | null | undefined
+    ) => void;
+    onSelect?: (data: OptionConfig) => void | Promise<void>;
     onChange?: SelectOptionChangeFnType | null;
-    onBlur?: (e: any) => void;
-    onFocus?: (e: any) => void;
-    onKeyPressed?: (arg1: any, arg2: any, arg3: any) => void;
+    onBlur?: (event: React.FocusEvent<HTMLElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLElement>) => void;
+    onKeyPressed?: (
+        event: React.KeyboardEvent<HTMLElement>,
+        element: HTMLElement,
+        value: string
+    ) => void;
 };
 
 
@@ -1402,7 +1429,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
             //
             if (noCallback && typeof (onChange) === 'function') {
                 
-                onChange?.(
+                await onChange?.(
                     selectInputRef.current,
                     valueInputRef.current,
                     !MULTI_SEL_VALID ? curItem : multipleSelectionCallback(currentControlValueArr, currentControlLabelArr)
@@ -1547,7 +1574,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
             //
             if (noCallback && typeof (onChange) === 'function') {
             
-                onChange?.(
+                await onChange?.(
                     selectInputRef.current,
                     valueInputRef.current,
                     !MULTI_SEL_VALID ? curItem : multipleSelectionCallback(currentControlValueArr, currentControlLabelArr)
@@ -1641,7 +1668,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
 
 
-    function handleSelectAll(event: any) {
+    async function handleSelectAll(event: any) {
         event.preventDefault();
         event.stopPropagation();  /* REQUIRED */
         
@@ -1664,7 +1691,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
         }
 
-        onChange?.(
+        await onChange?.(
             selectInputRef.current,
             valueInputRef.current,
             multipleSelectionCallback(_values, _labels)
@@ -1696,7 +1723,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
 
 
-    function handleMultiControlItemRemove(event: any) {
+    async function handleMultiControlItemRemove(event: any) {
         event.preventDefault();
         event.stopPropagation();  /* REQUIRED */
 
@@ -1732,7 +1759,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         //
         if (typeof (onChange) === 'function') {
 
-            onChange?.(
+            await onChange?.(
                 selectInputRef.current,
                 valueInputRef.current,
                 multipleSelectionCallback(currentControlValueArr, currentControlLabelArr)
@@ -1971,7 +1998,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
                     //
                     if (typeof (onChange) === 'function') {
 
-                        onChange?.(
+                        await onChange?.(
                             selectInputRef.current,
                             valueInputRef.current,
                             !MULTI_SEL_VALID ? currentData : multipleSelectionCallback(currentControlValueArr, currentControlLabelArr)
@@ -2214,14 +2241,14 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
                         <button
                             tabIndex={-1}
                             type="button"
-                            onClick={(e: React.MouseEvent) => {
+                            onClick={async (e: React.MouseEvent) => {
                                 e.preventDefault();
                                 e.stopPropagation();
 
                                 if (MULTI_SEL_VALID) {
                                     updateOptionCheckboxes('remove');
 
-                                    onChange?.(
+                                    await onChange?.(
                                         selectInputRef.current,
                                         valueInputRef.current,
                                         multipleSelectionCallback([], [])

package/lib/esm/Table/Table.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, forwardRef, useRef } from 'react';
+import React, { useEffect, useState, forwardRef, useRef, useLayoutEffect, useImperativeHandle } from 'react';
 
 
 import useComId from 'funda-utils/dist/cjs/useComId';
@@ -8,9 +8,11 @@ import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 import { TableProvider } from './TableContext';
 import useTableResponsive from './utils/hooks/useTableResponsive';
 import useTableDraggable from './utils/hooks/useTableDraggable';
-
+import { cellMark, removeCellFocusClassName, initRowColProps } from './utils/func';
 
 export interface TableProps extends React.HTMLAttributes<HTMLDivElement> {
+    // content ref
+    contentRef?: React.ForwardedRef<any>; // could use "Array" on contentRef.current, such as contentRef.current[0], contentRef.current[1]
 
     // basic
     wrapperClassName?: string;
@@ -48,11 +50,15 @@ export interface TableProps extends React.HTMLAttributes<HTMLDivElement> {
     // key press
     keyboardFocusable?: boolean;
     onCellKeyPressed?: (classname: string, elem: HTMLTableCellElement, event: KeyboardEvent) => void;
+    onCellPressEnter?: (classname: string, elem: HTMLTableCellElement, event: KeyboardEvent) => void;
+    
 }
 
 
 const Table = forwardRef<HTMLDivElement, TableProps>((
     {
+        contentRef,
+        
         // basic
         children,
         wrapperClassName,
@@ -90,6 +96,7 @@ const Table = forwardRef<HTMLDivElement, TableProps>((
         // key press
         keyboardFocusable,
         onCellKeyPressed,
+        onCellPressEnter,
 
         ...attributes
     },
@@ -162,6 +169,33 @@ const Table = forwardRef<HTMLDivElement, TableProps>((
         }
     }, [data, dataSelected]);
 
+    // Synchronous execution, which blocks rendering
+    useLayoutEffect(() => {
+        if (rootRef.current) {
+            // Initialize custom props of table elements
+            initRowColProps(rootRef.current);
+        }
+    }, [data]); // Re-run when data changes
+
+
+    // exposes the following methods
+    useImperativeHandle(contentRef, () => ({
+        setFocusableCell: (row: number, col: number) => {
+            
+            setFocusableCellId(cellMark(row, col));
+
+            // Find and focus the cell element
+            const cellElement = rootRef.current?.querySelector(`.${cellMark(row, col)}`);
+            if (cellElement) {
+                removeCellFocusClassName(rootRef.current);
+                cellElement.focus(); // !!!Required
+                cellElement.classList.add('cell-focus');
+            }
+
+
+        },
+    }), [rootRef]);
+
     return (
         <>
 
@@ -202,6 +236,7 @@ const Table = forwardRef<HTMLDivElement, TableProps>((
                 focusableCellId,
                 setFocusableCellId,
                 onCellKeyPressed,
+                onCellPressEnter,
 
 
             }}>

package/lib/esm/Table/TableCell.tsx

@@ -2,8 +2,6 @@ import React, { forwardRef, useContext } from 'react';
 
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
-
-
 import { TableContext } from './TableContext';
 
 import { cellMark, removeCellFocusClassName } from './utils/func';
@@ -48,6 +46,7 @@ const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>((
         setFocusableCellId,
         keyboardFocusable,
         onCellKeyPressed,
+        onCellPressEnter,
      } = useContext(TableContext);
 
 
@@ -64,6 +63,7 @@ const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>((
         focusableCellId,
         setFocusableCellId,
         onCellKeyPressed,
+        onCellPressEnter,
         onKeyDown
     }, [rootRef]);
     

package/lib/esm/Table/utils/func.ts

@@ -158,8 +158,8 @@ export function tableElemScrolledInit(root: HTMLDivElement, w: number) {
 }
 
 
-export function cellMark(col: number | string | undefined, row: number | string | undefined) {
-    return `cell-${col}-${row}`;
+export function cellMark(row: number | string | undefined, col: number | string | undefined) {
+    return `cell-${row}-${col}`;
 }
 
 export function removeCellFocusClassName(root: any) {