diff --git a/src/FillSpace.jsx b/src/FillSpace.jsx
index 65e17a3..6665151 100644
--- a/src/FillSpace.jsx
+++ b/src/FillSpace.jsx
@@ -15,6 +15,7 @@ import { alpha } from '@mui/material/styles';
* @prop {Array} items - Wheel flips pages.
* @prop {React.ComponentType|Function} renderItem - Row renderer (component or callback).
* @prop {React.ReactNode} [header] - Rendered below pagination controls and above the list items.
+ * @prop {any} [headerItem] - Optional dummy/sample item passed to probe element for layout measurement.
* @prop {number} [minPageSize=10] - Rows per page.
* @prop {number} [maxPageSize] - Maximum rows per page.
* @prop {number} [totalCount] - Total items in current dataset (or filtered dataset when paginating).
@@ -45,18 +46,16 @@ function renderRowElement(renderItem, item, index) {
}
/**
- * Data-free probe of the row height, rendered hidden. Class components
+ * Probe of the row height, rendered hidden. Class components
* (e.g. `renderItem={ArtikelMarke}`) tolerate empty props
* (`brand`/`item` undefined) and keep a fixed height (40px thumb /
- * text field), so the probe measures the row without depending on the
- * first data element. Plain callbacks are NOT probed — calling arbitrary
- * user code with `undefined` could throw — they fall back to the first
- * rendered data row.
+ * text field). When `headerItem` is supplied, it is passed to the row
+ * for precise measurement of data-driven layouts.
*/
-function renderProbeElement(renderItem) {
+function renderProbeElement(renderItem, headerItem) {
if (!isRowComponent(renderItem)) return null;
const Row = renderItem;
- return
;
+ return
;
}
const MIN_THUMB_HEIGHT = 48;
@@ -104,7 +103,10 @@ class FillSpace extends Component {
}
componentDidUpdate(prevProps) {
- if (prevProps.renderItem !== this.props.renderItem) {
+ if (
+ prevProps.renderItem !== this.props.renderItem ||
+ prevProps.headerItem !== this.props.headerItem
+ ) {
this._probeMeasure();
}
if (
@@ -487,8 +489,8 @@ class FillSpace extends Component {
: (pageCount > 1 && maxThumbTravel > 0 ? ((safePage - 1) / (pageCount - 1)) * maxThumbTravel : 0);
}
- // Hidden data-free probe: measures `renderItem` itself (no data).
- const probe = renderProbeElement(renderItem);
+ // Hidden probe: measures `renderItem` (passes headerItem when provided).
+ const probe = renderProbeElement(renderItem, this.props.headerItem);
return (
<>