persistence props and transform

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)

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;