From dab45228314b3fe23c8e475ed11d4a10ce9cd62b Mon Sep 17 00:00:00 2001 From: alexcjohnson Date: Tue, 3 Sep 2019 21:23:17 -0400 Subject: [PATCH 1/4] add persistence props and transform --- src/dash-table/dash/DataTable.js | 59 ++++++++++++++++++++++++++++++-- 1 file changed, 57 insertions(+), 2 deletions(-) diff --git a/src/dash-table/dash/DataTable.js b/src/dash-table/dash/DataTable.js index 2aabb0604..4de6ddf39 100644 --- a/src/dash-table/dash/DataTable.js +++ b/src/dash-table/dash/DataTable.js @@ -101,7 +101,18 @@ export const defaultProps = { style_data_conditional: [], style_filter_conditional: [], style_header_conditional: [], - virtualization: false + virtualization: false, + + persisted_props: [ + 'columns', + // data is not included by default + 'filter_query', + 'hidden_columns', + 'selected_columns', + 'selected_rows', + 'sort_by' + ], + persistence_type: 'local' }; export const propTypes = { @@ -1206,7 +1217,51 @@ export const propTypes = { */ derived_virtual_selected_row_ids: PropTypes.arrayOf( PropTypes.oneOfType([PropTypes.string, PropTypes.number]) - ) + ), + + /** + * Used to allow user interactions in this component to be persisted when + * the component - or the page - is refreshed. If `persisted` is truthy and + * hasn't changed from its previous value, any `persisted_props` that the + * user has changed while using the app will keep those changes, as long as + * the new prop value also matches what was given originally. + * Used in conjunction with `persistence` and `persisted_props`. + */ + persistence: PropTypes.oneOfType( + [PropTypes.bool, PropTypes.string, PropTypes.number] + ), + + /** + * Properties whose user interactions will persist after refreshing the + * component or the page. + */ + persisted_props: PropTypes.arrayOf( + PropTypes.oneOf([ + 'columns', + 'data', + 'filter_query', + 'hidden_columns', + 'selected_columns', + 'selected_rows', + 'sort_by' + ]) + ), + + /** + * Where persisted user changes will be stored: + * memory: only kept in memory, reset on page refresh. + * local: window.localStorage, data is kept after the browser quit. + * session: window.sessionStorage, data is cleared once the browser quit. + */ + persistence_type: PropTypes.oneOf(['local', 'session', 'memory']) +}; + +DataTable.persistenceTransforms = { + columns: { + extract: propValue => R.pluck('name', propValue), + apply: (storedValue, propValue) => + R.zipWith(R.assoc('name'), storedValue, propValue) + } }; DataTable.defaultProps = defaultProps; From 7953f89468adad821828421fe7d516f6aa4910e1 Mon Sep 17 00:00:00 2001 From: alexcjohnson Date: Sat, 7 Sep 2019 21:21:24 -0400 Subject: [PATCH 2/4] persistence: columns->columns.name --- src/dash-table/dash/DataTable.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/dash-table/dash/DataTable.js b/src/dash-table/dash/DataTable.js index 4de6ddf39..31d2b4575 100644 --- a/src/dash-table/dash/DataTable.js +++ b/src/dash-table/dash/DataTable.js @@ -104,7 +104,7 @@ export const defaultProps = { virtualization: false, persisted_props: [ - 'columns', + 'columns.name', // data is not included by default 'filter_query', 'hidden_columns', @@ -1237,7 +1237,7 @@ export const propTypes = { */ persisted_props: PropTypes.arrayOf( PropTypes.oneOf([ - 'columns', + 'columns.name', 'data', 'filter_query', 'hidden_columns', @@ -1258,9 +1258,11 @@ export const propTypes = { DataTable.persistenceTransforms = { columns: { - extract: propValue => R.pluck('name', propValue), - apply: (storedValue, propValue) => - R.zipWith(R.assoc('name'), storedValue, propValue) + name: { + extract: propValue => R.pluck('name', propValue), + apply: (storedValue, propValue) => + R.zipWith(R.assoc('name'), storedValue, propValue) + } } }; From 460c9dbf9447183b4ecaf4dbef284ee9fbd58b30 Mon Sep 17 00:00:00 2001 From: alexcjohnson Date: Mon, 16 Sep 2019 09:36:21 -0400 Subject: [PATCH 3/4] added >> fixed --- CHANGELOG.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 75ac544ed..b31ca58e2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,11 @@ All notable changes to this project will be documented in this file. This project adheres to [Semantic Versioning](http://semver.org/). ## [Unreleased] +### Added +[#319](https://github.com/plotly/dash-table/issues/319) +- New 'loading_state' prop that contains information about which prop, if any, is being computed. +- Table no longer allows for editing while the `data` prop is loading. + ### Fixed [#578](https://github.com/plotly/dash-table/pull/578) - Fix [#576](https://github.com/plotly/dash-table/issues/576), editing column names or deleting columns while other columns are hidden causing the hidden columns to be lost. @@ -26,11 +31,6 @@ multi-line & ellipsis with `style_data` and other style props. [#583](https://github.com/plotly/dash-table/issues/583) - Fix regression when editing the content of a cell in a scrolled virtualized table -### Added -[#319](https://github.com/plotly/dash-table/issues/319) -- New 'loading_state' prop that contains information about which prop, if any, is being computed. -- Table no longer allows for editing while the `data` prop is loading. - ## [4.2.0] - 2019-08-27 ### Added [#317](https://github.com/plotly/dash-table/issues/317) From 630f49ba582c9f4fdba04a30aab1cdbdf8a91cdc Mon Sep 17 00:00:00 2001 From: alexcjohnson Date: Mon, 16 Sep 2019 09:42:04 -0400 Subject: [PATCH 4/4] changelog for persistence props --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index b31ca58e2..3ec5801b4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,9 @@ This project adheres to [Semantic Versioning](http://semver.org/). ## [Unreleased] ### Added +[#566](https://github.com/plotly/dash-table/pull/566) +- Support persisting user edits when the component or the page is reloaded. New props are `persistence`, `persistence_type`, and `persisted_props`. Set `persistence` to a truthy value to enable, the other two modify persistence behavior. See [plotly/dash#903](https://github.com/plotly/dash/pull/903) for more details. + [#319](https://github.com/plotly/dash-table/issues/319) - New 'loading_state' prop that contains information about which prop, if any, is being computed. - Table no longer allows for editing while the `data` prop is loading.