Export the defaultCellRangeRenderer used by Grid in order to enable easier composition.

Author: bvaughn

CHANGELOG.md

@@ -1,6 +1,9 @@
 Changelog
 ------------
 
+##### 7.7.1
+Export the `defaultCellRangeRenderer` used by `Grid` in order to enable easier composition.
+
 ##### 7.7.0
 Added configurable `tabIndex` property to `Grid`, `FlexTable`, and `VirtualScroll`.
 Default value remains 0 but can now be overridden.

docs/Grid.md

@@ -64,9 +64,34 @@ The Grid component supports the following static class names
 This is an advanced property.
 It is useful for situations where the `Grid` requires additional, overlayed UI (such as a Gantt chart or a calendar application).
 Many use cases can be solved more easily using the `onScroll` callback or the `ScrollSync` HOC.
-If you do choose to implement your own range renderer though, consider starting by forking the [`defaultCellRangeRenderer`](https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/defaultCellRangeRenderer.js) function.
 
-The general shape of your range renderer function should look something like the following:
+If you do want to override `cellRangeRenderer` the easiest way is to decorate the default implementation like so:
+
+```js
+import { defaultCellRangeRenderer, Grid } from '../'
+
+function cellRangeRenderer (props) {
+  const children = defaultCellRangeRenderer(props)
+  children.push(
+    <div>My custom overlay</div>
+  )
+  return children
+}
+
+function CustomizedGrid (props) {
+  return (
+    <Grid
+      cellRangeRenderer={cellRangeRenderer}
+      {...props}
+    />
+  )
+}
+```
+
+
+If you require greater customization, you may want to fork the [`defaultCellRangeRenderer`](https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/defaultCellRangeRenderer.js) function.
+
+This function accepts the following named parameters:
 
 ```js
 function cellRangeRenderer ({
@@ -112,7 +137,6 @@ function cellRangeRenderer ({
 
   return renderedCells
 }
-}
 ```
 
 ### Examples

package.json

@@ -3,7 +3,7 @@
   "description": "React components for efficiently rendering large, scrollable lists and tabular data",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
   "user": "bvaughn",
-  "version": "7.7.0",
+  "version": "7.7.1",
   "homepage": "https://github.com/bvaughn/react-virtualized",
   "main": "dist/commonjs/index.js",
   "jsnext:main": "dist/es/index.js",

source/Grid/index.js

@@ -1,3 +1,4 @@
 /** @flow */
 export default from './Grid'
 export Grid from './Grid'
+export defaultCellRangeRenderer from './defaultCellRangeRenderer'

source/index.js

@@ -4,8 +4,16 @@ export { AutoSizer } from './AutoSizer'
 export { CellMeasurer } from './CellMeasurer'
 export { Collection } from './Collection'
 export { ColumnSizer } from './ColumnSizer'
-export { FlexTable, FlexColumn, SortDirection, SortIndicator } from './FlexTable'
-export { Grid } from './Grid'
+export {
+  FlexTable,
+  FlexColumn,
+  SortDirection,
+  SortIndicator
+} from './FlexTable'
+export {
+  defaultCellRangeRenderer,
+  Grid
+} from './Grid'
 export { InfiniteLoader } from './InfiniteLoader'
 export { ScrollSync } from './ScrollSync'
 export { VirtualScroll } from './VirtualScroll'