trotl-table 1.0.98 → 1.0.100

package/README.md

@@ -129,6 +129,7 @@ export default function Demo() {
 - `groupHeaderHeight`: group header height in px
 - `mobileColumnCount`: number of data columns shown at viewport widths of 768px or less (1 or 2; default `2`). The full row details are shown in a modal when a mobile row is clicked.
 - `mobileRowClick`: optional callback `(row) => {}` invoked instead of opening the built-in details modal when a mobile row is clicked. Clicks on row controls and action buttons keep their existing behavior.
+- On mobile, when `enableMouseRightClick` actions are provided, double-tapping a row opens the same context menu as a right click (a single tap then opens details after a short ~280ms delay).
 - `showKey`: show row key (true/false)
 - `enableDragRow`: enable drag‑and‑drop (true/false)
 - `selectedRowsCallback`: callback with selected row IDs

package/dist/Table.cjs.js

@@ -9782,6 +9782,10 @@ function TableInner({
   const downloadCallbackRef = React.useRef(downloadCallback);
   const undeleteCallbackRef = React.useRef(undeleteCallback);
   const mobileRowClickRef = React.useRef(mobileRowClick);
+  const lastTapRef = React.useRef({
+    timer: null,
+    rowId: null
+  });
   const onCellChangeRef = React.useRef(onCellChange);
   const cellCallbackRef = React.useRef(cellCallback);
 
@@ -10979,7 +10983,7 @@ function TableInner({
   const showUndelete = buttons.includes("undelete");
   const showDuplicate = buttons.includes("duplicate") || buttons.includes("duplicates");
   const showDownload = buttons.includes("download");
-  const showActions = showView || showEdit || showDelete || showShare || showUndelete || showDuplicate || showDownload;
+  const showActions = !isMobile && (showView || showEdit || showDelete || showShare || showUndelete || showDuplicate || showDownload);
   const visibleActionCount = [showView, showEdit, showDuplicate, showDelete, showShare, showUndelete, showDownload].filter(Boolean).length;
   const actionColumnStyle = React.useMemo(() => {
     if (!showActions) return undefined;
@@ -11220,11 +11224,47 @@ function TableInner({
       if (!isMobile || event.target.closest(".checkbox-cell, .action-cell, button, input, select, textarea, a, [contenteditable='true']")) {
         return;
       }
-      if (typeof mobileRowClickRef.current === "function") {
-        mobileRowClickRef.current(row);
-      } else {
-        setMobileDetailRow(row);
+      const openSingleTap = () => {
+        if (typeof mobileRowClickRef.current === "function") {
+          mobileRowClickRef.current(row);
+        } else {
+          setMobileDetailRow(row);
+        }
+      };
+      const hasContextActions = Array.isArray(enableMouseRightClick) && enableMouseRightClick.length > 0;
+      if (!hasContextActions) {
+        openSingleTap();
+        return;
+      }
+
+      // Double tap opens the context menu; a single tap waits briefly so
+      // the first tap of a double tap does not open the details modal.
+      const tap = lastTapRef.current;
+      if (tap.timer && tap.rowId === row.id) {
+        window.clearTimeout(tap.timer);
+        lastTapRef.current = {
+          timer: null,
+          rowId: null
+        };
+        setContextMenu({
+          visible: true,
+          x: Math.max(0, Math.min(event.clientX, window.innerWidth - 180)),
+          y: Math.max(0, Math.min(event.clientY, window.innerHeight - 160)),
+          row
+        });
+        return;
       }
+      window.clearTimeout(tap.timer);
+      lastTapRef.current = {
+        rowId: row.id,
+        timer: window.setTimeout(() => {
+          lastTapRef.current = {
+            timer: null,
+            rowId: null
+          };
+          openSingleTap();
+        }, 280)
+      };
     };
     const content = /*#__PURE__*/React.createElement("div", {
       key: key,
@@ -11247,7 +11287,7 @@ function TableInner({
       }
     }, /*#__PURE__*/React.createElement("div", {
       className: "row-main",
-      onDoubleClick: doubleClickEnable ? handleRowDoubleClick : undefined,
+      onDoubleClick: doubleClickEnable && !(isMobile && Array.isArray(enableMouseRightClick) && enableMouseRightClick.length > 0) ? handleRowDoubleClick : undefined,
       style: {
         display: "flex",
         flex: 1
@@ -11365,7 +11405,7 @@ function TableInner({
       }, content);
     }
     return content;
-  }, [tableDataFlat, visibleColumns, selectedRows, toggleRowSelection, groupRowsById, renderCell, getCellStyle, showActions, showDelete, showEdit, showKey, showView, translate, enableDragRow, moveRow, enableMultiSelect, rowHeight, tableId, customColumns, isMobile, doubleClickEnable, keyWidth, actionColumnStyle, showDuplicate, showDownload, showIcons, showShare, getHighlightRowStyle, triggerCellCallback, getAccessorKey, getAccessorValue]);
+  }, [tableDataFlat, visibleColumns, selectedRows, toggleRowSelection, groupRowsById, renderCell, getCellStyle, showActions, showDelete, showEdit, showKey, showView, translate, enableDragRow, moveRow, enableMultiSelect, rowHeight, tableId, customColumns, isMobile, enableMouseRightClick, doubleClickEnable, keyWidth, actionColumnStyle, showDuplicate, showDownload, showIcons, showShare, getHighlightRowStyle, triggerCellCallback, getAccessorKey, getAccessorValue]);
   const rightClickActions = Array.isArray(enableMouseRightClick) ? enableMouseRightClick : [];
   const [hoveredActionIndex, setHoveredActionIndex] = React.useState(null);
   const rowHeightGetter = ({