Account for dynamic top element in React Virtualized `Grid`

Question

I have a collection of photos that uses React Virtualized's Grid element.

We've designed an indicator to appear during photo uploads. This hides and shows dynamically and is rendered via the cellRangeRenderer per these docs.

The tricky part has been getting the rest of the Grid items to respect the additional height added by this new element. The approach that's currently in place is to add the height of that element to the style.top of each element rendered in cellRenderer.

const adjustedTopOffset = style.top + heightOfTopElement;

That above calculation is done for each element. This correctly places all elements at the appropriate offsets. However, the height of the Grid does not adjust for the recalculation of the top offsets.

The consequence is that the bottom of the Grid is cut off by the adjusted top amount.

How do I correctly account for adjusted top offsets? Calling recomputeGridSize doesn't seem to do it.

Is adjusting the top offset in cellRenderer the correct approach for accounting for an additional top element? I'll clarify that this isn't a fixed element but rather one that needs to scroll with the Grid like the other elements.

Answer 1

Given that your cell heights are fixed, you should be able to overrides the default height style using the containerStyle prop, like so:

let containerStyle;
if (isTopElementVisible) {
  containerStyle = {
    height: rowHeight * rowCount + heightOfTopElement,
    maxHeight: rowHeight * rowCount + heightOfTopElement,
  };
}