diff --git a/CHANGELOG.md b/CHANGELOG.md index 75ac544ed..3ec5801b4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. 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. + ### 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 +34,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) diff --git a/src/dash-table/dash/DataTable.js b/src/dash-table/dash/DataTable.js index a5ece8486..703ebc7a3 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.name', + // data is not included by default + 'filter_query', + 'hidden_columns', + 'selected_columns', + 'selected_rows', + 'sort_by' + ], + persistence_type: 'local' }; export const propTypes = { @@ -1224,8 +1235,53 @@ export const propTypes = { * Holds the name of the component that is loading */ component_name: PropTypes.string - }) + }), + + /** + * 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.name', + '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: { + name: { + extract: propValue => R.pluck('name', propValue), + apply: (storedValue, propValue) => + R.zipWith(R.assoc('name'), storedValue, propValue) + } + } }; DataTable.defaultProps = defaultProps;