From 3d3dad6ca06c929cedb48c6f84221fcec7e48083 Mon Sep 17 00:00:00 2001
From: natmegs <nataliemegans@gmail.com>
Date: Mon, 8 Apr 2019 07:15:00 -0700
Subject: [PATCH] fix(Table): don't use virtual list for small tables

Only use a virtualized list to display tables with large (>1000) amount of table data.

Closes DCOS-51574
---
 src/Table/Table.js                | 31 +++++++++++++++++++++++++++----
 src/Table/__tests__/Table-test.js |  8 ++++----
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/Table/Table.js b/src/Table/Table.js
index e2f97b69d..eeb915d0f 100644
--- 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
index d65f504e3..00fd6ce06 100644
--- 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");
     });
   });
 });