0

I got few grids side by side, and for first of them i want to calculate row heights dynamically using CellMeasurer, how it's possible to reuse CellMeasurerCache from this grid in another (to synchronize cell heights/widths)?

jsbin example

class App extends React.Component {
  constructor(props) {
    super(props);

    this.leftHeadersCellMeasurerCache = new CellMeasurerCache({
      fixedWidth: true,
      minHeight: 40
    });
  }

  render() {
    return (
      <ScrollSync>
        {({scrollTop, onScroll}) => (
          <div className="row">
            <LeftGrid
              width={300}
              height={500}
              scrollTop={scrollTop}
              cellMeasurerCache={this.leftHeadersCellMeasurerCache}
            />
            <DataGrid
              width={400}
              height={500}
              onScroll={onScroll}
              rowHeight={this.leftHeadersCellMeasurerCache.rowHeight}
            />
          </div>
        )}
      </ScrollSync>
    )
  }
}

PS. Unfortunately cannot use MultiGrid, data on left side is "uneven".

shkipper
  • 1,403
  • 3
  • 21
  • 35

1 Answers1

1

You can't directly share a CellMeasurerCache cache between Grids unless the content of all cells in both Grids are the same (which I doubt is ever the case).

I think you'll want to decorate the CellMeasurerCache in a similar way as MultiGrid does. Your decorator would need to decide when to pass-thru values as-is and when to add a column-offset to avoid clobbering measurements.

bvaughn
  • 13,300
  • 45
  • 46