Table loading state - Fix tests

package.json

@@ -26,13 +26,15 @@
  "private::host_dash8082": "python tests/cypress/dash/v_copy_paste.py",
  "private::host_dash8083": "python tests/cypress/dash/v_fe_page.py",
  "private::host_dash8084": "python tests/cypress/dash/v_data_loading.py",
+ "private::host_dash8085": "python tests/cypress/dash/v_default.py",
  "private::host_js": "http-server ./dash_table -c-1 --silent",
  "private::lint:ts": "tslint --project tsconfig.json --config tslint.json",
  "private::lint:py": "flake8 --exclude=DataTable.py,__init__.py,_imports_.py dash_table",
  "private::wait_dash8081": "wait-on http://localhost:8081",
  "private::wait_dash8082": "wait-on http://localhost:8082",
  "private::wait_dash8083": "wait-on http://localhost:8083",
  "private::wait_dash8084": "wait-on http://localhost:8084",
+ "private::wait_dash8085": "wait-on http://localhost:8085",
  "private::wait_js": "wait-on http://localhost:8080",
  "private::opentests": "cypress open",
  "private::test.python": "python -m unittest tests/unit/format_test.py",

src/dash-table/components/ControlledTable/index.tsx

@@ -721,6 +721,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
  filter_action,
  fixed_columns,
  fixed_rows,
+ loading_state,
  scrollbarWidth,
  style_as_list_view,
  style_table,
@@ -736,6 +737,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
  visibleColumns
  } = this.props;
 
