Skip to content

Commit

Permalink
Improved CellMeasurer docs by demonstrating use of idCellMeasurerCell…
Browse files Browse the repository at this point in the history
…SizeCache (see #562).
  • Loading branch information
Brian Vaughn committed Feb 3, 2017
1 parent 4a2806a commit c641e37
Showing 1 changed file with 39 additions and 2 deletions.
41 changes: 39 additions & 2 deletions docs/CellMeasurer.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ class CellSizeCache {
The [default caching strategy](https://github.com/bvaughn/react-virtualized/blob/master/source/CellMeasurer/defaultCellSizeCache.js) is exported as `defaultCellMeasurerCellSizeCache` should you wish to decorate it.
You can also pass `uniformRowHeight` and/or `uniformColumnWidth` named parameters to the constructor for lists with a uniform (yet unknown) cell sizes.

An [id-based caching strategy](https://github.com/bvaughn/react-virtualized/blob/master/source/CellMeasurer/idCellSizeCache.js) is also available for data that may be sorted.
An [id-based caching strategy](id-based-cell-size-cache) is also available for data that may be sorted.
This strategy maps data ids to cell sizes rathe than index so that the sorting order of the data does not invalidate sizes.

### Examples
Expand All @@ -63,7 +63,7 @@ This strategy maps data ids to cell sizes rathe than index so that the sorting o
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).

```javascript
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { CellMeasurer, Grid } from 'react-virtualized';
Expand Down Expand Up @@ -92,6 +92,43 @@ ReactDOM.render(
);
```

#### ID-based cell size cache

`CellMeasurer` measures each cell once and then caches the measurements so it doesn't have to measure it again.
By default this caching is done using the cell's row and column indices.
Certain things (eg insertions, sorting) can invalidate this type of cache though.
If your list is dynamic- you may consider using an id-based caching strategy instead.
The `idCellMeasurerCellSizeCache` exists for this purpose:

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { CellMeasurer, Grid, idCellMeasurerCellSizeCache } from 'react-virtualized';
import 'react-virtualized/styles.css'; // only needs to be imported once

ReactDOM.render(
<CellMeasurer
cellRenderer={cellRenderer}
cellSizeCache={idCellMeasurerCellSizeCache}
columnCount={columnCount}
rowCount={rowCount}
>
{({ getColumnWidth, getRowHeight }) => (
<Grid
columnCount={columnCount}
columnWidth={getColumnWidth}
height={height}
cellRenderer={cellRenderer}
rowCount={rowCount}
rowHeight={getRowHeight}
width={width}
/>
)}
</CellMeasurer>,
document.getElementById('example')
);
```

###### Customizing `cellSizeCache`

The cell size cache can be optimized when width and/or height is uniform across cells.
Expand Down

0 comments on commit c641e37

Please sign in to comment.