Async table component (#632)

dash_table_base/__init__.py

@@ -60,6 +60,22 @@
         ).format(__version__),
         'namespace': package_name,
         'dynamic': True
+    },
+    {
+        'relative_package_path': 'async~table.js',
+        'external_url': (
+            'https://unpkg.com/dash-table@{}/dash_table/async~table.js'
+        ).format(__version__),
+        'namespace': package_name,
+        'async': True
+    },
+    {
+        'relative_package_path': 'async~table.js.map',
+        'external_url': (
+            'https://unpkg.com/dash-table@{}/dash_table/async~table.js.map'
+        ).format(__version__),
+        'namespace': package_name,
+        'dynamic': True
     }
 ]
 

package.json

@@ -71,7 +71,8 @@
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
     "@fortawesome/react-fontawesome": "^0.1.4",
     "@percy/storybook": "^3.2.0",
-    "@plotly/webpack-dash-dynamic-import": "^1.0.0",
+    "@plotly/dash-component-plugins": "^1.0.1",
+    "@plotly/webpack-dash-dynamic-import": "^1.1.0",
     "@storybook/cli": "^5.1.11",
     "@storybook/react": "^5.1.11",
     "@types/d3-format": "^1.3.1",
@@ -124,4 +125,4 @@
     "node": ">=8.11.0",
     "npm": ">=6.1.0"
   }
-}
+}

src/dash-table/LazyLoader.ts

@@ -2,4 +2,8 @@ export default class LazyLoader {
     public static get xlsx() {
         return import(/* webpackChunkName: "export", webpackMode: "$${{mode}}" */ 'xlsx');
     }
+
+    public static table() {
+        return import(/* webpackChunkName: "table", webpackMode: "$${{mode}}" */ 'dash-table/dash/fragments/DataTable');
+    }
 }

src/dash-table/dash/DataTable.js

@@ -1,14 +1,14 @@
 import * as R from 'ramda';
-import React, { Component } from 'react';
+import React, { Component, lazy, Suspense } from 'react';
 import PropTypes from 'prop-types';
-
-import RealTable from 'dash-table/components/Table';
+import { asyncDecorator } from '@plotly/dash-component-plugins';
 
 import Logger from 'core/Logger';
 
 import genRandomId from 'dash-table/utils/generate';
 import isValidProps from './validate';
 import Sanitizer from './Sanitizer';
+import LazyLoader from 'dash-table/LazyLoader';
 
 /**
  * Dash DataTable is an interactive table component designed for
@@ -20,25 +20,17 @@ import Sanitizer from './Sanitizer';
  * is completely customizable through its properties.
  */
 export default class DataTable extends Component {
-    constructor(props) {
-        super(props);
-        let id;
-        this.getId = () => (id = id || genRandomId('table-'));
-        this.sanitizer = new Sanitizer();
-    }
-
     render() {
-        if (!isValidProps(this.props)) {
-            return (<div>Invalid props combination</div>);
-        }
-
-        const sanitizedProps = this.sanitizer.sanitize(this.props);
-        return this.props.id ?
-            (<RealTable {...sanitizedProps} />) :
-            (<RealTable {...sanitizedProps} id={this.getId()} />);
+        return (
+            <Suspense fallback={null}>
+                <RealDataTable {...this.props} />
+            </Suspense>
+        );
     }
 }
 
+const RealDataTable = asyncDecorator(DataTable, LazyLoader.table);
+
 export const defaultProps = {
     page_action: 'native',
     page_current: 0,

src/dash-table/dash/fragments/DataTable.js

@@ -0,0 +1,35 @@
+import * as R from 'ramda';
+import React, { Component } from 'react';
+
+import RealTable from 'dash-table/components/Table';
+
+import Logger from 'core/Logger';
+
+import genRandomId from 'dash-table/utils/generate';
+import isValidProps from '../validate';
+import Sanitizer from '../Sanitizer';
+
+import { propTypes, defaultProps } from '../DataTable';
+
+export default class DataTable extends Component {
+    constructor(props) {
+        super(props);
+        let id;
+        this.getId = () => (id = id || genRandomId('table-'));
+        this.sanitizer = new Sanitizer();
+    }
+
+    render() {
+        if (!isValidProps(this.props)) {
+            return (<div>Invalid props combination</div>);
+        }
+
+        const sanitizedProps = this.sanitizer.sanitize(this.props);
+        return this.props.id ?
+            (<RealTable {...sanitizedProps} />) :
+            (<RealTable {...sanitizedProps} id={this.getId()} />);
+    }
+}
+
+DataTable.defaultProps = defaultProps;
+DataTable.propTypes = propTypes;