+ const isLoading = dataLoading(loading_state);
+
  const fragmentClasses = [
  [
  fixed_rows && fixed_columns ? 'dash-fixed-row dash-fixed-column' : '',
@@ -766,7 +769,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
  ...(visibleColumns.length ? [] : ['dash-no-columns']),
  ...(virtualized.data.length ? [] : ['dash-no-data']),
  ...(filter_action !== TableAction.None ? [] : ['dash-no-filter']),
- ...(fill_width ? ['dash-fill-width'] : [])
+ ...(fill_width ? ['dash-fill-width'] : []),
+ ...(isLoading ? ['dash-loading'] : [])
  ];
 
  const containerClasses = ['dash-spreadsheet-container', ...classes];

tests/cypress/dash/v_copy_paste.py

@@ -1,6 +1,7 @@
 # pylint: disable=global-statement
 import dash
 from dash.dependencies import Input, Output, State
+from dash.exceptions import PreventUpdate
 import dash_html_components as html
 import os
 import pandas as pd
@@ -85,15 +86,20 @@
 # pylint: disable=unused-argument
 def updateData(timestamp, current, previous):
  # pylint: enable=unused-argument
- if current is None or previous is None:
-return current
+ if timestamp is None or current is None or previous is None:
+raise PreventUpdate
 
+ modified = False
  if len(current) == len(previous):
  for (i, datum) in enumerate(current):
  previous_datum = previous[i]
  if datum[0] != previous_datum[0]:
+ modified = True
  datum[1] = "MODIFIED"
 
+ if not modified:
+ raise PreventUpdate
+
  return current
 
 if __name__ == "__main__":

tests/cypress/dash/v_data_loading.py

@@ -1,6 +1,7 @@
 # pylint: disable=global-statement
 import dash
 from dash.dependencies import Input, Output, State
+from dash.exceptions import PreventUpdate
 import dash_html_components as html
 import dash_core_components as dcc
 import os
@@ -27,7 +28,8 @@
 
 app.layout = html.Div(
  [
- dcc.Input(id='change-property'),
+ dcc.Input(id='change-data-property'),
+ dcc.Input(id='change-other-property'),
 
  dash_table.DataTable(
  id="table",
@@ -59,24 +61,27 @@
 
 @app.callback(
  Output("table", "style_cell_conditional"),
- [Input("change-property", "value")]
+ [Input("change-other-property", "value")]
 )
 def dontTriggerWait(to_change):
- if to_change == 'dont_change_data':
- sleep(5)
+ if to_change != 'dont_change_data':
+ raise PreventUpdate
+
+ sleep(5)
  return []
 
 
 @app.callback(
  Output("table", "data"),
- [Input("change-property", "value")],
- [State("table", "data")]
+ [Input("change-data-property", "value")]
 )
 # pylint: disable=unused-argument
-def triggerWait(to_change, current):
- if to_change == 'change_data':
- sleep(5)
- return current
+def triggerWait(to_change):
+ if to_change != 'change_data':
+ raise PreventUpdate
+
+ sleep(5)
+ return df[0:250]
 
 
 if __name__ == "__main__":

tests/cypress/dash/v_default.py

@@ -0,0 +1,82 @@
+# pylint: disable=global-statement
+import dash
+from dash.dependencies import Input, Output, State
+from dash.exceptions import PreventUpdate
+import dash_html_components as html
+import os
+import pandas as pd
+import sys
+
+sys.path.append(
+ os.path.abspath(
+ os.path.join(os.path.dirname(sys.argv[0]), os.pardir, os.pardir, os.pardir)
+ )
+)
+module_names = ["dash_table"]
+modules = [__import__(x) for x in module_names]
+dash_table = modules[0]
+
+url = "https://github.com/plotly/datasets/raw/master/" "26k-consumer-complaints.csv"
+df = pd.read_csv(url)
+df = df.values
+
+app = dash.Dash()
+app.css.config.serve_locally = True
+app.scripts.config.serve_locally = True
+
+app.layout = html.Div(
+ [
+ html.Div(id="container", children="Hello World"),
+ dash_table.DataTable(
+ id="table",
+ data=df[0:250],
+ columns=[
+ {"id": 0, "name": "Complaint ID", "hideable": True},
+ {"id": 1, "name": "Product"},
+ {"id": 2, "name": "Sub-product"},
+ {"id": 3, "name": "Issue"},
+ {"id": 4, "name": "Sub-issue"},
+ {"id": 5, "name": "State"},
+ {"id": 6, "name": "ZIP"},
+ {"id": 7, "name": "code"},
+ {"id": 8, "name": "Date received"},
+ {"id": 9, "name": "Date sent to company"},
+ {"id": 10, "name": "Company"},
+ {"id": 11, "name": "Company response"},
+ {"id": 12, "name": "Timely response?"},
+ {"id": 13, "name": "Consumer disputed?"},
+ ],
+ editable=True,
+ sort_action='native',
+ include_headers_on_copy_paste=True,
+
+ ),
+ dash_table.DataTable(
+ id="table2",
+ data=df[0:10],
+ columns=[
+ {"id": 0, "name": "Complaint ID", "hideable": True},
+ {"id": 1, "name": "Product"},
+ {"id": 2, "name": "Sub-product"},
+ {"id": 3, "name": "Issue"},
+ {"id": 4, "name": "Sub-issue"},
+ {"id": 5, "name": "State"},
+ {"id": 6, "name": "ZIP"},
+ {"id": 7, "name": "code"},
+ {"id": 8, "name": "Date received"},
+ {"id": 9, "name": "Date sent to company"},
+ {"id": 10, "name": "Company"},
+ {"id": 11, "name": "Company response"},
+ {"id": 12, "name": "Timely response?"},
+ {"id": 13, "name": "Consumer disputed?"},
+ ],
+ editable=True,
+ sort_action='native',
+ include_headers_on_copy_paste=True,
+ ),
+ ]
+)
+
+
+if __name__ == "__main__":
+ app.run_server(port=8085, debug=False)

tests/cypress/src/DashTable.ts

@@ -1,26 +1,47 @@
+const READY = `.dash-spreadsheet:not(.dash-loading)`;
+const LOADING = `.dash-spreadsheet.dash-loading`;
+const ANY = `.dash-spreadsheet`;
+
+export enum State {
+ Any,
+ Loading,
+ Ready
+}
+
+const getSelector = (state: State) => {
+ switch (state) {
+ case State.Ready:
+ return READY;
+ case State.Loading:
+ return LOADING;
+ default:
+ return ANY;
+ }
+};
+
 export default class DashTable {
- static getCell(row: number, column: number) {
- return cy.get(`#table tbody tr td.column-${column}`).eq(row);
+ static getCell(row: number, column: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr td.column-${column}`).eq(row);
  }
 
- static getCellById(row: number, column: string) {
- return cy.get(`#table tbody tr td[data-dash-column="${column}"]`).eq(row);
+ static getCellById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr td[data-dash-column="${column}"]`).eq(row);
  }
 
- static getFilter(column: number) {
- return cy.get(`#table tbody tr th.dash-filter.column-${column}`);
+ static getFilter(column: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-filter.column-${column}`);
  }
 
- static getFilterById(column: string) {
- return cy.get(`#table tbody tr th.dash-filter[data-dash-column="${column}"]`);
+ static getFilterById(column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-filter[data-dash-column="${column}"]`);
  }
 
- static getHeader(row: number, column: number) {
- return cy.get(`#table tbody tr th.dash-header.column-${column}`).eq(row);
+ static getHeader(row: number, column: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header.column-${column}`).eq(row);
  }
 
- static getHeaderById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"]`).eq(row);
+ static getHeaderById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"]`).eq(row);
  }
 
  static focusCell(row: number, column: number) {
@@ -33,52 +54,52 @@ export default class DashTable {
  return this.getCellById(row, column).click().scrollIntoView();
  }
 
- static clearColumnById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"] .column-header--clear`).eq(row).click();
+ static clearColumnById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"] .column-header--clear`).eq(row).click();
  }
 
- static deleteColumnById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"] .column-header--delete`).eq(row).click();
+ static deleteColumnById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"] .column-header--delete`).eq(row).click();
  }
 
- static hideColumnById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"] .column-header--hide`).eq(row).click();
+ static hideColumnById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"] .column-header--hide`).eq(row).click();
  }
 
- static getSelectColumnById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"] .column-header--select input`).eq(row);
+ static getSelectColumnById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"] .column-header--select input`).eq(row);
  }
 
  static selectColumnById(row: number, column: string) {
  return DashTable.getSelectColumnById(row, column).click();
  }
 
- static getDelete(row: number) {
- return cy.get(`#table tbody tr td.dash-delete-cell`).eq(row);
+ static getDelete(row: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr td.dash-delete-cell`).eq(row);
  }
 
- static getSelect(row: number) {
- return cy.get(`#table tbody tr td.dash-select-cell`).eq(row);
+ static getSelect(row: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr td.dash-select-cell`).eq(row);
  }
 
- static getActiveCell() {
- return cy.get(`#table tbody td.focused`);
+ static getActiveCell(editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody td.focused`);
  }
 
- static getSelectedCells() {
- return cy.get(`#table tbody td.cell--selected`);
+ static getSelectedCells(editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody td.cell--selected`);
  }
 
  static scrollToTop() {
  cy.get(`.cell.cell-1-1.dash-fixed-content`).invoke(`outerHeight`).then(height => {
  cy.scrollTo(0, -height);
- })
+ });
  }
 
  static scrollToBottom() {
  cy.get(`.cell.cell-1-1.dash-fixed-content`).invoke(`outerHeight`).then(height => {
  cy.scrollTo(0, height);
- })
+ });
  }
 
  static getCellInLastRowOfColumn(column: number) {

package.json

@@ -26,13 +26,15 @@
  "private::host_dash8082": "python tests/cypress/dash/v_copy_paste.py",
  "private::host_dash8083": "python tests/cypress/dash/v_fe_page.py",
  "private::host_dash8084": "python tests/cypress/dash/v_data_loading.py",
+ "private::host_dash8085": "python tests/cypress/dash/v_default.py",
  "private::host_js": "http-server ./dash_table -c-1 --silent",
  "private::lint:ts": "tslint --project tsconfig.json --config tslint.json",
  "private::lint:py": "flake8 --exclude=DataTable.py,__init__.py,_imports_.py dash_table",
  "private::wait_dash8081": "wait-on http://localhost:8081",
  "private::wait_dash8082": "wait-on http://localhost:8082",
  "private::wait_dash8083": "wait-on http://localhost:8083",
  "private::wait_dash8084": "wait-on http://localhost:8084",
+ "private::wait_dash8085": "wait-on http://localhost:8085",
  "private::wait_js": "wait-on http://localhost:8080",
  "private::opentests": "cypress open",
  "private::test.python": "python -m unittest tests/unit/format_test.py",

src/dash-table/components/ControlledTable/index.tsx

@@ -721,6 +721,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
  filter_action,
  fixed_columns,
  fixed_rows,
+ loading_state,
  scrollbarWidth,
  style_as_list_view,
  style_table,
@@ -736,6 +737,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
  visibleColumns
  } = this.props;
 
+ const isLoading = dataLoading(loading_state);
+
  const fragmentClasses = [
  [
  fixed_rows && fixed_columns ? 'dash-fixed-row dash-fixed-column' : '',
@@ -766,7 +769,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
  ...(visibleColumns.length ? [] : ['dash-no-columns']),
  ...(virtualized.data.length ? [] : ['dash-no-data']),
  ...(filter_action !== TableAction.None ? [] : ['dash-no-filter']),
- ...(fill_width ? ['dash-fill-width'] : [])
+ ...(fill_width ? ['dash-fill-width'] : []),
+ ...(isLoading ? ['dash-loading'] : [])
  ];
 
  const containerClasses = ['dash-spreadsheet-container', ...classes];

tests/cypress/dash/v_copy_paste.py

@@ -1,6 +1,7 @@
 # pylint: disable=global-statement
 import dash
 from dash.dependencies import Input, Output, State
+from dash.exceptions import PreventUpdate
 import dash_html_components as html
 import os
 import pandas as pd
@@ -85,15 +86,20 @@
 # pylint: disable=unused-argument
 def updateData(timestamp, current, previous):
  # pylint: enable=unused-argument
- if current is None or previous is None:
-return current
+ if timestamp is None or current is None or previous is None:
+raise PreventUpdate
 
+ modified = False
  if len(current) == len(previous):
  for (i, datum) in enumerate(current):
  previous_datum = previous[i]
  if datum[0] != previous_datum[0]:
+ modified = True
  datum[1] = "MODIFIED"
 
+ if not modified:
+ raise PreventUpdate
+
  return current
 
 if __name__ == "__main__":

tests/cypress/dash/v_data_loading.py

@@ -1,6 +1,7 @@
 # pylint: disable=global-statement
 import dash
 from dash.dependencies import Input, Output, State
+from dash.exceptions import PreventUpdate
 import dash_html_components as html
 import dash_core_components as dcc
 import os
@@ -27,7 +28,8 @@
 
 app.layout = html.Div(
  [
- dcc.Input(id='change-property'),
+ dcc.Input(id='change-data-property'),
+ dcc.Input(id='change-other-property'),
 
  dash_table.DataTable(
  id="table",
@@ -59,24 +61,27 @@
 
 @app.callback(
  Output("table", "style_cell_conditional"),
- [Input("change-property", "value")]
+ [Input("change-other-property", "value")]
 )
 def dontTriggerWait(to_change):
- if to_change == 'dont_change_data':
- sleep(5)
+ if to_change != 'dont_change_data':
+ raise PreventUpdate
+
+ sleep(5)
  return []
 
 
 @app.callback(
  Output("table", "data"),
- [Input("change-property", "value")],
- [State("table", "data")]
+ [Input("change-data-property", "value")]
 )
 # pylint: disable=unused-argument
-def triggerWait(to_change, current):
- if to_change == 'change_data':
- sleep(5)
- return current
+def triggerWait(to_change):
+ if to_change != 'change_data':
+ raise PreventUpdate
+
+ sleep(5)
+ return df[0:250]
 
 
 if __name__ == "__main__":

tests/cypress/dash/v_default.py

@@ -0,0 +1,82 @@
+# pylint: disable=global-statement
+import dash
+from dash.dependencies import Input, Output, State
+from dash.exceptions import PreventUpdate
+import dash_html_components as html
+import os
+import pandas as pd
+import sys
+
+sys.path.append(
+ os.path.abspath(
+ os.path.join(os.path.dirname(sys.argv[0]), os.pardir, os.pardir, os.pardir)
+ )
+)
+module_names = ["dash_table"]
+modules = [__import__(x) for x in module_names]
+dash_table = modules[0]
+
+url = "https://github.com/plotly/datasets/raw/master/" "26k-consumer-complaints.csv"
+df = pd.read_csv(url)
+df = df.values
+
+app = dash.Dash()
+app.css.config.serve_locally = True
+app.scripts.config.serve_locally = True
+
+app.layout = html.Div(
+ [
+ html.Div(id="container", children="Hello World"),
+ dash_table.DataTable(
+ id="table",
+ data=df[0:250],
+ columns=[
+ {"id": 0, "name": "Complaint ID", "hideable": True},
+ {"id": 1, "name": "Product"},
+ {"id": 2, "name": "Sub-product"},
+ {"id": 3, "name": "Issue"},
+ {"id": 4, "name": "Sub-issue"},
+ {"id": 5, "name": "State"},
+ {"id": 6, "name": "ZIP"},
+ {"id": 7, "name": "code"},
+ {"id": 8, "name": "Date received"},
+ {"id": 9, "name": "Date sent to company"},
+ {"id": 10, "name": "Company"},
+ {"id": 11, "name": "Company response"},
+ {"id": 12, "name": "Timely response?"},
+ {"id": 13, "name": "Consumer disputed?"},
+ ],
+ editable=True,
+ sort_action='native',
+ include_headers_on_copy_paste=True,
+
+ ),
+ dash_table.DataTable(
+ id="table2",
+ data=df[0:10],
+ columns=[
+ {"id": 0, "name": "Complaint ID", "hideable": True},
+ {"id": 1, "name": "Product"},
+ {"id": 2, "name": "Sub-product"},
+ {"id": 3, "name": "Issue"},
+ {"id": 4, "name": "Sub-issue"},
+ {"id": 5, "name": "State"},
+ {"id": 6, "name": "ZIP"},
+ {"id": 7, "name": "code"},
+ {"id": 8, "name": "Date received"},
+ {"id": 9, "name": "Date sent to company"},
+ {"id": 10, "name": "Company"},
+ {"id": 11, "name": "Company response"},
+ {"id": 12, "name": "Timely response?"},
+ {"id": 13, "name": "Consumer disputed?"},
+ ],
+ editable=True,
+ sort_action='native',
+ include_headers_on_copy_paste=True,
+ ),
+ ]
+)
+
+
+if __name__ == "__main__":
+ app.run_server(port=8085, debug=False)

tests/cypress/src/DashTable.ts

@@ -1,26 +1,47 @@
+const READY = `.dash-spreadsheet:not(.dash-loading)`;
+const LOADING = `.dash-spreadsheet.dash-loading`;
+const ANY = `.dash-spreadsheet`;
+
+export enum State {
+ Any,
+ Loading,
+ Ready
+}
+
+const getSelector = (state: State) => {
+ switch (state) {
+ case State.Ready:
+ return READY;
+ case State.Loading:
+ return LOADING;
+ default:
+ return ANY;
+ }
+};
+
 export default class DashTable {
- static getCell(row: number, column: number) {
- return cy.get(`#table tbody tr td.column-${column}`).eq(row);
+ static getCell(row: number, column: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr td.column-${column}`).eq(row);
  }
 
- static getCellById(row: number, column: string) {
- return cy.get(`#table tbody tr td[data-dash-column="${column}"]`).eq(row);
+ static getCellById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr td[data-dash-column="${column}"]`).eq(row);
  }
 
- static getFilter(column: number) {
- return cy.get(`#table tbody tr th.dash-filter.column-${column}`);
+ static getFilter(column: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-filter.column-${column}`);
  }
 
- static getFilterById(column: string) {
- return cy.get(`#table tbody tr th.dash-filter[data-dash-column="${column}"]`);
+ static getFilterById(column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-filter[data-dash-column="${column}"]`);
  }
 
- static getHeader(row: number, column: number) {
- return cy.get(`#table tbody tr th.dash-header.column-${column}`).eq(row);
+ static getHeader(row: number, column: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header.column-${column}`).eq(row);
  }
 
- static getHeaderById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"]`).eq(row);
+ static getHeaderById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"]`).eq(row);
  }
 
  static focusCell(row: number, column: number) {
@@ -33,52 +54,52 @@ export default class DashTable {
  return this.getCellById(row, column).click().scrollIntoView();
  }
 
- static clearColumnById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"] .column-header--clear`).eq(row).click();
+ static clearColumnById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"] .column-header--clear`).eq(row).click();
  }
 
- static deleteColumnById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"] .column-header--delete`).eq(row).click();
+ static deleteColumnById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"] .column-header--delete`).eq(row).click();
  }
 
- static hideColumnById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"] .column-header--hide`).eq(row).click();
+ static hideColumnById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"] .column-header--hide`).eq(row).click();
  }
 
- static getSelectColumnById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"] .column-header--select input`).eq(row);
+ static getSelectColumnById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"] .column-header--select input`).eq(row);
  }
 
  static selectColumnById(row: number, column: string) {
  return DashTable.getSelectColumnById(row, column).click();
  }
 
- static getDelete(row: number) {
- return cy.get(`#table tbody tr td.dash-delete-cell`).eq(row);
+ static getDelete(row: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr td.dash-delete-cell`).eq(row);
  }
 
- static getSelect(row: number) {
- return cy.get(`#table tbody tr td.dash-select-cell`).eq(row);
+ static getSelect(row: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr td.dash-select-cell`).eq(row);
  }
 
- static getActiveCell() {
- return cy.get(`#table tbody td.focused`);
+ static getActiveCell(editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody td.focused`);
  }
 
- static getSelectedCells() {
- return cy.get(`#table tbody td.cell--selected`);
+ static getSelectedCells(editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody td.cell--selected`);
  }
 
  static scrollToTop() {
  cy.get(`.cell.cell-1-1.dash-fixed-content`).invoke(`outerHeight`).then(height => {
  cy.scrollTo(0, -height);
- })
+ });
  }
 
  static scrollToBottom() {
  cy.get(`.cell.cell-1-1.dash-fixed-content`).invoke(`outerHeight`).then(height => {
  cy.scrollTo(0, height);
- })
+ });
  }
 
  static getCellInLastRowOfColumn(column: number) {

package.json

@@ -26,13 +26,15 @@
  "private::host_dash8082": "python tests/cypress/dash/v_copy_paste.py",
  "private::host_dash8083": "python tests/cypress/dash/v_fe_page.py",
  "private::host_dash8084": "python tests/cypress/dash/v_data_loading.py",
+ "private::host_dash8085": "python tests/cypress/dash/v_default.py",
  "private::host_js": "http-server ./dash_table -c-1 --silent",
  "private::lint:ts": "tslint --project tsconfig.json --config tslint.json",
  "private::lint:py": "flake8 --exclude=DataTable.py,__init__.py,_imports_.py dash_table",
  "private::wait_dash8081": "wait-on http://localhost:8081",
  "private::wait_dash8082": "wait-on http://localhost:8082",
  "private::wait_dash8083": "wait-on http://localhost:8083",
  "private::wait_dash8084": "wait-on http://localhost:8084",
+ "private::wait_dash8085": "wait-on http://localhost:8085",
  "private::wait_js": "wait-on http://localhost:8080",
  "private::opentests": "cypress open",
  "private::test.python": "python -m unittest tests/unit/format_test.py",

src/dash-table/components/ControlledTable/index.tsx

@@ -721,6 +721,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
  filter_action,
  fixed_columns,
  fixed_rows,
+ loading_state,
  scrollbarWidth,
  style_as_list_view,
  style_table,
@@ -736,6 +737,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
  visibleColumns
  } = this.props;
 
+ const isLoading = dataLoading(loading_state);
+
  const fragmentClasses = [
  [
  fixed_rows && fixed_columns ? 'dash-fixed-row dash-fixed-column' : '',
@@ -766,7 +769,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
  ...(visibleColumns.length ? [] : ['dash-no-columns']),
  ...(virtualized.data.length ? [] : ['dash-no-data']),
  ...(filter_action !== TableAction.None ? [] : ['dash-no-filter']),
- ...(fill_width ? ['dash-fill-width'] : [])
+ ...(fill_width ? ['dash-fill-width'] : []),
+ ...(isLoading ? ['dash-loading'] : [])
  ];
 
  const containerClasses = ['dash-spreadsheet-container', ...classes];

tests/cypress/dash/v_copy_paste.py

@@ -1,6 +1,7 @@
 # pylint: disable=global-statement
 import dash
 from dash.dependencies import Input, Output, State
+from dash.exceptions import PreventUpdate
 import dash_html_components as html
 import os
 import pandas as pd
@@ -85,15 +86,20 @@
 # pylint: disable=unused-argument
 def updateData(timestamp, current, previous):
  # pylint: enable=unused-argument
- if current is None or previous is None:
-return current
+ if timestamp is None or current is None or previous is None:
+raise PreventUpdate
 
+ modified = False
  if len(current) == len(previous):
  for (i, datum) in enumerate(current):
  previous_datum = previous[i]
  if datum[0] != previous_datum[0]:
+ modified = True
  datum[1] = "MODIFIED"
 
+ if not modified:
+ raise PreventUpdate
+
  return current
 
 if __name__ == "__main__":

tests/cypress/dash/v_data_loading.py

@@ -1,6 +1,7 @@
 # pylint: disable=global-statement
 import dash
 from dash.dependencies import Input, Output, State
+from dash.exceptions import PreventUpdate
 import dash_html_components as html
 import dash_core_components as dcc
 import os
@@ -27,7 +28,8 @@
 
 app.layout = html.Div(
  [
- dcc.Input(id='change-property'),
+ dcc.Input(id='change-data-property'),
+ dcc.Input(id='change-other-property'),
 
  dash_table.DataTable(
  id="table",
@@ -59,24 +61,27 @@
 
 @app.callback(
  Output("table", "style_cell_conditional"),
- [Input("change-property", "value")]
+ [Input("change-other-property", "value")]
 )
 def dontTriggerWait(to_change):
- if to_change == 'dont_change_data':
- sleep(5)
+ if to_change != 'dont_change_data':
+ raise PreventUpdate
+
+ sleep(5)
  return []
 
 
 @app.callback(
  Output("table", "data"),
- [Input("change-property", "value")],
- [State("table", "data")]
+ [Input("change-data-property", "value")]
 )
 # pylint: disable=unused-argument
-def triggerWait(to_change, current):
- if to_change == 'change_data':
- sleep(5)
- return current
+def triggerWait(to_change):
+ if to_change != 'change_data':
+ raise PreventUpdate
+
+ sleep(5)
+ return df[0:250]
 
 
 if __name__ == "__main__":

tests/cypress/dash/v_default.py

@@ -0,0 +1,82 @@
+# pylint: disable=global-statement
+import dash
+from dash.dependencies import Input, Output, State
+from dash.exceptions import PreventUpdate
+import dash_html_components as html
+import os
+import pandas as pd
+import sys
+
+sys.path.append(
+ os.path.abspath(
+ os.path.join(os.path.dirname(sys.argv[0]), os.pardir, os.pardir, os.pardir)
+ )
+)
+module_names = ["dash_table"]
+modules = [__import__(x) for x in module_names]
+dash_table = modules[0]
+
+url = "https://github.com/plotly/datasets/raw/master/" "26k-consumer-complaints.csv"
+df = pd.read_csv(url)
+df = df.values
+
+app = dash.Dash()
+app.css.config.serve_locally = True
+app.scripts.config.serve_locally = True
+
+app.layout = html.Div(
+ [
+ html.Div(id="container", children="Hello World"),
+ dash_table.DataTable(
+ id="table",
+ data=df[0:250],
+ columns=[
+ {"id": 0, "name": "Complaint ID", "hideable": True},
+ {"id": 1, "name": "Product"},
+ {"id": 2, "name": "Sub-product"},
+ {"id": 3, "name": "Issue"},
+ {"id": 4, "name": "Sub-issue"},
+ {"id": 5, "name": "State"},
+ {"id": 6, "name": "ZIP"},
+ {"id": 7, "name": "code"},
+ {"id": 8, "name": "Date received"},
+ {"id": 9, "name": "Date sent to company"},
+ {"id": 10, "name": "Company"},
+ {"id": 11, "name": "Company response"},
+ {"id": 12, "name": "Timely response?"},
+ {"id": 13, "name": "Consumer disputed?"},
+ ],
+ editable=True,
+ sort_action='native',
+ include_headers_on_copy_paste=True,
+
+ ),
+ dash_table.DataTable(
+ id="table2",
+ data=df[0:10],
+ columns=[
+ {"id": 0, "name": "Complaint ID", "hideable": True},
+ {"id": 1, "name": "Product"},
+ {"id": 2, "name": "Sub-product"},
+ {"id": 3, "name": "Issue"},
+ {"id": 4, "name": "Sub-issue"},
+ {"id": 5, "name": "State"},
+ {"id": 6, "name": "ZIP"},
+ {"id": 7, "name": "code"},
+ {"id": 8, "name": "Date received"},
+ {"id": 9, "name": "Date sent to company"},
+ {"id": 10, "name": "Company"},
+ {"id": 11, "name": "Company response"},
+ {"id": 12, "name": "Timely response?"},
+ {"id": 13, "name": "Consumer disputed?"},
+ ],
+ editable=True,
+ sort_action='native',
+ include_headers_on_copy_paste=True,
+ ),
+ ]
+)
+
+
+if __name__ == "__main__":
+ app.run_server(port=8085, debug=False)

tests/cypress/src/DashTable.ts

@@ -1,26 +1,47 @@
+const READY = `.dash-spreadsheet:not(.dash-loading)`;
+const LOADING = `.dash-spreadsheet.dash-loading`;
+const ANY = `.dash-spreadsheet`;
+
+export enum State {
+ Any,
+ Loading,
+ Ready
+}
+
+const getSelector = (state: State) => {
+ switch (state) {
+ case State.Ready:
+ return READY;
+ case State.Loading:
+ return LOADING;
+ default:
+ return ANY;
+ }
+};
+
 export default class DashTable {
- static getCell(row: number, column: number) {
- return cy.get(`#table tbody tr td.column-${column}`).eq(row);
+ static getCell(row: number, column: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr td.column-${column}`).eq(row);
  }
 
- static getCellById(row: number, column: string) {
- return cy.get(`#table tbody tr td[data-dash-column="${column}"]`).eq(row);
+ static getCellById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr td[data-dash-column="${column}"]`).eq(row);
  }
 
- static getFilter(column: number) {
- return cy.get(`#table tbody tr th.dash-filter.column-${column}`);
+ static getFilter(column: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-filter.column-${column}`);
  }
 
- static getFilterById(column: string) {
- return cy.get(`#table tbody tr th.dash-filter[data-dash-column="${column}"]`);
+ static getFilterById(column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-filter[data-dash-column="${column}"]`);
  }
 
- static getHeader(row: number, column: number) {
- return cy.get(`#table tbody tr th.dash-header.column-${column}`).eq(row);
+ static getHeader(row: number, column: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header.column-${column}`).eq(row);
  }
 
- static getHeaderById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"]`).eq(row);
+ static getHeaderById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"]`).eq(row);
  }
 
  static focusCell(row: number, column: number) {
@@ -33,52 +54,52 @@ export default class DashTable {
  return this.getCellById(row, column).click().scrollIntoView();
  }
 
- static clearColumnById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"] .column-header--clear`).eq(row).click();
+ static clearColumnById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"] .column-header--clear`).eq(row).click();
  }
 
- static deleteColumnById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"] .column-header--delete`).eq(row).click();
+ static deleteColumnById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"] .column-header--delete`).eq(row).click();
  }
 
- static hideColumnById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"] .column-header--hide`).eq(row).click();
+ static hideColumnById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"] .column-header--hide`).eq(row).click();
  }
 
- static getSelectColumnById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"] .column-header--select input`).eq(row);
+ static getSelectColumnById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"] .column-header--select input`).eq(row);
  }
 
  static selectColumnById(row: number, column: string) {
  return DashTable.getSelectColumnById(row, column).click();
  }
 
- static getDelete(row: number) {
- return cy.get(`#table tbody tr td.dash-delete-cell`).eq(row);
+ static getDelete(row: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr td.dash-delete-cell`).eq(row);
  }
 
- static getSelect(row: number) {
- return cy.get(`#table tbody tr td.dash-select-cell`).eq(row);
+ static getSelect(row: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr td.dash-select-cell`).eq(row);
  }
 
- static getActiveCell() {
- return cy.get(`#table tbody td.focused`);
+ static getActiveCell(editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody td.focused`);
  }
 
- static getSelectedCells() {
- return cy.get(`#table tbody td.cell--selected`);
+ static getSelectedCells(editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody td.cell--selected`);
  }
 
  static scrollToTop() {
  cy.get(`.cell.cell-1-1.dash-fixed-content`).invoke(`outerHeight`).then(height => {
  cy.scrollTo(0, -height);
- })
+ });
  }
 
  static scrollToBottom() {
  cy.get(`.cell.cell-1-1.dash-fixed-content`).invoke(`outerHeight`).then(height => {
  cy.scrollTo(0, height);
- })
+ });
  }
 
  static getCellInLastRowOfColumn(column: number) {

package.json

@@ -26,13 +26,15 @@
  "private::host_dash8082": "python tests/cypress/dash/v_copy_paste.py",
  "private::host_dash8083": "python tests/cypress/dash/v_fe_page.py",
  "private::host_dash8084": "python tests/cypress/dash/v_data_loading.py",
+ "private::host_dash8085": "python tests/cypress/dash/v_default.py",
  "private::host_js": "http-server ./dash_table -c-1 --silent",
  "private::lint:ts": "tslint --project tsconfig.json --config tslint.json",
  "private::lint:py": "flake8 --exclude=DataTable.py,__init__.py,_imports_.py dash_table",
  "private::wait_dash8081": "wait-on http://localhost:8081",
  "private::wait_dash8082": "wait-on http://localhost:8082",
  "private::wait_dash8083": "wait-on http://localhost:8083",
  "private::wait_dash8084": "wait-on http://localhost:8084",
+ "private::wait_dash8085": "wait-on http://localhost:8085",
  "private::wait_js": "wait-on http://localhost:8080",
  "private::opentests": "cypress open",
  "private::test.python": "python -m unittest tests/unit/format_test.py",

src/dash-table/components/ControlledTable/index.tsx

@@ -721,6 +721,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
  filter_action,
  fixed_columns,
  fixed_rows,
+ loading_state,
  scrollbarWidth,
  style_as_list_view,
  style_table,
@@ -736,6 +737,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
  visibleColumns
  } = this.props;
 
+ const isLoading = dataLoading(loading_state);
+
  const fragmentClasses = [
  [
  fixed_rows && fixed_columns ? 'dash-fixed-row dash-fixed-column' : '',
@@ -766,7 +769,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
  ...(visibleColumns.length ? [] : ['dash-no-columns']),
  ...(virtualized.data.length ? [] : ['dash-no-data']),
  ...(filter_action !== TableAction.None ? [] : ['dash-no-filter']),
- ...(fill_width ? ['dash-fill-width'] : [])
+ ...(fill_width ? ['dash-fill-width'] : []),
+ ...(isLoading ? ['dash-loading'] : [])
  ];
 
  const containerClasses = ['dash-spreadsheet-container', ...classes];

tests/cypress/dash/v_copy_paste.py

@@ -1,6 +1,7 @@
 # pylint: disable=global-statement
 import dash
 from dash.dependencies import Input, Output, State
+from dash.exceptions import PreventUpdate
 import dash_html_components as html
 import os
 import pandas as pd
@@ -85,15 +86,20 @@
 # pylint: disable=unused-argument
 def updateData(timestamp, current, previous):
  # pylint: enable=unused-argument
- if current is None or previous is None:
-return current
+ if timestamp is None or current is None or previous is None:
+raise PreventUpdate
 
+ modified = False
  if len(current) == len(previous):
  for (i, datum) in enumerate(current):
  previous_datum = previous[i]
  if datum[0] != previous_datum[0]:
+ modified = True
  datum[1] = "MODIFIED"
 
+ if not modified:
+ raise PreventUpdate
+
  return current
 
 if __name__ == "__main__":

tests/cypress/dash/v_data_loading.py

@@ -1,6 +1,7 @@
 # pylint: disable=global-statement
 import dash
 from dash.dependencies import Input, Output, State
+from dash.exceptions import PreventUpdate
 import dash_html_components as html
 import dash_core_components as dcc
 import os
@@ -27,7 +28,8 @@
 
 app.layout = html.Div(
  [
- dcc.Input(id='change-property'),
+ dcc.Input(id='change-data-property'),
+ dcc.Input(id='change-other-property'),
 
  dash_table.DataTable(
  id="table",
@@ -59,24 +61,27 @@
 
 @app.callback(
  Output("table", "style_cell_conditional"),
- [Input("change-property", "value")]
+ [Input("change-other-property", "value")]
 )
 def dontTriggerWait(to_change):
- if to_change == 'dont_change_data':
- sleep(5)
+ if to_change != 'dont_change_data':
+ raise PreventUpdate
+
+ sleep(5)
  return []
 
 
 @app.callback(
  Output("table", "data"),
- [Input("change-property", "value")],
- [State("table", "data")]
+ [Input("change-data-property", "value")]
 )
 # pylint: disable=unused-argument
-def triggerWait(to_change, current):
- if to_change == 'change_data':
- sleep(5)
- return current
+def triggerWait(to_change):
+ if to_change != 'change_data':
+ raise PreventUpdate
+
+ sleep(5)
+ return df[0:250]
 
 
 if __name__ == "__main__":

tests/cypress/dash/v_default.py

@@ -0,0 +1,82 @@
+# pylint: disable=global-statement
+import dash
+from dash.dependencies import Input, Output, State
+from dash.exceptions import PreventUpdate
+import dash_html_components as html
+import os
+import pandas as pd
+import sys
+
+sys.path.append(
+ os.path.abspath(
+ os.path.join(os.path.dirname(sys.argv[0]), os.pardir, os.pardir, os.pardir)
+ )
+)
+module_names = ["dash_table"]
+modules = [__import__(x) for x in module_names]
+dash_table = modules[0]
+
+url = "https://github.com/plotly/datasets/raw/master/" "26k-consumer-complaints.csv"
+df = pd.read_csv(url)
+df = df.values
+
+app = dash.Dash()
+app.css.config.serve_locally = True
+app.scripts.config.serve_locally = True
+
+app.layout = html.Div(
+ [
+ html.Div(id="container", children="Hello World"),
+ dash_table.DataTable(
+ id="table",
+ data=df[0:250],
+ columns=[
+ {"id": 0, "name": "Complaint ID", "hideable": True},
+ {"id": 1, "name": "Product"},
+ {"id": 2, "name": "Sub-product"},
+ {"id": 3, "name": "Issue"},
+ {"id": 4, "name": "Sub-issue"},
+ {"id": 5, "name": "State"},
+ {"id": 6, "name": "ZIP"},
+ {"id": 7, "name": "code"},
+ {"id": 8, "name": "Date received"},
+ {"id": 9, "name": "Date sent to company"},
+ {"id": 10, "name": "Company"},
+ {"id": 11, "name": "Company response"},
+ {"id": 12, "name": "Timely response?"},
+ {"id": 13, "name": "Consumer disputed?"},
+ ],
+ editable=True,
+ sort_action='native',
+ include_headers_on_copy_paste=True,
+
+ ),
+ dash_table.DataTable(
+ id="table2",
+ data=df[0:10],
+ columns=[
+ {"id": 0, "name": "Complaint ID", "hideable": True},
+ {"id": 1, "name": "Product"},
+ {"id": 2, "name": "Sub-product"},
+ {"id": 3, "name": "Issue"},
+ {"id": 4, "name": "Sub-issue"},
+ {"id": 5, "name": "State"},
+ {"id": 6, "name": "ZIP"},
+ {"id": 7, "name": "code"},
+ {"id": 8, "name": "Date received"},
+ {"id": 9, "name": "Date sent to company"},
+ {"id": 10, "name": "Company"},
+ {"id": 11, "name": "Company response"},
+ {"id": 12, "name": "Timely response?"},
+ {"id": 13, "name": "Consumer disputed?"},
+ ],
+ editable=True,
+ sort_action='native',
+ include_headers_on_copy_paste=True,
+ ),
+ ]
+)
+
+
+if __name__ == "__main__":
+ app.run_server(port=8085, debug=False)

tests/cypress/src/DashTable.ts

@@ -1,26 +1,47 @@
+const READY = `.dash-spreadsheet:not(.dash-loading)`;
+const LOADING = `.dash-spreadsheet.dash-loading`;
+const ANY = `.dash-spreadsheet`;
+
+export enum State {
+ Any,
+ Loading,
+ Ready
+}
+
+const getSelector = (state: State) => {
+ switch (state) {
+ case State.Ready:
+ return READY;
+ case State.Loading:
+ return LOADING;
+ default:
+ return ANY;
+ }
+};
+
 export default class DashTable {
- static getCell(row: number, column: number) {
- return cy.get(`#table tbody tr td.column-${column}`).eq(row);
+ static getCell(row: number, column: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr td.column-${column}`).eq(row);
  }
 
- static getCellById(row: number, column: string) {
- return cy.get(`#table tbody tr td[data-dash-column="${column}"]`).eq(row);
+ static getCellById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr td[data-dash-column="${column}"]`).eq(row);
  }
 
- static getFilter(column: number) {
- return cy.get(`#table tbody tr th.dash-filter.column-${column}`);
+ static getFilter(column: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-filter.column-${column}`);
  }
 
- static getFilterById(column: string) {
- return cy.get(`#table tbody tr th.dash-filter[data-dash-column="${column}"]`);
+ static getFilterById(column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-filter[data-dash-column="${column}"]`);
  }
 
- static getHeader(row: number, column: number) {
- return cy.get(`#table tbody tr th.dash-header.column-${column}`).eq(row);
+ static getHeader(row: number, column: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header.column-${column}`).eq(row);
  }
 
- static getHeaderById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"]`).eq(row);
+ static getHeaderById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"]`).eq(row);
  }
 
  static focusCell(row: number, column: number) {
@@ -33,52 +54,52 @@ export default class DashTable {
  return this.getCellById(row, column).click().scrollIntoView();
  }
 
- static clearColumnById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"] .column-header--clear`).eq(row).click();
+ static clearColumnById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"] .column-header--clear`).eq(row).click();
  }
 
- static deleteColumnById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"] .column-header--delete`).eq(row).click();
+ static deleteColumnById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"] .column-header--delete`).eq(row).click();
  }
 
- static hideColumnById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"] .column-header--hide`).eq(row).click();
+ static hideColumnById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"] .column-header--hide`).eq(row).click();
  }
 
- static getSelectColumnById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"] .column-header--select input`).eq(row);
+ static getSelectColumnById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"] .column-header--select input`).eq(row);
  }
 
  static selectColumnById(row: number, column: string) {
  return DashTable.getSelectColumnById(row, column).click();
  }
 
- static getDelete(row: number) {
- return cy.get(`#table tbody tr td.dash-delete-cell`).eq(row);
+ static getDelete(row: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr td.dash-delete-cell`).eq(row);
  }
 
- static getSelect(row: number) {
- return cy.get(`#table tbody tr td.dash-select-cell`).eq(row);
+ static getSelect(row: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr td.dash-select-cell`).eq(row);
  }
 
- static getActiveCell() {
- return cy.get(`#table tbody td.focused`);
+ static getActiveCell(editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody td.focused`);
  }
 
- static getSelectedCells() {
- return cy.get(`#table tbody td.cell--selected`);
+ static getSelectedCells(editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody td.cell--selected`);
  }
 
  static scrollToTop() {
  cy.get(`.cell.cell-1-1.dash-fixed-content`).invoke(`outerHeight`).then(height => {
  cy.scrollTo(0, -height);
- })
+ });
  }
 
  static scrollToBottom() {
  cy.get(`.cell.cell-1-1.dash-fixed-content`).invoke(`outerHeight`).then(height => {
  cy.scrollTo(0, height);
- })
+ });
  }
 
  static getCellInLastRowOfColumn(column: number) {

package.json

@@ -26,13 +26,15 @@
  "private::host_dash8082": "python tests/cypress/dash/v_copy_paste.py",
  "private::host_dash8083": "python tests/cypress/dash/v_fe_page.py",
  "private::host_dash8084": "python tests/cypress/dash/v_data_loading.py",
+ "private::host_dash8085": "python tests/cypress/dash/v_default.py",
  "private::host_js": "http-server ./dash_table -c-1 --silent",
  "private::lint:ts": "tslint --project tsconfig.json --config tslint.json",
  "private::lint:py": "flake8 --exclude=DataTable.py,__init__.py,_imports_.py dash_table",
  "private::wait_dash8081": "wait-on http://localhost:8081",
  "private::wait_dash8082": "wait-on http://localhost:8082",
  "private::wait_dash8083": "wait-on http://localhost:8083",
  "private::wait_dash8084": "wait-on http://localhost:8084",
+ "private::wait_dash8085": "wait-on http://localhost:8085",
  "private::wait_js": "wait-on http://localhost:8080",
  "private::opentests": "cypress open",
  "private::test.python": "python -m unittest tests/unit/format_test.py",

src/dash-table/components/ControlledTable/index.tsx

@@ -721,6 +721,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
  filter_action,
  fixed_columns,
  fixed_rows,
+ loading_state,
  scrollbarWidth,
  style_as_list_view,
  style_table,
@@ -736,6 +737,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
  visibleColumns
  } = this.props;
 
+ const isLoading = dataLoading(loading_state);
+
  const fragmentClasses = [
  [
  fixed_rows && fixed_columns ? 'dash-fixed-row dash-fixed-column' : '',
@@ -766,7 +769,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
  ...(visibleColumns.length ? [] : ['dash-no-columns']),
  ...(virtualized.data.length ? [] : ['dash-no-data']),
  ...(filter_action !== TableAction.None ? [] : ['dash-no-filter']),
- ...(fill_width ? ['dash-fill-width'] : [])
+ ...(fill_width ? ['dash-fill-width'] : []),
+ ...(isLoading ? ['dash-loading'] : [])
  ];
 
  const containerClasses = ['dash-spreadsheet-container', ...classes];

tests/cypress/dash/v_copy_paste.py

@@ -1,6 +1,7 @@
 # pylint: disable=global-statement
 import dash
 from dash.dependencies import Input, Output, State
+from dash.exceptions import PreventUpdate
 import dash_html_components as html
 import os
 import pandas as pd
@@ -85,15 +86,20 @@
 # pylint: disable=unused-argument
 def updateData(timestamp, current, previous):
  # pylint: enable=unused-argument
- if current is None or previous is None:
-return current
+ if timestamp is None or current is None or previous is None:
+raise PreventUpdate
 
+ modified = False
  if len(current) == len(previous):
  for (i, datum) in enumerate(current):
  previous_datum = previous[i]
  if datum[0] != previous_datum[0]:
+ modified = True
  datum[1] = "MODIFIED"
 
+ if not modified:
+ raise PreventUpdate
+
  return current
 
 if __name__ == "__main__":

tests/cypress/dash/v_data_loading.py

@@ -1,6 +1,7 @@
 # pylint: disable=global-statement
 import dash
 from dash.dependencies import Input, Output, State
+from dash.exceptions import PreventUpdate
 import dash_html_components as html
 import dash_core_components as dcc
 import os
@@ -27,7 +28,8 @@
 
 app.layout = html.Div(
  [
- dcc.Input(id='change-property'),
+ dcc.Input(id='change-data-property'),
+ dcc.Input(id='change-other-property'),
 
  dash_table.DataTable(
  id="table",
@@ -59,24 +61,27 @@
 
 @app.callback(
  Output("table", "style_cell_conditional"),
- [Input("change-property", "value")]
+ [Input("change-other-property", "value")]
 )
 def dontTriggerWait(to_change):
- if to_change == 'dont_change_data':
- sleep(5)
+ if to_change != 'dont_change_data':
+ raise PreventUpdate
+
+ sleep(5)
  return []
 
 
 @app.callback(
  Output("table", "data"),
- [Input("change-property", "value")],
- [State("table", "data")]
+ [Input("change-data-property", "value")]
 )
 # pylint: disable=unused-argument
-def triggerWait(to_change, current):
- if to_change == 'change_data':
- sleep(5)
- return current
+def triggerWait(to_change):
+ if to_change != 'change_data':
+ raise PreventUpdate
+
+ sleep(5)
+ return df[0:250]
 
 
 if __name__ == "__main__":

tests/cypress/dash/v_default.py

@@ -0,0 +1,82 @@
+# pylint: disable=global-statement
+import dash
+from dash.dependencies import Input, Output, State
+from dash.exceptions import PreventUpdate
+import dash_html_components as html
+import os
+import pandas as pd
+import sys
+
+sys.path.append(
+ os.path.abspath(
+ os.path.join(os.path.dirname(sys.argv[0]), os.pardir, os.pardir, os.pardir)
+ )
+)
+module_names = ["dash_table"]
+modules = [__import__(x) for x in module_names]
+dash_table = modules[0]
+
+url = "https://github.com/plotly/datasets/raw/master/" "26k-consumer-complaints.csv"
+df = pd.read_csv(url)
+df = df.values
+
+app = dash.Dash()
+app.css.config.serve_locally = True
+app.scripts.config.serve_locally = True
+
+app.layout = html.Div(
+ [
+ html.Div(id="container", children="Hello World"),
+ dash_table.DataTable(
+ id="table",
+ data=df[0:250],
+ columns=[
+ {"id": 0, "name": "Complaint ID", "hideable": True},
+ {"id": 1, "name": "Product"},
+ {"id": 2, "name": "Sub-product"},
+ {"id": 3, "name": "Issue"},
+ {"id": 4, "name": "Sub-issue"},
+ {"id": 5, "name": "State"},
+ {"id": 6, "name": "ZIP"},
+ {"id": 7, "name": "code"},
+ {"id": 8, "name": "Date received"},
+ {"id": 9, "name": "Date sent to company"},
+ {"id": 10, "name": "Company"},
+ {"id": 11, "name": "Company response"},
+ {"id": 12, "name": "Timely response?"},
+ {"id": 13, "name": "Consumer disputed?"},
+ ],
+ editable=True,
+ sort_action='native',
+ include_headers_on_copy_paste=True,
+
+ ),
+ dash_table.DataTable(
+ id="table2",
+ data=df[0:10],
+ columns=[
+ {"id": 0, "name": "Complaint ID", "hideable": True},
+ {"id": 1, "name": "Product"},
+ {"id": 2, "name": "Sub-product"},
+ {"id": 3, "name": "Issue"},
+ {"id": 4, "name": "Sub-issue"},
+ {"id": 5, "name": "State"},
+ {"id": 6, "name": "ZIP"},
+ {"id": 7, "name": "code"},
+ {"id": 8, "name": "Date received"},
+ {"id": 9, "name": "Date sent to company"},
+ {"id": 10, "name": "Company"},
+ {"id": 11, "name": "Company response"},
+ {"id": 12, "name": "Timely response?"},
+ {"id": 13, "name": "Consumer disputed?"},
+ ],
+ editable=True,
+ sort_action='native',
+ include_headers_on_copy_paste=True,
+ ),
+ ]
+)
+
+
+if __name__ == "__main__":
+ app.run_server(port=8085, debug=False)

tests/cypress/src/DashTable.ts

@@ -1,26 +1,47 @@
+const READY = `.dash-spreadsheet:not(.dash-loading)`;
+const LOADING = `.dash-spreadsheet.dash-loading`;
+const ANY = `.dash-spreadsheet`;
+
+export enum State {
+ Any,
+ Loading,
+ Ready
+}
+
+const getSelector = (state: State) => {
+ switch (state) {
+ case State.Ready:
+ return READY;
+ case State.Loading:
+ return LOADING;
+ default:
+ return ANY;
+ }
+};
+
 export default class DashTable {
- static getCell(row: number, column: number) {
- return cy.get(`#table tbody tr td.column-${column}`).eq(row);
+ static getCell(row: number, column: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr td.column-${column}`).eq(row);
  }
 
- static getCellById(row: number, column: string) {
- return cy.get(`#table tbody tr td[data-dash-column="${column}"]`).eq(row);
+ static getCellById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr td[data-dash-column="${column}"]`).eq(row);
  }
 
- static getFilter(column: number) {
- return cy.get(`#table tbody tr th.dash-filter.column-${column}`);
+ static getFilter(column: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-filter.column-${column}`);
  }
 
- static getFilterById(column: string) {
- return cy.get(`#table tbody tr th.dash-filter[data-dash-column="${column}"]`);
+ static getFilterById(column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-filter[data-dash-column="${column}"]`);
  }
 
- static getHeader(row: number, column: number) {
- return cy.get(`#table tbody tr th.dash-header.column-${column}`).eq(row);
+ static getHeader(row: number, column: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header.column-${column}`).eq(row);
  }
 
- static getHeaderById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"]`).eq(row);
+ static getHeaderById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"]`).eq(row);
  }
 
  static focusCell(row: number, column: number) {
@@ -33,52 +54,52 @@ export default class DashTable {
  return this.getCellById(row, column).click().scrollIntoView();
  }
 
- static clearColumnById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"] .column-header--clear`).eq(row).click();
+ static clearColumnById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"] .column-header--clear`).eq(row).click();
  }
 
- static deleteColumnById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"] .column-header--delete`).eq(row).click();
+ static deleteColumnById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"] .column-header--delete`).eq(row).click();
  }
 
- static hideColumnById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"] .column-header--hide`).eq(row).click();
+ static hideColumnById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"] .column-header--hide`).eq(row).click();
  }
 
- static getSelectColumnById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"] .column-header--select input`).eq(row);
+ static getSelectColumnById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"] .column-header--select input`).eq(row);
  }
 
  static selectColumnById(row: number, column: string) {
  return DashTable.getSelectColumnById(row, column).click();
  }
 
- static getDelete(row: number) {
- return cy.get(`#table tbody tr td.dash-delete-cell`).eq(row);
+ static getDelete(row: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr td.dash-delete-cell`).eq(row);
  }
 
- static getSelect(row: number) {
- return cy.get(`#table tbody tr td.dash-select-cell`).eq(row);
+ static getSelect(row: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr td.dash-select-cell`).eq(row);
  }
 
- static getActiveCell() {
- return cy.get(`#table tbody td.focused`);
+ static getActiveCell(editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody td.focused`);
  }
 
- static getSelectedCells() {
- return cy.get(`#table tbody td.cell--selected`);
+ static getSelectedCells(editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody td.cell--selected`);
  }
 
  static scrollToTop() {
  cy.get(`.cell.cell-1-1.dash-fixed-content`).invoke(`outerHeight`).then(height => {
  cy.scrollTo(0, -height);
- })
+ });
  }
 
  static scrollToBottom() {
  cy.get(`.cell.cell-1-1.dash-fixed-content`).invoke(`outerHeight`).then(height => {
  cy.scrollTo(0, height);
- })
+ });
  }
 
  static getCellInLastRowOfColumn(column: number) {

package.json

@@ -26,13 +26,15 @@
  "private::host_dash8082": "python tests/cypress/dash/v_copy_paste.py",
  "private::host_dash8083": "python tests/cypress/dash/v_fe_page.py",
  "private::host_dash8084": "python tests/cypress/dash/v_data_loading.py",
+ "private::host_dash8085": "python tests/cypress/dash/v_default.py",
  "private::host_js": "http-server ./dash_table -c-1 --silent",
  "private::lint:ts": "tslint --project tsconfig.json --config tslint.json",
  "private::lint:py": "flake8 --exclude=DataTable.py,__init__.py,_imports_.py dash_table",
  "private::wait_dash8081": "wait-on http://localhost:8081",
  "private::wait_dash8082": "wait-on http://localhost:8082",
  "private::wait_dash8083": "wait-on http://localhost:8083",
  "private::wait_dash8084": "wait-on http://localhost:8084",
+ "private::wait_dash8085": "wait-on http://localhost:8085",
  "private::wait_js": "wait-on http://localhost:8080",
  "private::opentests": "cypress open",
  "private::test.python": "python -m unittest tests/unit/format_test.py",

src/dash-table/components/ControlledTable/index.tsx

@@ -721,6 +721,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
  filter_action,
  fixed_columns,
  fixed_rows,
+ loading_state,
  scrollbarWidth,
  style_as_list_view,
  style_table,
@@ -736,6 +737,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
  visibleColumns
  } = this.props;
 
+ const isLoading = dataLoading(loading_state);
+
  const fragmentClasses = [
  [
  fixed_rows && fixed_columns ? 'dash-fixed-row dash-fixed-column' : '',
@@ -766,7 +769,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
  ...(visibleColumns.length ? [] : ['dash-no-columns']),
  ...(virtualized.data.length ? [] : ['dash-no-data']),
  ...(filter_action !== TableAction.None ? [] : ['dash-no-filter']),
- ...(fill_width ? ['dash-fill-width'] : [])
+ ...(fill_width ? ['dash-fill-width'] : []),
+ ...(isLoading ? ['dash-loading'] : [])
  ];
 
  const containerClasses = ['dash-spreadsheet-container', ...classes];

tests/cypress/dash/v_copy_paste.py

@@ -1,6 +1,7 @@
 # pylint: disable=global-statement
 import dash
 from dash.dependencies import Input, Output, State
+from dash.exceptions import PreventUpdate
 import dash_html_components as html
 import os
 import pandas as pd
@@ -85,15 +86,20 @@
 # pylint: disable=unused-argument
 def updateData(timestamp, current, previous):
  # pylint: enable=unused-argument
- if current is None or previous is None:
-return current
+ if timestamp is None or current is None or previous is None:
+raise PreventUpdate
 
+ modified = False
  if len(current) == len(previous):
  for (i, datum) in enumerate(current):
  previous_datum = previous[i]
  if datum[0] != previous_datum[0]:
+ modified = True
  datum[1] = "MODIFIED"
 
+ if not modified:
+ raise PreventUpdate
+
  return current
 
 if __name__ == "__main__":

tests/cypress/dash/v_data_loading.py

@@ -1,6 +1,7 @@
 # pylint: disable=global-statement
 import dash
 from dash.dependencies import Input, Output, State
+from dash.exceptions import PreventUpdate
 import dash_html_components as html
 import dash_core_components as dcc
 import os
@@ -27,7 +28,8 @@
 
 app.layout = html.Div(
  [
- dcc.Input(id='change-property'),
+ dcc.Input(id='change-data-property'),
+ dcc.Input(id='change-other-property'),
 
  dash_table.DataTable(
  id="table",
@@ -59,24 +61,27 @@
 
 @app.callback(
  Output("table", "style_cell_conditional"),
- [Input("change-property", "value")]
+ [Input("change-other-property", "value")]
 )
 def dontTriggerWait(to_change):
- if to_change == 'dont_change_data':
- sleep(5)
+ if to_change != 'dont_change_data':
+ raise PreventUpdate
+
+ sleep(5)
  return []
 
 
 @app.callback(
  Output("table", "data"),
- [Input("change-property", "value")],
- [State("table", "data")]
+ [Input("change-data-property", "value")]
 )
 # pylint: disable=unused-argument
-def triggerWait(to_change, current):
- if to_change == 'change_data':
- sleep(5)
- return current
+def triggerWait(to_change):
+ if to_change != 'change_data':
+ raise PreventUpdate
+
+ sleep(5)
+ return df[0:250]
 
 
 if __name__ == "__main__":

tests/cypress/dash/v_default.py

@@ -0,0 +1,82 @@
+# pylint: disable=global-statement
+import dash
+from dash.dependencies import Input, Output, State
+from dash.exceptions import PreventUpdate
+import dash_html_components as html
+import os
+import pandas as pd
+import sys
+
+sys.path.append(
+ os.path.abspath(
+ os.path.join(os.path.dirname(sys.argv[0]), os.pardir, os.pardir, os.pardir)
+ )
+)
+module_names = ["dash_table"]
+modules = [__import__(x) for x in module_names]
+dash_table = modules[0]
+
+url = "https://github.com/plotly/datasets/raw/master/" "26k-consumer-complaints.csv"
+df = pd.read_csv(url)
+df = df.values
+
+app = dash.Dash()
+app.css.config.serve_locally = True
+app.scripts.config.serve_locally = True
+
+app.layout = html.Div(
+ [
+ html.Div(id="container", children="Hello World"),
+ dash_table.DataTable(
+ id="table",
+ data=df[0:250],
+ columns=[
+ {"id": 0, "name": "Complaint ID", "hideable": True},
+ {"id": 1, "name": "Product"},
+ {"id": 2, "name": "Sub-product"},
+ {"id": 3, "name": "Issue"},
+ {"id": 4, "name": "Sub-issue"},
+ {"id": 5, "name": "State"},
+ {"id": 6, "name": "ZIP"},
+ {"id": 7, "name": "code"},
+ {"id": 8, "name": "Date received"},
+ {"id": 9, "name": "Date sent to company"},
+ {"id": 10, "name": "Company"},
+ {"id": 11, "name": "Company response"},
+ {"id": 12, "name": "Timely response?"},
+ {"id": 13, "name": "Consumer disputed?"},
+ ],
+ editable=True,
+ sort_action='native',
+ include_headers_on_copy_paste=True,
+
+ ),
+ dash_table.DataTable(
+ id="table2",
+ data=df[0:10],
+ columns=[
+ {"id": 0, "name": "Complaint ID", "hideable": True},
+ {"id": 1, "name": "Product"},
+ {"id": 2, "name": "Sub-product"},
+ {"id": 3, "name": "Issue"},
+ {"id": 4, "name": "Sub-issue"},
+ {"id": 5, "name": "State"},
+ {"id": 6, "name": "ZIP"},
+ {"id": 7, "name": "code"},
+ {"id": 8, "name": "Date received"},
+ {"id": 9, "name": "Date sent to company"},
+ {"id": 10, "name": "Company"},
+ {"id": 11, "name": "Company response"},
+ {"id": 12, "name": "Timely response?"},
+ {"id": 13, "name": "Consumer disputed?"},
+ ],
+ editable=True,
+ sort_action='native',
+ include_headers_on_copy_paste=True,
+ ),
+ ]
+)
+
+
+if __name__ == "__main__":
+ app.run_server(port=8085, debug=False)

tests/cypress/src/DashTable.ts

@@ -1,26 +1,47 @@
+const READY = `.dash-spreadsheet:not(.dash-loading)`;
+const LOADING = `.dash-spreadsheet.dash-loading`;
+const ANY = `.dash-spreadsheet`;
+
+export enum State {
+ Any,
+ Loading,
+ Ready
+}
+
+const getSelector = (state: State) => {
+ switch (state) {
+ case State.Ready:
+ return READY;
+ case State.Loading:
+ return LOADING;
+ default:
+ return ANY;
+ }
+};
+
 export default class DashTable {
- static getCell(row: number, column: number) {
- return cy.get(`#table tbody tr td.column-${column}`).eq(row);
+ static getCell(row: number, column: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr td.column-${column}`).eq(row);
  }
 
- static getCellById(row: number, column: string) {
- return cy.get(`#table tbody tr td[data-dash-column="${column}"]`).eq(row);
+ static getCellById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr td[data-dash-column="${column}"]`).eq(row);
  }
 
- static getFilter(column: number) {
- return cy.get(`#table tbody tr th.dash-filter.column-${column}`);
+ static getFilter(column: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-filter.column-${column}`);
  }
 
- static getFilterById(column: string) {
- return cy.get(`#table tbody tr th.dash-filter[data-dash-column="${column}"]`);
+ static getFilterById(column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-filter[data-dash-column="${column}"]`);
  }
 
- static getHeader(row: number, column: number) {
- return cy.get(`#table tbody tr th.dash-header.column-${column}`).eq(row);
+ static getHeader(row: number, column: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header.column-${column}`).eq(row);
  }
 
- static getHeaderById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"]`).eq(row);
+ static getHeaderById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"]`).eq(row);
  }
 
  static focusCell(row: number, column: number) {
@@ -33,52 +54,52 @@ export default class DashTable {
  return this.getCellById(row, column).click().scrollIntoView();
  }
 
- static clearColumnById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"] .column-header--clear`).eq(row).click();
+ static clearColumnById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"] .column-header--clear`).eq(row).click();
  }
 
- static deleteColumnById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"] .column-header--delete`).eq(row).click();
+ static deleteColumnById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"] .column-header--delete`).eq(row).click();
  }
 
- static hideColumnById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"] .column-header--hide`).eq(row).click();
+ static hideColumnById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"] .column-header--hide`).eq(row).click();
  }
 
- static getSelectColumnById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"] .column-header--select input`).eq(row);
+ static getSelectColumnById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"] .column-header--select input`).eq(row);
  }
 
  static selectColumnById(row: number, column: string) {
  return DashTable.getSelectColumnById(row, column).click();
  }
 
- static getDelete(row: number) {
- return cy.get(`#table tbody tr td.dash-delete-cell`).eq(row);
+ static getDelete(row: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr td.dash-delete-cell`).eq(row);
  }
 
- static getSelect(row: number) {
- return cy.get(`#table tbody tr td.dash-select-cell`).eq(row);
+ static getSelect(row: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr td.dash-select-cell`).eq(row);
  }
 
- static getActiveCell() {
- return cy.get(`#table tbody td.focused`);
+ static getActiveCell(editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody td.focused`);
  }
 
- static getSelectedCells() {
- return cy.get(`#table tbody td.cell--selected`);
+ static getSelectedCells(editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody td.cell--selected`);
  }
 
  static scrollToTop() {
  cy.get(`.cell.cell-1-1.dash-fixed-content`).invoke(`outerHeight`).then(height => {
  cy.scrollTo(0, -height);
- })
+ });
  }
 
  static scrollToBottom() {
  cy.get(`.cell.cell-1-1.dash-fixed-content`).invoke(`outerHeight`).then(height => {
  cy.scrollTo(0, height);
- })
+ });
  }
 
  static getCellInLastRowOfColumn(column: number) {

package.json

@@ -26,13 +26,15 @@
  "private::host_dash8082": "python tests/cypress/dash/v_copy_paste.py",
  "private::host_dash8083": "python tests/cypress/dash/v_fe_page.py",
  "private::host_dash8084": "python tests/cypress/dash/v_data_loading.py",
+ "private::host_dash8085": "python tests/cypress/dash/v_default.py",
  "private::host_js": "http-server ./dash_table -c-1 --silent",
  "private::lint:ts": "tslint --project tsconfig.json --config tslint.json",
  "private::lint:py": "flake8 --exclude=DataTable.py,__init__.py,_imports_.py dash_table",
  "private::wait_dash8081": "wait-on http://localhost:8081",
  "private::wait_dash8082": "wait-on http://localhost:8082",
  "private::wait_dash8083": "wait-on http://localhost:8083",
  "private::wait_dash8084": "wait-on http://localhost:8084",
+ "private::wait_dash8085": "wait-on http://localhost:8085",
  "private::wait_js": "wait-on http://localhost:8080",
  "private::opentests": "cypress open",
  "private::test.python": "python -m unittest tests/unit/format_test.py",

src/dash-table/components/ControlledTable/index.tsx

@@ -721,6 +721,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
  filter_action,
  fixed_columns,
  fixed_rows,
+ loading_state,
  scrollbarWidth,
  style_as_list_view,
  style_table,
@@ -736,6 +737,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
  visibleColumns
  } = this.props;
 
+ const isLoading = dataLoading(loading_state);
+
  const fragmentClasses = [
  [
  fixed_rows && fixed_columns ? 'dash-fixed-row dash-fixed-column' : '',
@@ -766,7 +769,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
  ...(visibleColumns.length ? [] : ['dash-no-columns']),
  ...(virtualized.data.length ? [] : ['dash-no-data']),
  ...(filter_action !== TableAction.None ? [] : ['dash-no-filter']),
- ...(fill_width ? ['dash-fill-width'] : [])
+ ...(fill_width ? ['dash-fill-width'] : []),
+ ...(isLoading ? ['dash-loading'] : [])
  ];
 
  const containerClasses = ['dash-spreadsheet-container', ...classes];

tests/cypress/dash/v_copy_paste.py

@@ -1,6 +1,7 @@
 # pylint: disable=global-statement
 import dash
 from dash.dependencies import Input, Output, State
+from dash.exceptions import PreventUpdate
 import dash_html_components as html
 import os
 import pandas as pd
@@ -85,15 +86,20 @@
 # pylint: disable=unused-argument
 def updateData(timestamp, current, previous):
  # pylint: enable=unused-argument
- if current is None or previous is None:
-return current
+ if timestamp is None or current is None or previous is None:
+raise PreventUpdate
 
+ modified = False
  if len(current) == len(previous):
  for (i, datum) in enumerate(current):
  previous_datum = previous[i]
  if datum[0] != previous_datum[0]:
+ modified = True
  datum[1] = "MODIFIED"
 
+ if not modified:
+ raise PreventUpdate
+
  return current
 
 if __name__ == "__main__":

tests/cypress/dash/v_data_loading.py

@@ -1,6 +1,7 @@
 # pylint: disable=global-statement
 import dash
 from dash.dependencies import Input, Output, State
+from dash.exceptions import PreventUpdate
 import dash_html_components as html
 import dash_core_components as dcc
 import os
@@ -27,7 +28,8 @@
 
 app.layout = html.Div(
  [
- dcc.Input(id='change-property'),
+ dcc.Input(id='change-data-property'),
+ dcc.Input(id='change-other-property'),
 
  dash_table.DataTable(
  id="table",
@@ -59,24 +61,27 @@
 
 @app.callback(
  Output("table", "style_cell_conditional"),
- [Input("change-property", "value")]
+ [Input("change-other-property", "value")]
 )
 def dontTriggerWait(to_change):
- if to_change == 'dont_change_data':
- sleep(5)
+ if to_change != 'dont_change_data':
+ raise PreventUpdate
+
+ sleep(5)
  return []
 
 
 @app.callback(
  Output("table", "data"),
- [Input("change-property", "value")],
- [State("table", "data")]
+ [Input("change-data-property", "value")]
 )
 # pylint: disable=unused-argument
-def triggerWait(to_change, current):
- if to_change == 'change_data':
- sleep(5)
- return current
+def triggerWait(to_change):
+ if to_change != 'change_data':
+ raise PreventUpdate
+
+ sleep(5)
+ return df[0:250]
 
 
 if __name__ == "__main__":

tests/cypress/dash/v_default.py

@@ -0,0 +1,82 @@
+# pylint: disable=global-statement
+import dash
+from dash.dependencies import Input, Output, State
+from dash.exceptions import PreventUpdate
+import dash_html_components as html
+import os
+import pandas as pd
+import sys
+
+sys.path.append(
+ os.path.abspath(
+ os.path.join(os.path.dirname(sys.argv[0]), os.pardir, os.pardir, os.pardir)
+ )
+)
+module_names = ["dash_table"]
+modules = [__import__(x) for x in module_names]
+dash_table = modules[0]
+
+url = "https://github.com/plotly/datasets/raw/master/" "26k-consumer-complaints.csv"
+df = pd.read_csv(url)
+df = df.values
+
+app = dash.Dash()
+app.css.config.serve_locally = True
+app.scripts.config.serve_locally = True
+
+app.layout = html.Div(
+ [
+ html.Div(id="container", children="Hello World"),
+ dash_table.DataTable(
+ id="table",
+ data=df[0:250],
+ columns=[
+ {"id": 0, "name": "Complaint ID", "hideable": True},
+ {"id": 1, "name": "Product"},
+ {"id": 2, "name": "Sub-product"},
+ {"id": 3, "name": "Issue"},
+ {"id": 4, "name": "Sub-issue"},
+ {"id": 5, "name": "State"},
+ {"id": 6, "name": "ZIP"},
+ {"id": 7, "name": "code"},
+ {"id": 8, "name": "Date received"},
+ {"id": 9, "name": "Date sent to company"},
+ {"id": 10, "name": "Company"},
+ {"id": 11, "name": "Company response"},
+ {"id": 12, "name": "Timely response?"},
+ {"id": 13, "name": "Consumer disputed?"},
+ ],
+ editable=True,
+ sort_action='native',
+ include_headers_on_copy_paste=True,
+
+ ),
+ dash_table.DataTable(
+ id="table2",
+ data=df[0:10],
+ columns=[
+ {"id": 0, "name": "Complaint ID", "hideable": True},
+ {"id": 1, "name": "Product"},
+ {"id": 2, "name": "Sub-product"},
+ {"id": 3, "name": "Issue"},
+ {"id": 4, "name": "Sub-issue"},
+ {"id": 5, "name": "State"},
+ {"id": 6, "name": "ZIP"},
+ {"id": 7, "name": "code"},
+ {"id": 8, "name": "Date received"},
+ {"id": 9, "name": "Date sent to company"},
+ {"id": 10, "name": "Company"},
+ {"id": 11, "name": "Company response"},
+ {"id": 12, "name": "Timely response?"},
+ {"id": 13, "name": "Consumer disputed?"},
+ ],
+ editable=True,
+ sort_action='native',
+ include_headers_on_copy_paste=True,
+ ),
+ ]
+)
+
+
+if __name__ == "__main__":
+ app.run_server(port=8085, debug=False)

tests/cypress/src/DashTable.ts

@@ -1,26 +1,47 @@
+const READY = `.dash-spreadsheet:not(.dash-loading)`;
+const LOADING = `.dash-spreadsheet.dash-loading`;
+const ANY = `.dash-spreadsheet`;
+
+export enum State {
+ Any,
+ Loading,
+ Ready
+}
+
+const getSelector = (state: State) => {
+ switch (state) {
+ case State.Ready:
+ return READY;
+ case State.Loading:
+ return LOADING;
+ default:
+ return ANY;
+ }
+};
+
 export default class DashTable {
- static getCell(row: number, column: number) {
- return cy.get(`#table tbody tr td.column-${column}`).eq(row);
+ static getCell(row: number, column: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr td.column-${column}`).eq(row);
  }
 
- static getCellById(row: number, column: string) {
- return cy.get(`#table tbody tr td[data-dash-column="${column}"]`).eq(row);
+ static getCellById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr td[data-dash-column="${column}"]`).eq(row);
  }
 
- static getFilter(column: number) {
- return cy.get(`#table tbody tr th.dash-filter.column-${column}`);
+ static getFilter(column: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-filter.column-${column}`);
  }
 
- static getFilterById(column: string) {
- return cy.get(`#table tbody tr th.dash-filter[data-dash-column="${column}"]`);
+ static getFilterById(column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-filter[data-dash-column="${column}"]`);
  }
 
- static getHeader(row: number, column: number) {
- return cy.get(`#table tbody tr th.dash-header.column-${column}`).eq(row);
+ static getHeader(row: number, column: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header.column-${column}`).eq(row);
  }
 
- static getHeaderById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"]`).eq(row);
+ static getHeaderById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"]`).eq(row);
  }
 
  static focusCell(row: number, column: number) {
@@ -33,52 +54,52 @@ export default class DashTable {
  return this.getCellById(row, column).click().scrollIntoView();
  }
 
- static clearColumnById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"] .column-header--clear`).eq(row).click();
+ static clearColumnById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"] .column-header--clear`).eq(row).click();
  }
 
- static deleteColumnById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"] .column-header--delete`).eq(row).click();
+ static deleteColumnById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"] .column-header--delete`).eq(row).click();
  }
 
- static hideColumnById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"] .column-header--hide`).eq(row).click();
+ static hideColumnById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"] .column-header--hide`).eq(row).click();
  }
 
- static getSelectColumnById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"] .column-header--select input`).eq(row);
+ static getSelectColumnById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"] .column-header--select input`).eq(row);
  }
 
  static selectColumnById(row: number, column: string) {
  return DashTable.getSelectColumnById(row, column).click();
  }
 
- static getDelete(row: number) {
- return cy.get(`#table tbody tr td.dash-delete-cell`).eq(row);
+ static getDelete(row: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr td.dash-delete-cell`).eq(row);
  }
 
- static getSelect(row: number) {
- return cy.get(`#table tbody tr td.dash-select-cell`).eq(row);
+ static getSelect(row: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr td.dash-select-cell`).eq(row);
  }
 
- static getActiveCell() {
- return cy.get(`#table tbody td.focused`);
+ static getActiveCell(editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody td.focused`);
  }
 
- static getSelectedCells() {
- return cy.get(`#table tbody td.cell--selected`);
+ static getSelectedCells(editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody td.cell--selected`);
  }
 
  static scrollToTop() {
  cy.get(`.cell.cell-1-1.dash-fixed-content`).invoke(`outerHeight`).then(height => {
  cy.scrollTo(0, -height);
- })
+ });
  }
 
  static scrollToBottom() {
  cy.get(`.cell.cell-1-1.dash-fixed-content`).invoke(`outerHeight`).then(height => {
  cy.scrollTo(0, height);
- })
+ });
  }
 
  static getCellInLastRowOfColumn(column: number) {

package.json

@@ -26,13 +26,15 @@
  "private::host_dash8082": "python tests/cypress/dash/v_copy_paste.py",
  "private::host_dash8083": "python tests/cypress/dash/v_fe_page.py",
  "private::host_dash8084": "python tests/cypress/dash/v_data_loading.py",
+ "private::host_dash8085": "python tests/cypress/dash/v_default.py",
  "private::host_js": "http-server ./dash_table -c-1 --silent",
  "private::lint:ts": "tslint --project tsconfig.json --config tslint.json",
  "private::lint:py": "flake8 --exclude=DataTable.py,__init__.py,_imports_.py dash_table",
  "private::wait_dash8081": "wait-on http://localhost:8081",
  "private::wait_dash8082": "wait-on http://localhost:8082",
  "private::wait_dash8083": "wait-on http://localhost:8083",
  "private::wait_dash8084": "wait-on http://localhost:8084",
+ "private::wait_dash8085": "wait-on http://localhost:8085",
  "private::wait_js": "wait-on http://localhost:8080",
  "private::opentests": "cypress open",
  "private::test.python": "python -m unittest tests/unit/format_test.py",

src/dash-table/components/ControlledTable/index.tsx

@@ -721,6 +721,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
  filter_action,
  fixed_columns,
  fixed_rows,
+ loading_state,
  scrollbarWidth,
  style_as_list_view,
  style_table,
@@ -736,6 +737,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
  visibleColumns
  } = this.props;
 
+ const isLoading = dataLoading(loading_state);
+
  const fragmentClasses = [
  [
  fixed_rows && fixed_columns ? 'dash-fixed-row dash-fixed-column' : '',
@@ -766,7 +769,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
  ...(visibleColumns.length ? [] : ['dash-no-columns']),
  ...(virtualized.data.length ? [] : ['dash-no-data']),
  ...(filter_action !== TableAction.None ? [] : ['dash-no-filter']),
- ...(fill_width ? ['dash-fill-width'] : [])
+ ...(fill_width ? ['dash-fill-width'] : []),
+ ...(isLoading ? ['dash-loading'] : [])
  ];
 
  const containerClasses = ['dash-spreadsheet-container', ...classes];

tests/cypress/dash/v_copy_paste.py

@@ -1,6 +1,7 @@
 # pylint: disable=global-statement
 import dash
 from dash.dependencies import Input, Output, State
+from dash.exceptions import PreventUpdate
 import dash_html_components as html
 import os
 import pandas as pd
@@ -85,15 +86,20 @@
 # pylint: disable=unused-argument
 def updateData(timestamp, current, previous):
  # pylint: enable=unused-argument
- if current is None or previous is None:
-return current
+ if timestamp is None or current is None or previous is None:
+raise PreventUpdate
 
+ modified = False
  if len(current) == len(previous):
  for (i, datum) in enumerate(current):
  previous_datum = previous[i]
  if datum[0] != previous_datum[0]:
+ modified = True
  datum[1] = "MODIFIED"
 
+ if not modified:
+ raise PreventUpdate
+
  return current
 
 if __name__ == "__main__":

tests/cypress/dash/v_data_loading.py

@@ -1,6 +1,7 @@
 # pylint: disable=global-statement
 import dash
 from dash.dependencies import Input, Output, State
+from dash.exceptions import PreventUpdate
 import dash_html_components as html
 import dash_core_components as dcc
 import os
@@ -27,7 +28,8 @@
 
 app.layout = html.Div(
  [
- dcc.Input(id='change-property'),
+ dcc.Input(id='change-data-property'),
+ dcc.Input(id='change-other-property'),
 
  dash_table.DataTable(
  id="table",
@@ -59,24 +61,27 @@
 
 @app.callback(
  Output("table", "style_cell_conditional"),
- [Input("change-property", "value")]
+ [Input("change-other-property", "value")]
 )
 def dontTriggerWait(to_change):
- if to_change == 'dont_change_data':
- sleep(5)
+ if to_change != 'dont_change_data':
+ raise PreventUpdate
+
+ sleep(5)
  return []
 
 
 @app.callback(
  Output("table", "data"),
- [Input("change-property", "value")],
- [State("table", "data")]
+ [Input("change-data-property", "value")]
 )
 # pylint: disable=unused-argument
-def triggerWait(to_change, current):
- if to_change == 'change_data':
- sleep(5)
- return current
+def triggerWait(to_change):
+ if to_change != 'change_data':
+ raise PreventUpdate
+
+ sleep(5)
+ return df[0:250]
 
 
 if __name__ == "__main__":

tests/cypress/dash/v_default.py

@@ -0,0 +1,82 @@
+# pylint: disable=global-statement
+import dash
+from dash.dependencies import Input, Output, State
+from dash.exceptions import PreventUpdate
+import dash_html_components as html
+import os
+import pandas as pd
+import sys
+
+sys.path.append(
+ os.path.abspath(
+ os.path.join(os.path.dirname(sys.argv[0]), os.pardir, os.pardir, os.pardir)
+ )
+)
+module_names = ["dash_table"]
+modules = [__import__(x) for x in module_names]
+dash_table = modules[0]
+
+url = "https://github.com/plotly/datasets/raw/master/" "26k-consumer-complaints.csv"
+df = pd.read_csv(url)
+df = df.values
+
+app = dash.Dash()
+app.css.config.serve_locally = True
+app.scripts.config.serve_locally = True
+
+app.layout = html.Div(
+ [
+ html.Div(id="container", children="Hello World"),
+ dash_table.DataTable(
+ id="table",
+ data=df[0:250],
+ columns=[
+ {"id": 0, "name": "Complaint ID", "hideable": True},
+ {"id": 1, "name": "Product"},
+ {"id": 2, "name": "Sub-product"},
+ {"id": 3, "name": "Issue"},
+ {"id": 4, "name": "Sub-issue"},
+ {"id": 5, "name": "State"},
+ {"id": 6, "name": "ZIP"},
+ {"id": 7, "name": "code"},
+ {"id": 8, "name": "Date received"},
+ {"id": 9, "name": "Date sent to company"},
+ {"id": 10, "name": "Company"},
+ {"id": 11, "name": "Company response"},
+ {"id": 12, "name": "Timely response?"},
+ {"id": 13, "name": "Consumer disputed?"},
+ ],
+ editable=True,
+ sort_action='native',
+ include_headers_on_copy_paste=True,
+
+ ),
+ dash_table.DataTable(
+ id="table2",
+ data=df[0:10],
+ columns=[
+ {"id": 0, "name": "Complaint ID", "hideable": True},
+ {"id": 1, "name": "Product"},
+ {"id": 2, "name": "Sub-product"},
+ {"id": 3, "name": "Issue"},
+ {"id": 4, "name": "Sub-issue"},
+ {"id": 5, "name": "State"},
+ {"id": 6, "name": "ZIP"},
+ {"id": 7, "name": "code"},
+ {"id": 8, "name": "Date received"},
+ {"id": 9, "name": "Date sent to company"},
+ {"id": 10, "name": "Company"},
+ {"id": 11, "name": "Company response"},
+ {"id": 12, "name": "Timely response?"},
+ {"id": 13, "name": "Consumer disputed?"},
+ ],
+ editable=True,
+ sort_action='native',
+ include_headers_on_copy_paste=True,
+ ),
+ ]
+)
+
+
+if __name__ == "__main__":
+ app.run_server(port=8085, debug=False)

tests/cypress/src/DashTable.ts

@@ -1,26 +1,47 @@
+const READY = `.dash-spreadsheet:not(.dash-loading)`;
+const LOADING = `.dash-spreadsheet.dash-loading`;
+const ANY = `.dash-spreadsheet`;
+
+export enum State {
+ Any,
+ Loading,
+ Ready
+}
+
+const getSelector = (state: State) => {
+ switch (state) {
+ case State.Ready:
+ return READY;
+ case State.Loading:
+ return LOADING;
+ default:
+ return ANY;
+ }
+};
+
 export default class DashTable {
- static getCell(row: number, column: number) {
- return cy.get(`#table tbody tr td.column-${column}`).eq(row);
+ static getCell(row: number, column: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr td.column-${column}`).eq(row);
  }
 
- static getCellById(row: number, column: string) {
- return cy.get(`#table tbody tr td[data-dash-column="${column}"]`).eq(row);
+ static getCellById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr td[data-dash-column="${column}"]`).eq(row);
  }
 
- static getFilter(column: number) {
- return cy.get(`#table tbody tr th.dash-filter.column-${column}`);
+ static getFilter(column: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-filter.column-${column}`);
  }
 
- static getFilterById(column: string) {
- return cy.get(`#table tbody tr th.dash-filter[data-dash-column="${column}"]`);
+ static getFilterById(column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-filter[data-dash-column="${column}"]`);
  }
 
- static getHeader(row: number, column: number) {
- return cy.get(`#table tbody tr th.dash-header.column-${column}`).eq(row);
+ static getHeader(row: number, column: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header.column-${column}`).eq(row);
  }
 
- static getHeaderById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"]`).eq(row);
+ static getHeaderById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"]`).eq(row);
  }
 
  static focusCell(row: number, column: number) {
@@ -33,52 +54,52 @@ export default class DashTable {
  return this.getCellById(row, column).click().scrollIntoView();
  }
 
- static clearColumnById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"] .column-header--clear`).eq(row).click();
+ static clearColumnById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"] .column-header--clear`).eq(row).click();
  }
 
- static deleteColumnById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"] .column-header--delete`).eq(row).click();
+ static deleteColumnById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"] .column-header--delete`).eq(row).click();
  }
 
- static hideColumnById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"] .column-header--hide`).eq(row).click();
+ static hideColumnById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"] .column-header--hide`).eq(row).click();
  }
 
- static getSelectColumnById(row: number, column: string) {
- return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"] .column-header--select input`).eq(row);
+ static getSelectColumnById(row: number, column: string, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr th.dash-header[data-dash-column="${column}"] .column-header--select input`).eq(row);
  }
 
  static selectColumnById(row: number, column: string) {
  return DashTable.getSelectColumnById(row, column).click();
  }
 
- static getDelete(row: number) {
- return cy.get(`#table tbody tr td.dash-delete-cell`).eq(row);
+ static getDelete(row: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr td.dash-delete-cell`).eq(row);
  }
 
- static getSelect(row: number) {
- return cy.get(`#table tbody tr td.dash-select-cell`).eq(row);
+ static getSelect(row: number, editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody tr td.dash-select-cell`).eq(row);
  }
 
- static getActiveCell() {
- return cy.get(`#table tbody td.focused`);
+ static getActiveCell(editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody td.focused`);
  }
 
- static getSelectedCells() {
- return cy.get(`#table tbody td.cell--selected`);
+ static getSelectedCells(editable: State = State.Ready) {
+ return cy.get(`#table ${getSelector(editable)} tbody td.cell--selected`);
  }
 
  static scrollToTop() {
  cy.get(`.cell.cell-1-1.dash-fixed-content`).invoke(`outerHeight`).then(height => {
  cy.scrollTo(0, -height);
- })
+ });
  }
 
  static scrollToBottom() {
  cy.get(`.cell.cell-1-1.dash-fixed-content`).invoke(`outerHeight`).then(height => {
  cy.scrollTo(0, height);
- })
+ });
  }
 
  static getCellInLastRowOfColumn(column: number) {