trotl-table 1.0.61 → 1.0.63

package/dist/Table.cjs.js

@@ -9657,6 +9657,8 @@ function TableInner({
   downloadCallback = () => {},
   // callback for cell edits: (row, accessor, newValue)
   onCellChange = () => {},
+  // callback for any cell click
+  cellCallback = () => {},
   // when true, skip the integrated confirmation modal and delete immediately
   disableDeleteModal = false,
   deleteLabelKey = "name",
@@ -9714,6 +9716,7 @@ function TableInner({
   const duplicateCallbackRef = React.useRef(duplicateCallback);
   const downloadCallbackRef = React.useRef(downloadCallback);
   const onCellChangeRef = React.useRef(onCellChange);
+  const cellCallbackRef = React.useRef(cellCallback);
 
   // Update refs when callbacks change (using useLayoutEffect to update before render)
   React.useLayoutEffect(() => {
@@ -9723,6 +9726,7 @@ function TableInner({
     editCallbackRef.current = editCallback;
     deleteCallbackRef.current = deleteCallback;
     onCellChangeRef.current = onCellChange;
+    cellCallbackRef.current = cellCallback;
   });
   React.useEffect(() => {
     shareCallbackRef.current = shareCallback;
@@ -10179,6 +10183,28 @@ function TableInner({
       title: text
     }, text.slice(idx + query.length)));
   }, [searchTerm]);
+  const triggerCellCallback = React.useCallback((row, col, explicitValue) => {
+    const accessor = col?.accessor ?? null;
+    const value = explicitValue !== undefined ? explicitValue : accessor != null ? row?.[accessor] : undefined;
+    const type = col?.type ?? (col?.isCustom ? "custom" : "text");
+    try {
+      const callback = cellCallbackRef.current;
+      if (typeof callback !== "function") return;
+      if (callback.length >= 2) {
+        callback(row, accessor, value, col);
+        return;
+      }
+      callback({
+        type,
+        accessor,
+        value,
+        row,
+        column: col
+      });
+    } catch (err) {
+      console.error("cellCallback error", err);
+    }
+  }, []);
   const renderCell = React.useCallback((v, accessor, row, col) => {
     // Checkbox column type (editable in-table)
     if (col && col.type === 'checkbox') {
@@ -10186,7 +10212,10 @@ function TableInner({
       return /*#__PURE__*/React.createElement("input", {
         type: "checkbox",
         checked: checked,
-        onClick: e => e.stopPropagation(),
+        onClick: e => {
+          e.stopPropagation();
+          triggerCellCallback(row, col, checked);
+        },
         onChange: e => {
           const next = !!e.target.checked;
           setLocalData(prev => {
@@ -10218,7 +10247,10 @@ function TableInner({
     if (col && col.type === 'switch') {
       const checked = !!v;
       return /*#__PURE__*/React.createElement("div", {
-        onClick: e => e.stopPropagation()
+        onClick: e => {
+          e.stopPropagation();
+          triggerCellCallback(row, col, checked);
+        }
       }, /*#__PURE__*/React.createElement(Switch.default, {
         checked: checked,
         onChange: valOrEvent => {
@@ -10255,7 +10287,10 @@ function TableInner({
         type: "text",
         className: "table-cell-input",
         value: text,
-        onClick: e => e.stopPropagation(),
+        onClick: e => {
+          e.stopPropagation();
+          triggerCellCallback(row, col, text);
+        },
         onChange: e => {
           const next = e.target.value;
           setLocalData(prev => {
@@ -10331,7 +10366,7 @@ function TableInner({
     }
     // existing highlight logic for other fields
     return highlight(String(v));
-  }, [highlight, isGrouped]);
+  }, [highlight, isGrouped, triggerCellCallback]);
   const showView = buttons.includes("view");
   const showEdit = buttons.includes("edit");
   // show delete only when view is also shown (per request)
@@ -10565,7 +10600,8 @@ function TableInner({
             className: "table-cell group-header",
             style: {
               width: '100%'
-            }
+            },
+            title: `${translate(item.groupName)} (0)`
           }, item.expanded ? "▾" : "▸", " ", translate(item.groupName), " (0) \u2014 ", translate("DropHereToMoveIntoThisGroup")), columns.slice(1).map((_, i) => /*#__PURE__*/React.createElement("div", {
             key: i,
             className: "table-cell"
@@ -10605,7 +10641,8 @@ function TableInner({
           maxWidth: keyWidth
         } : undefined
       }), /*#__PURE__*/React.createElement("div", {
-        className: "table-cell group-header"
+        className: "table-cell group-header",
+        title: `${translate(item.groupName)} (${item.rowCount})`
       }, item.expanded ? "▾" : "▸", " ", translate(item.groupName), " (", item.rowCount, ")"), columns.slice(1).map((_, i) => /*#__PURE__*/React.createElement("div", {
         key: i,
         className: "table-cell"
@@ -10678,7 +10715,8 @@ function TableInner({
       return /*#__PURE__*/React.createElement("div", {
         key: i,
         className: "table-cell",
-        style: cellStyle
+        style: cellStyle,
+        onClick: () => triggerCellCallback(row, col)
       }, col.isCustom ? typeof col.render === 'function' ? col.render(row, i) : col.render : renderCell(row[col.accessor], col.accessor, row, col));
     })), showActions && /*#__PURE__*/React.createElement("div", {
       className: "table-cell action-cell",
@@ -10753,7 +10791,7 @@ function TableInner({
       }, content);
     }
     return content;
-  }, [tableDataFlat, columns, selectedRows, toggleRowSelection, groupRowsById, renderCell, showActions, showDelete, showEdit, showKey, showView, translate, enableDragRow, moveRow, enableMultiSelect, rowHeight, tableId, customColumns, doubleClickEnable, keyWidth, actionColumnStyle, showDuplicate, showDownload, showIcons, showShare]);
+  }, [tableDataFlat, columns, selectedRows, toggleRowSelection, groupRowsById, renderCell, showActions, showDelete, showEdit, showKey, showView, translate, enableDragRow, moveRow, enableMultiSelect, rowHeight, tableId, customColumns, doubleClickEnable, keyWidth, actionColumnStyle, showDuplicate, showDownload, showIcons, showShare, triggerCellCallback]);
   const rowHeightGetter = ({
     index
   }) => tableDataFlat[index]?.type === "group" ? groupHeaderHeight : rowHeight;