issue175 editable column

CHANGELOG.md

@@ -417,4 +417,8 @@ Derived properties allow the component to expose complex state that can be usefu
 
 ## RC12 - Rename selected_cell -> selected_cells
 
-    Issue: https://github.com/plotly/dash-table/issues/177
+    Issue: https://github.com/plotly/dash-table/issues/177
+
+## RC13 - Column 'editable' takes precedence over table 'editable'
+
+    Issue: https://github.com/plotly/dash-table/issues/175

dash_table/package.json

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

package.json

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

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

@@ -210,7 +210,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps,
         if (
             e.keyCode === KEY_CODES.ENTER &&
             !is_focused &&
-            isEditable(editable, columns[active_cell[1]])
+            isEditable(editable, columns[active_cell[1]].editable)
         ) {
             setProps({ is_focused: true });
             return;
@@ -237,7 +237,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps,
             // if we have any non-meta key enter editable mode
 
             !this.props.is_focused &&
-            isEditable(editable, columns[active_cell[1]]) &&
+            isEditable(editable, columns[active_cell[1]].editable) &&
             !isMetaKey(e.keyCode)
         ) {
             setProps({ is_focused: true });
@@ -380,7 +380,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);
+    editableColumn: boolean | undefined
+): boolean => editableColumn === undefined ?
+        editable :
+        editableColumn;

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,

src/dash-table/utils/applyClipboardToData.ts

@@ -0,0 +1,86 @@
+import * as R from 'ramda';
+
+import Logger from 'core/Logger';
+
+import { ActiveCell, Columns, Data, ColumnType } from 'dash-table/components/Table/props';
+import isEditable from 'dash-table/derived/cell/isEditable';
+
+export default (
+    values: string[][],
+    activeCell: ActiveCell,
+    derived_viewport_indices: number[],
+    columns: Columns,
+    data: Data,
+    overflowColumns: boolean = true,
+    overflowRows: boolean = true
+): { data: Data, columns: Columns } | void => {
+    if (!overflowRows) {
+        Logger.debug(`Clipboard -- Sorting or filtering active, do not create new rows`);
+    }
+
+    if (!overflowColumns) {
+        Logger.debug(`Clipboard -- Do not create new columns`);
+    }
+
+    let newData = data;
+    const newColumns = columns;
+
+    if (overflowColumns && values[0].length + activeCell[1] >= columns.length) {
+        for (
+            let i = columns.length;
+            i < values[0].length + activeCell[1];
+            i++
+        ) {
+            newColumns.push({
+                id: `Column ${i + 1}`,
+                name: `Column ${i + 1}`,
+                type: ColumnType.Text
+            });
+            newData.forEach(row => (row[`Column ${i}`] = ''));
+        }
+    }
+
+    const realActiveRow = derived_viewport_indices[activeCell[0]];
+    if (overflowRows && values.length + realActiveRow >= data.length) {
+        const emptyRow: any = {};
+        columns.forEach(c => (emptyRow[c.id] = ''));
+        newData = R.concat(
+            newData,
+            R.repeat(
+                emptyRow,
+                values.length + realActiveRow - data.length
+            )
+        );
+    }
+
+    const lastEntry = derived_viewport_indices.slice(-1)[0] || 0;
+    const viewportSize = derived_viewport_indices.length;
+
+    values.forEach((row: string[], i: number) =>
+        row.forEach((cell: string, j: number) => {
+            const viewportIndex = activeCell[0] + i;
+
+            let iRealCell: number | undefined = viewportSize > viewportIndex ?
+                derived_viewport_indices[viewportIndex] :
+                overflowRows ?
+                    lastEntry + (viewportIndex - viewportSize + 1) :
+                    undefined;
+
+            if (iRealCell === undefined) {
+                return;
+            }
+
+            const jOffset = activeCell[1] + j;
+            const col = newColumns[jOffset];
+            if (col && isEditable(true, col.editable)) {
+                newData = R.set(
+                    R.lensPath([iRealCell, col.id]),
+                    cell,
+                    newData
+                );
+            }
+        })
+    );
+
+    return { data: newData, columns: newColumns };
+};

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)
+    );
+});