Internal grid width / height estimation issue

When Grid’s columnWidth or rowHeight prop is a function, the overall internal width or height is approximated rather than calculated precisely. I’m new to react-visualized, but I think I understand the purpose behind this design decision.

A negative side-effect being introduced by such an optimization is in that the scrollbars may start behaving unpredictably. The further a user scrolls, the better the approximation of the actual internal size of the grid, but the bigger the offset between the cursor and the scrollbar. This effect can be easily demonstrated in the official demo:

(the same happens with the vertical scrollbar when row height is set to be dynamic)

The reason why the size estimate is so wrong here is because the second and the third columns are rather wide while hundreds of the remaining ones are relatively narrow. The situation may be opposite, e.g. the grid may contain quite a compact title row and column followed by very large cells with charts and maps. In this case, the scroll bar will end up being behind the cursor, which may cause the cursor to run out of the browser window and thus unexpectedly reset the scroll position.

Although the existing approach to size estimation works well in most of the cases, introducing an option that would calculate all column widths and row heights in a grid feels potentially useful. It can be helpful for the grids that are large in size, but do not contain too many cells, i.e. in situations when calling all possible getColumnWidth / getRowHeight is very cheap, but the cost of a wrong guess is quite high. Perhaps, configuring estimate vs. precise calculation mode can be done independently for rows and columns.

What do you guys think of this potential extra option?

[bvaughn]

Yeah, good catch, @kachkaev. I’ll update my example to use componentDidUpdate instead.

[bvaughn]

I quickly checked if ths this method exists for MultiGrid and discovered measureAllRows instead of measureAllCells there.

Whoops, that’s surely an oversight. Fixed with 8.11.2.

Because measureAllCells is a method rather than a prop, it’d be great to see a usage example or at least some hint on where to place it.

I have a lot of examples of using refs mixed around the docs. It’s hard (and probably not worth it) to try and show every possible example in the docs. Too much maintenance effort. 😄 But sure, something like this:

class ForcedMeasureGrid extends React.Component {
  constructor(props, context) {
    super(props, context);

    this._setRef = this._setRef.bind(this);
  }

  componentDidMount() {
    this._grid.measureAllCells();
  }

  componentDidUpdate(prevProps, prevState) {
    // Note that your invalidation conditions may be different.
    // The important part is: don't remeasure on every update.
    // That's wasted work.
    // Only remeasure if relevant props have changed.
    if (
      this.props.columnWidth !== prevProps.columnWidth ||
      this.props.rowHeight !== prevProps.rowHeight
    ) {
      // Clear cached sizes and then remeasure.
      this._grid.recomputeGridSize();
      this._grid.measureAllCells();
    }
  }

  render() {
    return (
      <Grid
        ref={this._setRef}
        {...this.props}
      />
    )
  }

  _setRef(ref) {
    this._grid = ref;
  }
}