trotl-table 1.0.103 → 1.0.105

package/README.md

@@ -121,12 +121,17 @@ 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. Supported themes use fine horizontal separators 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.
+  - `"amazing"`: airy white audit-table styling with a pale slate header, uppercase muted labels, fine separators, and generous `60px` rows. The header and group headers are `42px` tall.
+  - 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`). 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.
+- `rowHeight`: row height in px (default `34`). Ignored with any supported theme: `"amazing"` uses `60px`; the other themes use `30px`.
+- `groupHeaderHeight`: group header height in px (default `36`). Ignored with any supported theme: `"amazing"` uses `42px`; the other themes use `32px`.
 - `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

@@ -9762,9 +9762,9 @@ function TableInner({
   timeoutLoading = 5,
   t
 }) {
-  const isProfessional = styles === "professional";
-  const rowHeight = isProfessional ? 30 : requestedRowHeight;
-  const groupHeaderHeight = isProfessional ? 32 : requestedGroupHeaderHeight;
+  const hasTheme = ["professional", "power", "lady", "amazing"].includes(styles);
+  const rowHeight = hasTheme ? styles === "amazing" ? 60 : 30 : requestedRowHeight;
+  const groupHeaderHeight = hasTheme ? styles === "amazing" ? 42 : 32 : requestedGroupHeaderHeight;
   const virtualizedListRef = React.useRef(null);
   React.useEffect(() => {
     virtualizedListRef.current?.recomputeRowHeights();
@@ -11369,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",
@@ -11380,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",
@@ -11388,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",
@@ -11406,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",
@@ -11417,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",
@@ -11428,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",
@@ -11439,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") {
@@ -11454,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 = ({
@@ -11485,8 +11485,8 @@ function TableInner({
     }
   }, [useExternalDndContext, enableExternalRowDrop, externalDrop]);
   const tableMarkup = /*#__PURE__*/React.createElement("div", {
-    className: "table-container",
-    "data-table-style": isProfessional ? styles : undefined,
+    className: hasTheme ? "table-container table-themed" : "table-container",
+    "data-table-style": hasTheme ? styles : undefined,
     ref: setTableRef,
     style: useExternalDndContext && enableExternalRowDrop ? {
       transition: "background 0.15s",
@@ -11550,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",