Issue 384 - Handling of None data and columns props

CHANGELOG.md

@@ -2,6 +2,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+### Fixed
+- [#731](https://github.com/plotly/dash-table/pull/731) Fix a bug where `data=None` and `columns=None` caused the table to throw an error
+
 ## [4.6.2] - 2020-04-01
 ### Changed
 - [#713](https://github.com/plotly/dash-table/pull/713) Update from React 16.8.6 to 16.13.0

src/dash-table/components/Table/props.ts

@@ -341,12 +341,10 @@ export interface IProps {
 interface IDefaultProps {
     active_cell: ICellCoordinates;
     column_selectable: Selection;
-    columns: Columns;
     dropdown: StaticDropdowns;
     dropdown_conditional: ConditionalDropdowns;
     dropdown_data: DataDropdowns;
     css: IStylesheetRule[];
-    data: Data;
     editable: boolean;
     export_columns: ExportColumns;
     export_format: ExportFormat;
@@ -410,6 +408,8 @@ export type PropsWithDefaults = IProps & IDefaultProps;
 
 export type SanitizedProps = Omit<Omit<
     Merge<PropsWithDefaults, {
+        columns: Columns;
+        data: Data;
         fixed_columns: number;
         fixed_rows: number;
         loading_state: boolean;

src/dash-table/dash/DataTable.js

@@ -77,8 +77,6 @@ export const defaultProps = {
     tooltip_duration: 2000,
 
     column_selectable: false,
-    columns: [],
-    data: [],
     editable: false,
     export_columns: 'visible',
     export_format: 'none',

src/dash-table/dash/Sanitizer.ts

@@ -78,7 +78,10 @@ const getVisibleColumns = (
 export default class Sanitizer {
     sanitize(props: PropsWithDefaults): SanitizedProps {
         const locale_format = this.applyDefaultToLocale(props.locale_format);
-        const columns = this.applyDefaultsToColumns(locale_format, props.sort_as_null, props.columns, props.editable);
+        const columns = props.columns ?
+            this.applyDefaultsToColumns(locale_format, props.sort_as_null, props.columns, props.editable) :
+            [];
+        const data = props.data ?? [];
         const visibleColumns = this.getVisibleColumns(columns, props.hidden_columns);
 
         let headerFormat = props.export_headers;
@@ -90,9 +93,10 @@ export default class Sanitizer {
 
         return R.merge(props, {
             columns,
+            data,
             export_headers: headerFormat,
             fixed_columns: getFixedColumns(props.fixed_columns, props.row_deletable, props.row_selectable),
-            fixed_rows: getFixedRows(props.fixed_rows, props.columns, props.filter_action),
+            fixed_rows: getFixedRows(props.fixed_rows, columns, props.filter_action),
             loading_state: dataLoading(props.loading_state),
             locale_format,
             visibleColumns

src/dash-table/dash/validate.ts

@@ -16,7 +16,7 @@ function validColumns(props: any) {
         columns
     } = props;
 
-    return !R.any((column: any) =>
+    return R.isNil(columns) || !R.any((column: any) =>
         column.format && (
             (
                 column.format.symbol &&

tests/selenium/test_empty.py

@@ -0,0 +1,45 @@
+import dash
+from dash.dependencies import Input, Output
+from dash.exceptions import PreventUpdate
+
+from dash_table import DataTable
+from dash_html_components import Button, Div
+
+
+def get_app():
+    app = dash.Dash(__name__)
+
+    columns = [{"name": i, "id": i} for i in ["a", "b"]]
+    data = [dict(a=1, b=2), dict(a=11, b=22)]
+
+    app.layout = Div(
+        [
+            Button(id="clear-table", children=["Clear table"]),
+            DataTable(id="table", columns=columns, data=data),
+        ]
+    )
+
+    @app.callback(
+        [Output("table", "data"), Output("table", "columns")],
+        [Input("clear-table", "n_clicks")],
+    )
+    def clear_table(n_clicks):
+        if n_clicks is None:
+            raise PreventUpdate
+
+        nonlocal columns, data
+
+        return (data, columns) if n_clicks % 2 == 0 else (None, None)
+
+    return app
+
+
+def test_empt001_clear_(test):
+    test.start_server(get_app())
+
+    target = test.table("table")
+
+    assert target.is_ready()
+    test.driver.find_element_by_css_selector("#clear-table").click()
+    assert target.is_ready()
+    assert len(test.driver.find_elements_by_css_selector("tr")) == 0