`). See [below](#using-cellmeasurer-with-images) for more detailed examples. | | columnIndex | number | ✓ | Index of column being measured (within the parent `Grid`) or 0 (if used within a `List` or `Table`). | | parent | `Grid` | ✓ | Reference to the parent `Grid`; this value is passed by `Grid` to the `cellRenderer` and should be passed along as-is. | | rowIndex | number | ✓ | Index of row being measured (within the parent `Grid`). | ### CellMeasurerCache The `CellMeasurerCache` stores `CellMeasurer` measurements and shares them with a parent `Grid`. It should be configured based on the type of measurements you need. It accepts the following parameters: ### Prop Types | Property | Type | Required? | Description | |:---|:---|:---:|:---| | defaultHeight | number | | Umeasured cells will initially report this height | | defaultWidth | number | | Umeasured cells will initially report this width | | fixedHeight | boolean | | Rendered cells will have a fixed height, dynamic width | | fixedWidth | boolean | | Rendered cells will have a fixed width, dynamic height | | minHeight | number | | Derived row height (of multiple cells) should not be less than this value | | minWidth | number | | Derived column width (of multiple cells) should not be less than this value | | keyMapper | KeyMapper | | Enables more intelligent mapping of a given column and row index to an item ID. This prevents a cell cache from being invalidated when its parent collection is modified. `(rowIndex: number, columnIndex: number) => any` | Note that while all of the individual parameters above are optional, you must supply at least some of them. `CellMeasurerCache` is not meant to measure cells that are both dynamic width _and_ height. It would be inefficient to do so since the size of a row (or column) is equal to the largest cell within that row. See [below](#limitations-and-performance-considerations) for more information. ### Examples ###### Grid This example shows a `Grid` with fixed row heights and dynamic column widths. For more examples check out the component [demo page](https://bvaughn.github.io/react-virtualized/#/components/CellMeasurer). ```jsx import React from 'react'; import { CellMeasurer, CellMeasurerCache, Grid } from 'react-virtualized'; // In this example, average cell width is assumed to be about 100px. // This value will be used for the initial `Grid` layout. // Cell measurements smaller than 75px should also be rounded up. // Height is not dynamic. const cache = new CellMeasurerCache({ defaultWidth: 100, minWidth: 75, fixedHeight: true }); function cellRenderer ({ columnIndex, key, parent, rowIndex, style }) { const content // Derive this from your data somehow return (

{content}

); } function renderGrid (props) { return ( ); } ``` ###### Using `CellMeasurer` with images This example shows how you might use the `CellMeasurer` component along with the `List` component in order to display dynamic-height rows. The difference between this example and the above example is that the height of the row is not determined until image data has loaded. To support this, a function-child is passed to `CellMeasurer` which then receives a `measure` parameter. `measure` should be called when cell content is ready to be measured (in this case, when the image has loaded). ```jsx import React from 'react'; import { CellMeasurer, CellMeasurerCache, Grid } from 'react-virtualized'; // In this example, average cell height is assumed to be about 50px. // This value will be used for the initial `Grid` layout. // Width is not dynamic. const cache = new CellMeasurerCache({ defaultHeight: 50, fixedWidth: true }); function rowRenderer ({ index, isScrolling, key, parent, style }) { const source // This comes from your list data return ( {({ measure }) => ( // 'style' attribute required to position cell (within parent List)

)} ); } function renderList (props) { return ( ); } ``` ### Limitations and Performance Considerations ###### Performance Measuring a column's width requires measuring all rows in order to determine the widest occurrence of that column. The same is true in reverse for measuring a row's height. For this reason it may not be a good idea to use this HOC for `Grid`s containing a large number of both columns _and_ cells. Since this component measures one cell at a time to determine it's width/height, it will likely be slow if a user skips many rows (or columns) at once by scrolling with a scrollbar or via a scroll-to-cell prop. There is (unfortunately) no workaround for this performance limitation at the moment.