trotl-table 1.0.102 → 1.0.104

package/README.md

@@ -121,12 +121,16 @@ 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.
+- `styles`: optional table theme. All supported themes use a compact premium grid with fine horizontal separators, subtle row banding, and outlined action icons:
+  - `"professional"`: graphite-navy header and slate-blue selection/focus states.
+  - `"power"`: bold charcoal header with warm amber selection/focus states and ivory row banding.
+  - `"lady"`: refined plum header with rose selection/focus states and soft blush row banding.
+  - Missing or unrecognized 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 (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.
+- `rowHeight`: row height in px (default `34`). Ignored with any supported theme, which always uses `30px` rows.
+- `groupHeaderHeight`: group header height in px (default `36`). Ignored with any supported theme, 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

@@ -9722,8 +9722,8 @@ function TableInner({
   routePath = null,
   extraSearchTerm = "",
   styles,
-  rowHeight = styles === "professional" ? 30 : 34,
-  groupHeaderHeight = styles === "professional" ? 32 : 36,
+  rowHeight: requestedRowHeight = 34,
+  groupHeaderHeight: requestedGroupHeaderHeight = 36,
   showKey = false,
   keyWidth = null,
   selectedRowsCallback = () => {},
@@ -9762,7 +9762,13 @@ function TableInner({
   timeoutLoading = 5,
   t
 }) {
-  const isProfessional = styles === "professional";
+  const hasTheme = ["professional", "power", "lady"].includes(styles);
+  const rowHeight = hasTheme ? 30 : requestedRowHeight;
+  const groupHeaderHeight = hasTheme ? 32 : requestedGroupHeaderHeight;
+  const virtualizedListRef = React.useRef(null);
+  React.useEffect(() => {
+    virtualizedListRef.current?.recomputeRowHeights();
+  }, [rowHeight, groupHeaderHeight]);
   let translate;
   if (t) {
     translate = t;
@@ -11363,7 +11369,7 @@ function TableInner({
       role: "img",
       "aria-hidden": "false",
       title: translate("view")
-    }, isProfessional ? /*#__PURE__*/React.createElement(ActionIcon, {
+    }, hasTheme ? /*#__PURE__*/React.createElement(ActionIcon, {
       name: "view"
     }) : "👁️") : translate("view")), showEdit && /*#__PURE__*/React.createElement("button", {
       className: "action-btn-table",
@@ -11374,7 +11380,7 @@ function TableInner({
       role: "img",
       "aria-hidden": "false",
       title: translate("edit")
-    }, isProfessional ? /*#__PURE__*/React.createElement(ActionIcon, {
+    }, hasTheme ? /*#__PURE__*/React.createElement(ActionIcon, {
       name: "edit"
     }) : "✏️") : translate("edit")), showDuplicate && /*#__PURE__*/React.createElement("button", {
       className: "action-btn-table",
@@ -11382,13 +11388,13 @@ function TableInner({
       onDoubleClick: e => e.stopPropagation(),
       "aria-label": translate("duplicate")
     }, showIcons ? /*#__PURE__*/React.createElement("span", {
-      style: isProfessional ? undefined : {
+      style: hasTheme ? undefined : {
         color: "black"
       },
       role: "img",
       "aria-hidden": "false",
       title: translate("duplicate")
-    }, isProfessional ? /*#__PURE__*/React.createElement(ActionIcon, {
+    }, hasTheme ? /*#__PURE__*/React.createElement(ActionIcon, {
       name: "duplicate"
     }) : "🗐") : translate("duplicate")), showDelete && /*#__PURE__*/React.createElement("button", {
       className: "action-btn-table",
@@ -11400,7 +11406,7 @@ function TableInner({
       role: "img",
       "aria-hidden": "false",
       title: translate("delete")
-    }, isProfessional ? /*#__PURE__*/React.createElement(ActionIcon, {
+    }, hasTheme ? /*#__PURE__*/React.createElement(ActionIcon, {
       name: "delete"
     }) : "🗑️") : translate("delete")), showUndelete && /*#__PURE__*/React.createElement("button", {
       className: "action-btn-table",
@@ -11411,7 +11417,7 @@ function TableInner({
       role: "img",
       "aria-hidden": "false",
       title: translate("undelete")
-    }, isProfessional ? /*#__PURE__*/React.createElement(ActionIcon, {
+    }, hasTheme ? /*#__PURE__*/React.createElement(ActionIcon, {
       name: "undelete"
     }) : "♻️") : translate("undelete")), showShare && /*#__PURE__*/React.createElement("button", {
       className: "action-btn-table",
@@ -11422,7 +11428,7 @@ function TableInner({
       role: "img",
       "aria-hidden": "false",
       title: translate("share")
-    }, isProfessional ? /*#__PURE__*/React.createElement(ActionIcon, {
+    }, hasTheme ? /*#__PURE__*/React.createElement(ActionIcon, {
       name: "share"
     }) : "🔗") : translate("share")), showDownload && /*#__PURE__*/React.createElement("button", {
       className: "action-btn-table",
@@ -11433,7 +11439,7 @@ function TableInner({
       role: "img",
       "aria-hidden": "false",
       title: translate("download") || "Download"
-    }, isProfessional ? /*#__PURE__*/React.createElement(ActionIcon, {
+    }, hasTheme ? /*#__PURE__*/React.createElement(ActionIcon, {
       name: "download"
     }) : "📥") : translate("download") || "Download")));
     if (enableDragRow && item.type === "row") {
@@ -11448,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, isProfessional, 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, hasTheme, showShare, getHighlightRowStyle, triggerCellCallback, getAccessorKey, getAccessorValue]);
   const rightClickActions = Array.isArray(enableMouseRightClick) ? enableMouseRightClick : [];
   const [hoveredActionIndex, setHoveredActionIndex] = React.useState(null);
   const rowHeightGetter = ({
@@ -11480,7 +11486,7 @@ function TableInner({
   }, [useExternalDndContext, enableExternalRowDrop, externalDrop]);
   const tableMarkup = /*#__PURE__*/React.createElement("div", {
     className: "table-container",
-    "data-table-style": isProfessional ? styles : undefined,
+    "data-table-style": hasTheme ? styles : undefined,
     ref: setTableRef,
     style: useExternalDndContext && enableExternalRowDrop ? {
       transition: "background 0.15s",
@@ -11544,7 +11550,7 @@ function TableInner({
     className: "table-cell action-cell",
     style: actionColumnStyle,
     title: translate("action")
-  }, showIcons && !isProfessional ? /*#__PURE__*/React.createElement("span", {
+  }, showIcons && !hasTheme ? /*#__PURE__*/React.createElement("span", {
     title: translate("action")
   }, "\u2699\uFE0F") : translate("action")))), /*#__PURE__*/React.createElement("div", {
     className: "main-table",
@@ -11563,6 +11569,7 @@ function TableInner({
     height,
     width
   }) => /*#__PURE__*/React.createElement(List, {
+    ref: virtualizedListRef,
     width: width,
     height: height,
     rowCount: tableDataFlat.length,