@@ -1,5 +1,5 @@
-const navHelpers = require('./src/helpers/navHelpers');
-const path = require('path');
+const navHelpers = require("./src/helpers/navHelpers");
+const path = require("path");
 
 // Add map PR-related environment variables to gatsby nodes
 exports.sourceNodes = ({ actions, createNodeId, createContentDigest }) => {
@@ -8,17 +8,17 @@ exports.sourceNodes = ({ actions, createNodeId, createContentDigest }) => {
   // Docs https://www.gatsbyjs.org/docs/actions/#createNode
   actions.createNode({
     name: 'PR_INFO',
-    num: num || '',
-    url: url || '',
+    num: num ? num : '',
+    url: url ? url : '',
     id: createNodeId(`PR_INFO`),
     parent: null,
     children: [],
     internal: {
       contentDigest: createContentDigest({ a: 'PR_INFO' }),
-      type: `EnvVars`
-    }
+      type: `EnvVars`,
+    },
   });
-}
+};
 
 // Create pages for markdown files
 exports.createPages = ({ graphql, actions }) => {
@@ -35,6 +35,7 @@ exports.createPages = ({ graphql, actions }) => {
         }
       }
     }
+  }
   `);
 
   return mdx.then(({ data }) => {
@@ -54,7 +55,7 @@ exports.createPages = ({ graphql, actions }) => {
           component: path.resolve('./src/templates/mdxFullscreenTemplate.js'),
           context: {
             title: node.frontmatter.title,
-            fileAbsolutePath: node.fileAbsolutePath // Helps us get the markdown
+            fileAbsolutePath: node.fileAbsolutePath, // Helps us get the markdown
           }
         });
       } else {
@@ -73,8 +74,9 @@ exports.createPages = ({ graphql, actions }) => {
         });
       }
     });
-  })
-}
+  });
+};
+
 
 exports.onCreateWebpackConfig = ({ stage, actions }) => {
   actions.setWebpackConfig({
@@ -98,6 +100,6 @@ exports.onCreateWebpackConfig = ({ stage, actions }) => {
         // Hack to work downstream in https://github.com/patternfly/patternfly-org
         '@content': path.resolve(__dirname, 'src/components/componentDocs'),
       }
-    }
-  });
-}
+    },
+  })
+};
@@ -28,13 +28,13 @@
   "homepage": "https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-4/",
   "dependencies": {
     "@patternfly/patternfly": "2.6.5",
-    "@patternfly/react-core": "^3.16.10",
-    "@patternfly/react-icons": "^3.8.1",
-    "@patternfly/react-styles": "^3.2.0",
+    "@patternfly/react-core": "^3.18.1",
+    "@patternfly/react-icons": "^3.9.2",
+    "@patternfly/react-styles": "^3.2.2",
     "exenv": "^1.2.2"
   },
   "peerDependencies": {
-    "@patternfly/react-table": "^2.5.11",
+    "@patternfly/react-table": "^2.6.1",
     "lodash-es": "4.x",
     "prop-types": "^15.6.1",
     "react": "^16.4.0",
 
@@ -106,13 +106,22 @@ class Body extends React.Component {
   registerContainer = () => {
     setTimeout(() => {
       const element = this.props.container();
-      element && element.addEventListener('scroll', this.onScroll);
-      this._detectElementResize = createDetectElementResize();
-      this._detectElementResize.addResizeListener(element, this.onResize);
-      this.setContainerOffset();
+      if (element) {
+        element && element.addEventListener('scroll', this.onScroll);
+        this._detectElementResize = createDetectElementResize();
+        this._detectElementResize.addResizeListener(element, this.onResize);
+        this.setContainerOffset();
+      }
     }, 0);
   };
 
+  unregisterContainer = () => {
+    const element = this.props.container();
+    if (element && element.__resizeListeners__) {
+      element.removeEventListener('scroll', this.onScroll);
+    }
+  };
+
   setContainerOffset = () => {
     const element = this.props.container && this.props.container();
     if (element) {
@@ -147,7 +156,10 @@ class Body extends React.Component {
 
   componentWillUnmount() {
     if (this.tbodyRef && this.tbodyRef.__resizeListeners__) {
-      this.tbodyRef && this._detectElementResize.removeResizeListener(this.tbodyRef, this.onResize);
+      this._detectElementResize.removeResizeListener(this.tbodyRef, this.onResize);
+    }
+    if (this.props.container) {
+      this.unregisterContainer();
     }
     clearTimeout(this.timeoutId);
   }
 
@@ -244,7 +244,7 @@ class DynamicHeightExample extends React.Component {
   constructor(props) {
     super(props);
     const rows = [];
-    for (let i = 0; i < 100; i++) {
+    for (let i = 0; i < 100000; i++) {
       const cells = [];
       const num = Math.floor(Math.random() * Math.floor(9)) + 1;
       for (let j = 0; j < 5; j++) {
 
@@ -33,7 +33,7 @@ class WindowScrollerExample extends React.Component {
       this.container = element;
     };
     const rows = [];
-    for (let i = 0; i < 100; i++) {
+    for (let i = 0; i < 100000; i++) {
       rows.push({
         id: UUID(),
         cells: [`one-${i}`, `two-${i}`, `three-${i}`, `four-${i}`, `five-${i}`]
 
@@ -8,11 +8,11 @@
  * - Use arrow-rowindex based measured amounts for simplicity
  * - prevent divide by zero exception
  * */
-const calculateAverageHeight = (measuredRows) => {
+const calculateAverageHeight = measuredRows => {
   const measuredAmounts = Object.keys(measuredRows).map(key => measuredRows[key]);
   const amountOfMeasuredRows = measuredAmounts.length;
   // prevent divide by zero exception
-  return Math.max(measuredAmounts.reduce((a, b) => a + b / amountOfMeasuredRows, 0), 1);
+  return Math.max(measuredAmounts.reduce((a, b) => a + b, 0) / amountOfMeasuredRows, 1);
 };
 
 export default calculateAverageHeight;
@@ -5,44 +5,47 @@
  * Forked from version 8.17.0; includes the following modifications:
  * 1) Calculate actual row heights in determining startIndex. This allows dynamic row heights.
  * */
-import calculateAverageHeight from './calculateAverageHeight';
+// import calculateAverageHeight from './calculateAverageHeight';
 
 const calculateRows = ({ measuredRows, height, rowKey, rows, scrollTop = 0 }) => {
-  // used exact measured row heights for determining `startIndex` for smooth scroll
-  // average heights are not accurate when there is lots of variation in row heights
+  // default overscan to 10 for now, could be accepted as a prop in the future
+  const overscan = 20;
+
+  // averageHeight of measuredRows can still be used to closely approximate amount of rows to render
+  const measuredAmounts = Object.keys(measuredRows).map(key => measuredRows[key]);
+  const amountOfMeasuredRows = measuredAmounts.length;
+  const totalMeasuredHeight = measuredAmounts.reduce((a, b) => a + b, 0);
+
+  // if we have no rows, use a small row height so we get a good sample in future loops
+  const averageHeight = amountOfMeasuredRows > 0 ? totalMeasuredHeight / amountOfMeasuredRows : 50;
+
   let startIndex = 0;
   let startHeight = 0;
   let accruedHeight = 0;
+  let i = 0;
 
-  //default overscan to 10 for now, could be accepted as a prop in the future
-  const overscan = 10;
-
-  for (let i = 0; i < Object.keys(measuredRows).length; i++) {
+  while (accruedHeight < scrollTop) {
     // measuredRows use aria-rowindex as identifiers which is 1 based
-    accruedHeight += measuredRows[i + 1];
-
-    if (scrollTop < accruedHeight) {
+    if (measuredRows.hasOwnProperty(i + 1)) {
+      accruedHeight += measuredRows[i + 1];
+    } else {
+      accruedHeight += averageHeight;
+    }
+    if (scrollTop <= accruedHeight) {
       startIndex = i;
       break;
-    } 
-    else if(i + overscan > Object.keys(measuredRows).length){
-      // stop accruing after we reach i + overscan
+    } else if (i + overscan > rows.length) {
+      // stop accruing after we reach i + overscan  (the end)
       startHeight = accruedHeight;
       startIndex = i;
       break;
     }
-    else {
-      // accrue and continue
-      startHeight = accruedHeight;
-    }
+    // accrue and continue
+    startHeight = accruedHeight;
+    i += 1;
   }
 
-  // averageHeight of measuredRows can still be used to closely approximate amount of rows to render
-  // if this causes issues w/ row visibility, exact heights can still be used
-  const averageHeight = calculateAverageHeight(measuredRows);
   const amountOfRowsToRender = Math.ceil(height / averageHeight) + overscan;
-
-  // const zeroedIndex = startIndex;
   const rowsToRender = rows.slice(startIndex, Math.max(startIndex + amountOfRowsToRender, 0));
 
   if (process.env.NODE_ENV !== 'production' && typeof window !== 'undefined' && window.LOG_VIRTUALIZED) {
@@ -90,7 +93,7 @@ const calculateRows = ({ measuredRows, height, rowKey, rows, scrollTop = 0 }) =>
 
   return {
     amountOfRowsToRender,
-    startIndex: startIndex,
+    startIndex,
     showExtraRow: !(startIndex % 2),
     startHeight,
     endHeight