trotl-table 1.0.97 → 1.0.98

package/README.md

@@ -127,6 +127,8 @@ export default function Demo() {
 - `extraSearchTerm`: string to filter + highlight rows
 - `rowHeight`: row height in px
 - `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.
 - `showKey`: show row key (true/false)
 - `enableDragRow`: enable drag‑and‑drop (true/false)
 - `selectedRowsCallback`: callback with selected row IDs
@@ -174,4 +176,3 @@ function Toolbar({ tableId }) {
 ## 🏆 License
 
 MIT — free to use, modify, and share.
-

package/dist/Table.cjs.js

@@ -9687,6 +9687,8 @@ function TableInner({
   tableId = "default",
   columns = [],
   data = [],
+  mobileColumnCount = 2,
+  mobileRowClick = null,
   highlightRow = null,
   isGrouped = false,
   groupKey = "groupId",
@@ -9754,6 +9756,8 @@ function TableInner({
         share: "Share",
         duplicate: "Duplicate",
         download: "Download",
+        details: "Details",
+        close: "Close",
         confirmDelete: "Confirm Delete",
         yesDelete: "Yes, Delete",
         areYouSureYouWantToDelete: "Are you sure you want to delete",
@@ -9777,6 +9781,7 @@ function TableInner({
   const duplicateCallbackRef = React.useRef(duplicateCallback);
   const downloadCallbackRef = React.useRef(downloadCallback);
   const undeleteCallbackRef = React.useRef(undeleteCallback);
+  const mobileRowClickRef = React.useRef(mobileRowClick);
   const onCellChangeRef = React.useRef(onCellChange);
   const cellCallbackRef = React.useRef(cellCallback);
 
@@ -9788,9 +9793,16 @@ function TableInner({
     editCallbackRef.current = editCallback;
     deleteCallbackRef.current = deleteCallback;
     undeleteCallbackRef.current = undeleteCallback;
+    mobileRowClickRef.current = mobileRowClick;
     onCellChangeRef.current = onCellChange;
     cellCallbackRef.current = cellCallback;
   });
+  const [isMobile, setIsMobile] = React.useState(() => typeof window !== "undefined" && window.innerWidth <= 768);
+  React.useEffect(() => {
+    const updateMobileState = () => setIsMobile(window.innerWidth <= 768);
+    window.addEventListener("resize", updateMobileState);
+    return () => window.removeEventListener("resize", updateMobileState);
+  }, []);
 
   // Context menu right click state
   const [contextMenu, setContextMenu] = React.useState({
@@ -9876,6 +9888,22 @@ function TableInner({
       flex: "1 1 0%"
     };
   }, [columnWidths, getColumnKey]);
+  const allColumns = React.useMemo(() => {
+    const composedColumns = [...columns];
+    if (Array.isArray(customColumns)) {
+      customColumns.forEach(col => {
+        if (typeof col.place === "number") {
+          composedColumns.splice(col.place, 0, {
+            ...col,
+            isCustom: true
+          });
+        }
+      });
+    }
+    return composedColumns;
+  }, [columns, customColumns]);
+  const normalizedMobileColumnCount = Math.min(2, Math.max(1, Math.floor(Number(mobileColumnCount) || 2)));
+  const visibleColumns = isMobile ? allColumns.slice(0, normalizedMobileColumnCount) : allColumns;
   const getNestedValue = React.useCallback((row, accessor) => {
     if (!row || accessor == null) return undefined;
     if (Array.isArray(accessor)) {
@@ -10254,6 +10282,21 @@ function TableInner({
     }).filter(Boolean);
     return [...new Set(parts)].join(", ");
   }, []);
+  const formatMobileDetailValue = React.useCallback((value, col) => {
+    if (value == null || value === "") return "...";
+    if (typeof value === "boolean") return value ? "✓" : "✗";
+    if (Array.isArray(value)) return formatArrayValue(value, col) || "...";
+    if (value instanceof Date) {
+      return formatDateValue(value, getColumnDateFormat(col)) || "...";
+    }
+    if (getColumnType(col) === "date" || col?.dateFormat) {
+      return formatDateValue(value, getColumnDateFormat(col)) || String(value);
+    }
+    if (typeof value === "object") {
+      return String(value.label ?? value.name ?? value.value ?? value);
+    }
+    return String(col?.translate ? translate(String(value)) : value);
+  }, [formatArrayValue, translate]);
 
   // console.log(extraSearchTerm)
 
@@ -10568,6 +10611,7 @@ function TableInner({
   // DELETE
   const [showConfirm, setShowConfirm] = React.useState(false);
   const [pendingDelete, setPendingDelete] = React.useState(null);
+  const [mobileDetailRow, setMobileDetailRow] = React.useState(null);
 
   // perform deletion for a given row (shared by immediate & modal-confirm flows)
   const doDelete = React.useCallback(async row => {
@@ -11163,19 +11207,6 @@ function TableInner({
     const visualIndex = tableDataFlat.slice(0, index).filter(i => i.type === "row").length + 1;
     const highlightRowStyle = getHighlightRowStyle(row);
 
-    // Compose columns + custom columns
-    const allColumns = [...columns];
-    // Insert custom columns at specified places
-    if (Array.isArray(customColumns)) {
-      customColumns.forEach(col => {
-        if (typeof col.place === "number") {
-          allColumns.splice(col.place, 0, {
-            ...col,
-            isCustom: true
-          });
-        }
-      });
-    }
     // handler called when user double-clicks the non-action portion of the row
     const handleRowDoubleClick = e => {
       if (!doubleClickEnable) return;
@@ -11185,13 +11216,24 @@ function TableInner({
       }
       editCallbackRef.current(row);
     };
+    const handleMobileRowClick = event => {
+      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 content = /*#__PURE__*/React.createElement("div", {
       key: key,
       style: highlightRowStyle ? {
         ...style,
         ...highlightRowStyle
       } : style,
-      className: "table-row",
+      className: isMobile ? "table-row mobile-clickable" : "table-row",
+      onClick: isMobile ? handleMobileRowClick : undefined,
       onContextMenu: e => {
         if (!Array.isArray(enableMouseRightClick) || enableMouseRightClick.length === 0) return;
         e.preventDefault();
@@ -11225,14 +11267,20 @@ function TableInner({
         minWidth: keyWidth,
         maxWidth: keyWidth
       } : undefined
-    }, visualIndex), allColumns.map((col, i) => {
+    }, visualIndex), visibleColumns.map((col, i) => {
       const resolvedAccessor = getAccessorKey(row, col.accessor);
       const cellValue = getAccessorValue(row, col.accessor);
       const cellStyle = getCellStyle(col, i);
       return /*#__PURE__*/React.createElement("div", {
         key: i,
         className: "table-cell",
-        style: cellStyle,
+        style: isMobile ? {
+          ...cellStyle,
+          flex: "1 1 0%",
+          width: undefined,
+          minWidth: 0,
+          maxWidth: "100%"
+        } : cellStyle,
         onClick: () => triggerCellCallback(row, col)
       }, col.isCustom ? typeof col.render === "function" ? col.render(row, i) : col.render : renderCell(cellValue, resolvedAccessor, row, col));
     })), showActions && /*#__PURE__*/React.createElement("div", {
@@ -11317,7 +11365,7 @@ function TableInner({
       }, content);
     }
     return content;
-  }, [tableDataFlat, columns, selectedRows, toggleRowSelection, groupRowsById, renderCell, getCellStyle, showActions, showDelete, showEdit, showKey, showView, translate, enableDragRow, moveRow, enableMultiSelect, rowHeight, tableId, customColumns, 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, 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 = ({
@@ -11347,19 +11395,6 @@ function TableInner({
       externalDrop(node);
     }
   }, [useExternalDndContext, enableExternalRowDrop, externalDrop]);
-
-  // Compose columns + custom columns for header
-  const allColumns = [...columns];
-  if (Array.isArray(customColumns)) {
-    customColumns.forEach(col => {
-      if (typeof col.place === "number") {
-        allColumns.splice(col.place, 0, {
-          ...col,
-          isCustom: true
-        });
-      }
-    });
-  }
   const tableMarkup = /*#__PURE__*/React.createElement("div", {
     className: "table-container",
     ref: setTableRef,
@@ -11400,14 +11435,20 @@ function TableInner({
       minWidth: keyWidth,
       maxWidth: keyWidth
     } : undefined
-  }, "#"), allColumns.map((col, i) => {
+  }, "#"), visibleColumns.map((col, i) => {
     const cellStyle = getCellStyle(col, i);
     const translatedHeader = typeof col.header === "string" ? translate(col.header) : col.header;
     const headerTitle = typeof translatedHeader === "string" ? translatedHeader : undefined;
     return /*#__PURE__*/React.createElement("div", {
       key: i,
       className: "table-cell header-cell",
-      style: cellStyle,
+      style: isMobile ? {
+        ...cellStyle,
+        flex: "1 1 0%",
+        width: undefined,
+        minWidth: 0,
+        maxWidth: "100%"
+      } : cellStyle,
       title: headerTitle,
       onClick: col.isCustom ? undefined : () => setSort(col.accessor)
     }, col.isCustom ? translatedHeader ?? "" : translatedHeader, !col.isCustom && isSameAccessor(sorting?.column, col.accessor) && (sorting.direction === "asc" ? " ↑" : " ↓"), /*#__PURE__*/React.createElement("div", {
@@ -11500,7 +11541,22 @@ function TableInner({
   }, typeof contextMenuModal.component === "function" ? /*#__PURE__*/React.createElement(contextMenuModal.component, {
     row: contextMenu.row
   }) : contextMenuModal.component) : null;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, tableMarkup, contextMenuMarkup, contextMenuModalMarkup);
+  const mobileDetailModalMarkup = mobileDetailRow ? /*#__PURE__*/React.createElement(Modal.default, {
+    isOpen: true,
+    title: String(mobileDetailRow.name ?? mobileDetailRow.title ?? translate("details")),
+    onCancel: () => setMobileDetailRow(null),
+    cancelLabel: translate("close"),
+    showCancel: true
+  }, /*#__PURE__*/React.createElement("dl", {
+    className: "mobile-row-details"
+  }, allColumns.map((col, index) => {
+    const header = typeof col.header === "string" ? translate(col.header) : col.header;
+    const value = col.isCustom ? typeof col.render === "function" ? col.render(mobileDetailRow, index) : col.render ?? "..." : formatMobileDetailValue(getAccessorValue(mobileDetailRow, col.accessor), col);
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: index
+    }, /*#__PURE__*/React.createElement("dt", null, header), /*#__PURE__*/React.createElement("dd", null, value));
+  }))) : null;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, tableMarkup, contextMenuMarkup, contextMenuModalMarkup, mobileDetailModalMarkup);
 }
 function Table(props) {
   const {