issue175 editable column

CHANGELOG.md

@@ -426,4 +426,8 @@ Derived properties allow the component to expose complex state that can be usefu
 
 ## RC14 - Rename sorting_settings columnId -> column_id
 
-    Issue: https://github.com/plotly/dash-table/issues/171
+    Issue: https://github.com/plotly/dash-table/issues/171
+
+## RC15 - Column 'editable' takes precedence over table 'editable'
+
+    Issue: https://github.com/plotly/dash-table/issues/175

dash_table/metadata.json

@@ -41,7 +41,7 @@
               },
               "editable": {
                 "name": "bool",
-                "description": "There are two `editable` flags in the table.\nThis is the  column-level editable flag and there is\nalso the table-level `editable` flag.\n\nThese flags determine whether the contents of the table\nare editable or not.\n\nIn order for this property to apply, the table-level `editable`\nflag must be `True`. That is, if you want to only make a single\ncolumn editable, then you must set the table-level `editable`\nflag to `True`, the particular column `editable` flag to True,\nand all of the column-level editable flags to `False`.\n\nNOTE - This behavior may change in the future.\nSubscribe to [https://github.com/plotly/dash-table/issues/175](https://github.com/plotly/dash-table/issues/175)\nfor more information.",
+                "description": "There are two `editable` flags in the table.\nThis is the  column-level editable flag and there is\nalso the table-level `editable` flag.\n\nThese flags determine whether the contents of the table\nare editable or not.\n\nIf the column-level `editable` flag is set it overrides\nthe table-level `editable` flag for that column.",
                 "required": false
               },
               "editable_name": {
@@ -227,7 +227,7 @@
           "name": "bool"
         },
         "required": false,
