trotl-table 1.0.100 → 1.0.102

package/README.md

@@ -88,11 +88,10 @@ export default function Demo() {
       tableId="demo-grouped"
       columns={columns}
       data={data}
+      styles="professional"
       isGrouped={false}
       groupKey="groupId"
       extraSearchTerm=""
-      rowHeight={40}
-      groupHeaderHeight={40}
       showKey={true}
       enableDragRow={true}
       selectedRowsCallback={(arr) => console.log("selected", arr)}
@@ -122,11 +121,12 @@ export default function Demo() {
 - `tableId`: unique string ID for the table
 - `columns`: array of `{ header, accessor }`
 - `data`: array of row objects
+- `styles`: optional table theme. Set to `"professional"` for a compact premium business grid: a graphite-navy header, fine horizontal separators, subtle row banding, outlined action icons, and blue selection/focus states. Other values retain the default appearance.
 - `isGrouped`: enable grouped mode (true/false)
 - `groupKey`: key to group rows by
 - `extraSearchTerm`: string to filter + highlight rows
-- `rowHeight`: row height in px
-- `groupHeaderHeight`: group header height in px
+- `rowHeight`: row height in px (default `34`, or `30` with `styles="professional"`). Explicit values override the theme default.
+- `groupHeaderHeight`: group header height in px (default `36`, or `32` with `styles="professional"`). Explicit values override the theme default.
 - `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).

package/dist/Table.cjs.js

@@ -9546,6 +9546,33 @@ _defineProperty(WindowScroller, "defaultProps", {
 });
 
 const ITEM_TYPE = "ROW";
+const actionIconPaths = {
+  view: "M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0",
+  edit: "m15 5 4 4 M4 20l4-1L20 7a2.8 2.8 0 0 0-4-4L4 15v5Z",
+  duplicate: "M9 9h11v11H9Z M15 5V3H3v12h2",
+  delete: "M3 6h18 M9 6V3h6v3 M5 6l1 15h12l1-15 M10 10v7 M14 10v7",
+  undelete: "M3 4v6h6 M3 10a9 9 0 1 1 1 8",
+  share: "M10 14 21 3 M14 3h7v7 M10 3H3v18h18v-7",
+  download: "M12 3v12 m-5-5 5 5 5-5 M3 16v5h18v-5"
+};
+function ActionIcon({
+  name
+}) {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.7",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    focusable: "false"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: actionIconPaths[name]
+  }));
+}
 const getColumnType = column => Array.isArray(column?.type) ? column.type[0] : column?.type;
 const getColumnDateFormat = column => {
   if (Array.isArray(column?.type)) return column.type[1] || null;
@@ -9694,8 +9721,9 @@ function TableInner({
   groupKey = "groupId",
   routePath = null,
   extraSearchTerm = "",
-  rowHeight = 34,
-  groupHeaderHeight = 36,
+  styles,
+  rowHeight = styles === "professional" ? 30 : 34,
+  groupHeaderHeight = styles === "professional" ? 32 : 36,
   showKey = false,
   keyWidth = null,
   selectedRowsCallback = () => {},
@@ -9734,6 +9762,7 @@ function TableInner({
   timeoutLoading = 5,
   t
 }) {
+  const isProfessional = styles === "professional";
   let translate;
   if (t) {
     translate = t;
@@ -9841,10 +9870,15 @@ function TableInner({
         });
       }
     };
-    window.addEventListener("click", handleClick);
-    window.addEventListener("contextmenu", handleClick);
+
+    // Deferred so the tap that opened the menu cannot close it right away.
+    const registerTimer = window.setTimeout(() => {
+      window.addEventListener("click", handleClick);
+      window.addEventListener("contextmenu", handleClick);
+    }, 350);
     window.addEventListener("keydown", handleEscape);
     return () => {
+      window.clearTimeout(registerTimer);
       window.removeEventListener("click", handleClick);
       window.removeEventListener("contextmenu", handleClick);
       window.removeEventListener("keydown", handleEscape);
@@ -10828,10 +10862,6 @@ function TableInner({
           } catch (err) {
             console.error("onCellChange error", err);
           }
-        },
-        style: {
-          border: "1px solid var(--border-light, #ccc)",
-          padding: "2px 4px"
         }
       });
     }
@@ -10870,10 +10900,6 @@ function TableInner({
           } catch (err) {
             console.error("onCellChange error", err);
           }
-        },
-        style: {
-          border: "1px solid var(--border-light, #ccc)",
-          padding: "2px 4px"
         }
       });
     }
@@ -11129,10 +11155,10 @@ function TableInner({
             key: key,
             style: {
               ...style,
-              background: "#f6f6fa",
-              border: "2px dashed #bbb",
+              background: "var(--table-group-bg, #f6f6fa)",
+              border: "2px dashed var(--table-group-border, #bbb)",
               textAlign: "center",
-              color: "#888",
+              color: "var(--table-group-color, #888)",
               minHeight: rowHeight,
               display: "flex",
               alignItems: "center"
@@ -11273,6 +11299,8 @@ function TableInner({
         ...highlightRowStyle
       } : style,
       className: isMobile ? "table-row mobile-clickable" : "table-row",
+      "data-stripe": visualIndex % 2 === 0 ? "even" : "odd",
+      "data-selected": selectedRows.includes(row.id) ? "true" : undefined,
       onClick: isMobile ? handleMobileRowClick : undefined,
       onContextMenu: e => {
         if (!Array.isArray(enableMouseRightClick) || enableMouseRightClick.length === 0) return;
@@ -11335,7 +11363,9 @@ function TableInner({
       role: "img",
       "aria-hidden": "false",
       title: translate("view")
-    }, "\uD83D\uDC41\uFE0F") : translate("view")), showEdit && /*#__PURE__*/React.createElement("button", {
+    }, isProfessional ? /*#__PURE__*/React.createElement(ActionIcon, {
+      name: "view"
+    }) : "👁️") : translate("view")), showEdit && /*#__PURE__*/React.createElement("button", {
       className: "action-btn-table",
       onClick: () => editCallbackRef.current(row),
       onDoubleClick: e => e.stopPropagation(),
@@ -11344,20 +11374,25 @@ function TableInner({
       role: "img",
       "aria-hidden": "false",
       title: translate("edit")
-    }, "\u270F\uFE0F") : translate("edit")), showDuplicate && /*#__PURE__*/React.createElement("button", {
+    }, isProfessional ? /*#__PURE__*/React.createElement(ActionIcon, {
+      name: "edit"
+    }) : "✏️") : translate("edit")), showDuplicate && /*#__PURE__*/React.createElement("button", {
       className: "action-btn-table",
       onClick: () => duplicateCallbackRef.current(row),
       onDoubleClick: e => e.stopPropagation(),
       "aria-label": translate("duplicate")
     }, showIcons ? /*#__PURE__*/React.createElement("span", {
-      style: {
+      style: isProfessional ? undefined : {
         color: "black"
       },
       role: "img",
       "aria-hidden": "false",
       title: translate("duplicate")
-    }, "\uD83D\uDDD0") : translate("duplicate")), showDelete && /*#__PURE__*/React.createElement("button", {
+    }, isProfessional ? /*#__PURE__*/React.createElement(ActionIcon, {
+      name: "duplicate"
+    }) : "🗐") : translate("duplicate")), showDelete && /*#__PURE__*/React.createElement("button", {
       className: "action-btn-table",
+      "data-action": "delete",
       onClick: () => deleteCallbackRef.current(row),
       onDoubleClick: e => e.stopPropagation(),
       "aria-label": translate("delete")
@@ -11365,7 +11400,9 @@ function TableInner({
       role: "img",
       "aria-hidden": "false",
       title: translate("delete")
-    }, "\uD83D\uDDD1\uFE0F") : translate("delete")), showUndelete && /*#__PURE__*/React.createElement("button", {
+    }, isProfessional ? /*#__PURE__*/React.createElement(ActionIcon, {
+      name: "delete"
+    }) : "🗑️") : translate("delete")), showUndelete && /*#__PURE__*/React.createElement("button", {
       className: "action-btn-table",
       onClick: () => undeleteCallbackRef.current(row),
       onDoubleClick: e => e.stopPropagation(),
@@ -11374,7 +11411,9 @@ function TableInner({
       role: "img",
       "aria-hidden": "false",
       title: translate("undelete")
-    }, "\u267B\uFE0F") : translate("undelete")), showShare && /*#__PURE__*/React.createElement("button", {
+    }, isProfessional ? /*#__PURE__*/React.createElement(ActionIcon, {
+      name: "undelete"
+    }) : "♻️") : translate("undelete")), showShare && /*#__PURE__*/React.createElement("button", {
       className: "action-btn-table",
       onClick: () => shareCallbackRef.current(row),
       onDoubleClick: e => e.stopPropagation(),
@@ -11383,7 +11422,9 @@ function TableInner({
       role: "img",
       "aria-hidden": "false",
       title: translate("share")
-    }, "\uD83D\uDD17") : translate("share")), showDownload && /*#__PURE__*/React.createElement("button", {
+    }, isProfessional ? /*#__PURE__*/React.createElement(ActionIcon, {
+      name: "share"
+    }) : "🔗") : translate("share")), showDownload && /*#__PURE__*/React.createElement("button", {
       className: "action-btn-table",
       onClick: () => downloadCallbackRef.current(row),
       onDoubleClick: e => e.stopPropagation(),
@@ -11392,7 +11433,9 @@ function TableInner({
       role: "img",
       "aria-hidden": "false",
       title: translate("download") || "Download"
-    }, "\uD83D\uDCE5") : translate("download") || "Download")));
+    }, isProfessional ? /*#__PURE__*/React.createElement(ActionIcon, {
+      name: "download"
+    }) : "📥") : translate("download") || "Download")));
     if (enableDragRow && item.type === "row") {
       return /*#__PURE__*/React.createElement(DraggableRow, {
         key: key,
@@ -11405,7 +11448,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, enableMouseRightClick, 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, isProfessional, showShare, getHighlightRowStyle, triggerCellCallback, getAccessorKey, getAccessorValue]);
   const rightClickActions = Array.isArray(enableMouseRightClick) ? enableMouseRightClick : [];
   const [hoveredActionIndex, setHoveredActionIndex] = React.useState(null);
   const rowHeightGetter = ({
@@ -11437,6 +11480,7 @@ function TableInner({
   }, [useExternalDndContext, enableExternalRowDrop, externalDrop]);
   const tableMarkup = /*#__PURE__*/React.createElement("div", {
     className: "table-container",
+    "data-table-style": isProfessional ? styles : undefined,
     ref: setTableRef,
     style: useExternalDndContext && enableExternalRowDrop ? {
       transition: "background 0.15s",
@@ -11450,7 +11494,7 @@ function TableInner({
       position: "sticky",
       top: 0,
       zIndex: 10,
-      background: "#fff",
+      background: "var(--table-header-bg, var(--table-bg))",
       paddingRight: headerPadRight || undefined
     }
   }, /*#__PURE__*/React.createElement("div", {
@@ -11500,7 +11544,7 @@ function TableInner({
     className: "table-cell action-cell",
     style: actionColumnStyle,
     title: translate("action")
-  }, showIcons ? /*#__PURE__*/React.createElement("span", {
+  }, showIcons && !isProfessional ? /*#__PURE__*/React.createElement("span", {
     title: translate("action")
   }, "\u2699\uFE0F") : translate("action")))), /*#__PURE__*/React.createElement("div", {
     className: "main-table",