trotl-table 1.0.101 → 1.0.103

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`). Ignored with `styles="professional"`, which always uses `30px` rows.
+- `groupHeaderHeight`: group header height in px (default `36`). Ignored with `styles="professional"`, which always uses `32px` group headers.
 - `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: requestedRowHeight = 34,
+  groupHeaderHeight: requestedGroupHeaderHeight = 36,
   showKey = false,
   keyWidth = null,
   selectedRowsCallback = () => {},
@@ -9734,6 +9762,13 @@ function TableInner({
   timeoutLoading = 5,
   t
 }) {
+  const isProfessional = styles === "professional";
+  const rowHeight = isProfessional ? 30 : requestedRowHeight;
+  const groupHeaderHeight = isProfessional ? 32 : requestedGroupHeaderHeight;
+  const virtualizedListRef = React.useRef(null);
+  React.useEffect(() => {
+    virtualizedListRef.current?.recomputeRowHeights();
+  }, [rowHeight, groupHeaderHeight]);
   let translate;
   if (t) {
     translate = t;
@@ -10833,10 +10868,6 @@ function TableInner({
           } catch (err) {
             console.error("onCellChange error", err);
           }
-        },
-        style: {
-          border: "1px solid var(--border-light, #ccc)",
-          padding: "2px 4px"
         }
       });
     }
@@ -10875,10 +10906,6 @@ function TableInner({
           } catch (err) {
             console.error("onCellChange error", err);
           }
-        },
-        style: {
-          border: "1px solid var(--border-light, #ccc)",
-          padding: "2px 4px"
         }
       });
     }
@@ -11134,10 +11161,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"
@@ -11278,6 +11305,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;
@@ -11340,7 +11369,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(),
@@ -11349,20 +11380,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")
@@ -11370,7 +11406,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(),
@@ -11379,7 +11417,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(),
@@ -11388,7 +11428,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(),
@@ -11397,7 +11439,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,
@@ -11410,7 +11454,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 = ({
@@ -11442,6 +11486,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",
@@ -11455,7 +11500,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", {
@@ -11505,7 +11550,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",
@@ -11524,6 +11569,7 @@ function TableInner({
     height,
     width
   }) => /*#__PURE__*/React.createElement(List, {
+    ref: virtualizedListRef,
     width: width,
     height: height,
     rowCount: tableDataFlat.length,