-        "description": "If True, then the data in all of the cells is editable.\nWhen `editable` is True, particular columns can be made\nuneditable by setting `editable` to `False` inside the `columns`\nproperty.\n\nNOTE - This behavior may change in the future, subscribe to\n[https://github.com/plotly/dash-table/issues/175](https://github.com/plotly/dash-table/issues/175)\nfor more details.",
+        "description": "If True, then the data in all of the cells is editable.\nWhen `editable` is True, particular columns can be made\nuneditable by setting `editable` to `False` inside the `columns`\nproperty.\n\nIf False, then the data in all of the cells is uneditable.\nWhen `editable` is False, particular columns can be made\neditable by setting `editable` to `True` inside the `columns`\nproperty.",
         "defaultValue": {
           "value": "false",
           "computed": false

dash_table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-table",
-  "version": "3.1.0rc14",
+  "version": "3.1.0rc15",
   "description": "Dash table",
   "main": "build/index.js",
   "scripts": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-table",
-  "version": "3.1.0rc14",
+  "version": "3.1.0rc15",
   "description": "Dash table",
   "main": "build/index.js",
   "scripts": {

src/dash-table/Table.js

@@ -133,15 +133,8 @@ export const propTypes = {
          * These flags determine whether the contents of the table
          * are editable or not.
          *
-         * In order for this property to apply, the table-level `editable`
-         * flag must be `True`. That is, if you want to only make a single
-         * column editable, then you must set the table-level `editable`
-         * flag to `True`, the particular column `editable` flag to True,
-         * and all of the column-level editable flags to `False`.
-         *
-         * NOTE - This behavior may change in the future.
-         * Subscribe to [https://github.com/plotly/dash-table/issues/175](https://github.com/plotly/dash-table/issues/175)
-         * for more information.
+         * If the column-level `editable` flag is set it overrides
+         * the table-level `editable` flag for that column.
          */
         editable: PropTypes.bool,
 
@@ -282,9 +275,10 @@ export const propTypes = {
      * uneditable by setting `editable` to `False` inside the `columns`
      * property.
      *
-     * NOTE - This behavior may change in the future, subscribe to
-     * [https://github.com/plotly/dash-table/issues/175](https://github.com/plotly/dash-table/issues/175)
-     * for more details.
+     * If False, then the data in all of the cells is uneditable.
+     * When `editable` is False, particular columns can be made
+     * editable by setting `editable` to `True` inside the `columns`
+     * property.
      */
     editable: PropTypes.bool,
 

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

@@ -5,7 +5,6 @@ import {
     KEY_CODES,
     isCtrlMetaKey,
     isCtrlDown,
-    isMetaKey,
     isNavKey
 } from 'dash-table/utils/unicode';
 import { selectionCycle } from 'dash-table/utils/navigation';
@@ -170,11 +169,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps,
 
     handleKeyDown = (e: any) => {
         const {
-            active_cell,
-            columns,
             setProps,
-            is_focused,
-            editable
+            is_focused
         } = this.props;
 
         Logger.trace(`handleKeyDown: ${e.key}`);
@@ -207,7 +203,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps,
             return;
         }
 
-        if(!is_focused &&
+        if (!is_focused &&
             isNavKey(e.keyCode)
         ) {
             this.switchCell(e);
@@ -230,14 +226,6 @@ export default class ControlledTable extends PureComponent<ControlledTableProps,
             e.keyCode === KEY_CODES.DELETE
         ) {
             this.deleteCell(e);
-        } else if (
-            // if we have any non-meta key enter editable mode
-
-            !is_focused &&
-            isEditable(editable, columns[active_cell[1]]) &&
-            !isMetaKey(e.keyCode)
-        ) {
-            // setProps({ is_focused: true });
         }
 
         return;
@@ -377,7 +365,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps,
         );
 
         realCells.forEach(cell => {
-            if (isEditable(editable, columns[cell[1]])) {
+            if (isEditable(editable, columns[cell[1]].editable)) {
                 newData = R.set(
                     R.lensPath([cell[0], columns[cell[1]].id]),
                     '',

src/dash-table/derived/cell/inputs.tsx

@@ -44,7 +44,7 @@ const getter = (
                 clearable={column.clearable}
                 datum={datum}
                 dropdown={dropdown}
-                editable={isEditable(editable, column)}
+                editable={isEditable(editable, column.editable)}
                 focused={isFocused}
                 property={column.id}
                 tableId={tableId}

src/dash-table/derived/cell/isEditable.ts

@@ -1,6 +1,6 @@
-import { IVisibleColumn } from 'dash-table/components/Table/props';
-
 export default (
-    editable: boolean,
-    column: IVisibleColumn
-): boolean => editable && (column.editable === undefined || column.editable);
+    isEditableTable: boolean,
+    isEditableColumn: boolean | undefined
+): boolean => isEditableColumn === undefined ?
+        isEditableTable :
+        isEditableColumn;

src/dash-table/derived/cell/wrappers.tsx

@@ -36,7 +36,7 @@ function getter(
                     'dash-cell' +
                     ` column-${columnIndex}` +
                     (active ? ' focused' : '') +
-                    (!isEditable(editable, column) ? ' cell--uneditable' : '') +
+                    (!isEditable(editable, column.editable) ? ' cell--uneditable' : '') +
                     (selected ? ' cell--selected' : '') +
                     (column.type === ColumnType.Dropdown ? ' dropdown' : '');
 

src/dash-table/utils/TableClipboardHelper.ts

@@ -94,7 +94,7 @@ export default class TableClipboardHelper {
 
                 const jOffset = activeCell[1] + j;
                 const col = newColumns[jOffset];
-                if (col && isEditable(true, col)) {
+                if (col && isEditable(true, col.editable)) {
                     newData = R.set(
                         R.lensPath([iRealCell, col.id]),
                         cell,

tests/cypress/tests/unit/isEditable_test.ts

@@ -0,0 +1,27 @@
+import isEditable from 'dash-table/derived/cell/isEditable';
+
+describe('isEditable', () => {
+    it('returns false if table=false, column=false', () =>
+        expect(isEditable(false, false)).to.equal(false)
+    );
+
+    it('returns false if table=false, column=undefined', () =>
+        expect(isEditable(false, undefined)).to.equal(false)
+    );
+
+    it('returns true if table=false, column=true', () =>
+        expect(isEditable(false, true)).to.equal(true)
+    );
+
+    it('returns false if table=true, column=false', () =>
+        expect(isEditable(true, false)).to.equal(false)
+    );
+
+    it('returns true if table=true, column=undefined', () =>
+        expect(isEditable(true, undefined)).to.equal(true)
+    );
+
+    it('returns true if table=true, column=true', () =>
+        expect(isEditable(true, true)).to.equal(true)
+    );
+});