Issue 198 (re)performance fix

CHANGELOG.md

@@ -4,8 +4,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [3.1.0-rc20] - 2018-11-01
 ### Fixed
-- Fix performance degradation on load [#200](https://github.com/plotly/dash-table/pull/200) [#198](https://github.com/plotly/dash-table/issues/198)
-
+- Fix performance degradation on load [#208](https://github.com/plotly/dash-table/pull/208) [#200](https://github.com/plotly/dash-table/pull/200) [#198](https://github.com/plotly/dash-table/issues/198)
 
 ## [3.1.0-rc19] - 2018-11-01
 ### Changed

demo/App.js

@@ -6,8 +6,9 @@ import {mockData} from './data';
 import { memoizeOne } from 'core/memoizer';
 import Logger from 'core/Logger';
 
-const clone = o => JSON.parse(JSON.stringify(o));
+import './style.less';
 
+const clone = o => JSON.parse(JSON.stringify(o));
 
 class App extends Component {
     constructor() {

demo/style.less

@@ -0,0 +1,3 @@
+html {
+    font-size: 13px;
+}

src/dash-table/components/Table/Table.less

@@ -190,6 +190,13 @@
     flex-direction: row;
     position: relative;
 
+    // This overrides Chrome's default `font-size: medium;` which is causing performance issues
+    // with AutoInputResize sub-component in react-select
+    // https://github.com/JedWatson/react-input-autosize/blob/05b0f86a7f8b16de99c2b31296ff0d3307f15957/src/AutosizeInput.js#L58
+    table {
+        font-size: inherit;
+    }
+
     .dash-spreadsheet-inner {
         box-sizing: border-box;
         display: flex;
@@ -573,4 +580,4 @@
         color: var(--accent);
         opacity: 1;
     }
-}
+}