trotl-table 1.0.102 → 1.0.103

package/README.md

@@ -125,8 +125,8 @@ export default function Demo() {
 - `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 `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

@@ -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 = () => {},
@@ -9763,6 +9763,12 @@ function TableInner({
   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;
@@ -11563,6 +11569,7 @@ function TableInner({
     height,
     width
   }) => /*#__PURE__*/React.createElement(List, {
+    ref: virtualizedListRef,
     width: width,
     height: height,
     rowCount: tableDataFlat.length,