trotl-table 1.0.104 → 1.0.106

package/README.md

@@ -121,16 +121,18 @@ 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. All supported themes use a compact premium grid with fine horizontal separators, subtle row banding, and outlined action icons:
+- `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.
+    Automatically switches to a dark slate palette when an ancestor (such as `<html>`) has `data-theme="dark"`. Remove the attribute or set it to `"light"` to restore the light palette. Row sizes remain unchanged.
   - 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 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.
+- `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 hasTheme = ["professional", "power", "lady"].includes(styles);
-  const rowHeight = hasTheme ? 30 : requestedRowHeight;
-  const groupHeaderHeight = hasTheme ? 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();
@@ -11485,7 +11485,7 @@ function TableInner({
     }
   }, [useExternalDndContext, enableExternalRowDrop, externalDrop]);
   const tableMarkup = /*#__PURE__*/React.createElement("div", {
-    className: "table-container",
+    className: hasTheme ? "table-container table-themed" : "table-container",
     "data-table-style": hasTheme ? styles : undefined,
     ref: setTableRef,
     style: useExternalDndContext && enableExternalRowDrop ? {
@@ -11563,7 +11563,7 @@ function TableInner({
     style: {
       padding: 24,
       textAlign: "center",
-      color: "#666"
+      color: "var(--table-muted, #666)"
     }
   }, translate("noData")) : /*#__PURE__*/React.createElement(AutoSizer, null, ({
     height,