Merge pull request #526 from mesosphere/nat/table

fix(Table): don't use virtual list for small tables
mesosphere · Apr 10, 2019 · 69b8cae · 69b8cae
2 parents b9df717 + 3d3dad6
commit 69b8cae
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 8 deletions.
diff --git a/src/Table/Table.js b/src/Table/Table.js
@@ -271,7 +271,7 @@ class Table extends React.Component {
   }
 
   getTBody(columns, data, sortBy, itemHeight) {
-    const buildRowOptions = this.props.buildRowOptions;
+    const { buildRowOptions, virtualizeDataThreshold } = this.props;
     let childToMeasure;
 
     if (itemHeight === 0 && data.length) {
@@ -290,13 +290,32 @@ class Table extends React.Component {
       return <tbody>{this.getEmptyRowCell(columns)}</tbody>;
     }
 
+    const sortedData = sortData(columns, data, sortBy);
+
+    if (data.length < virtualizeDataThreshold) {
+      // Do not use virtual list for "small" data sets
+      return (
+        <tbody>
+          {sortedData.map((item, index) => {
+            return this.getRowCells(
+              columns,
+              sortBy,
+              buildRowOptions,
+              item,
+              index
+            );
+          })}
+        </tbody>
+      );
+    }
+
     return (
       <VirtualList
         className="table-virtual-list"
         container={this.container}
         itemBuffer={70}
         itemHeight={itemHeight}
-        items={sortData(columns, data, sortBy)}
+        items={sortedData}
         renderBufferItem={this.getBufferItem.bind(this, columns)}
         renderItem={this.getRowCells.bind(
           this,
@@ -336,7 +355,8 @@ Table.defaultProps = {
     return {};
   },
   sortBy: {},
-  emptyMessage: "No data"
+  emptyMessage: "No data",
+  virtualizeDataThreshold: 1000
 };
 
 Table.propTypes = {
@@ -405,7 +425,10 @@ Table.propTypes = {
   sortBy: PropTypes.shape({
     order: PropTypes.oneOf(["asc", "desc"]),
     prop: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-  })
+  }),
+
+  // Optional cutoff at which to begin rendering a virtualized list
+  virtualizeDataThreshold: PropTypes.number
 };
 
 module.exports = Table;
diff --git a/src/Table/__tests__/Table-test.js b/src/Table/__tests__/Table-test.js
@@ -101,8 +101,8 @@ describe("Table", function() {
         "tr"
       );
 
-      expect(tableRows[2].children[0].textContent).toEqual("Zach");
-      expect(tableRows[6].children[0].textContent).toEqual("Francis");
+      expect(tableRows[1].children[0].textContent).toEqual("Zach");
+      expect(tableRows[5].children[0].textContent).toEqual("Francis");
     });
 
     it("should sort the data ascending on initial mount", function() {
@@ -122,8 +122,8 @@ describe("Table", function() {
         "tr"
       );
 
-      expect(tableRows[2].children[0].textContent).toEqual("Francis");
-      expect(tableRows[6].children[0].textContent).toEqual("Zach");
+      expect(tableRows[1].children[0].textContent).toEqual("Francis");
+      expect(tableRows[5].children[0].textContent).toEqual("Zach");
     });
   });
 });