Allow renaming single-row headers

CHANGELOG.md

@@ -2,11 +2,13 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 ## [Unreleased]
-### Fixed 
-[#314](https://github.com/plotly/dash-table/issues/533)
+### Fixed
+[#533](https://github.com/plotly/dash-table/issues/533)
 - Fixed problem clearing one column shifting everything to the left and
 leaving the last column blank
 - Add merge_duplicate_headers prop to correct `export_format: display` behaviour.
+[#549](https://github.com/plotly/dash-table/issues/549)
+- Fixed renaming of single-row headers in the GUI
 
 ## [4.1.0] - 2019-08-05
 ### Added

demo/AppMode.ts

@@ -24,6 +24,7 @@ export enum AppMode {
     MergeDuplicateHeaders = 'mergeDuplicateHeaders',
     ReadOnly = 'readonly',
     ColumnsInSpace = 'columnsInSpace',
+    SingleHeaders = 'singleHeaders',
     TaleOfTwoTables = 'taleOfTwoTables',
     Tooltips = 'tooltips',
     Typed = 'typed',
@@ -193,6 +194,18 @@ function getTypedState() {
     return state;
 }
 
+function getSingleHeaderState() {
+    const state = getDefaultState();
+
+    R.forEach(column => {
+        if (Array.isArray(column.name)) {
+            column.name = column.name[column.name.length - 1];
+        }
+    }, state.tableProps.columns || []);
+
+    return state;
+}
+
 function getActionableState() {
     const state = getDefaultState();
     state.tableProps.filter_action = TableAction.Native;
@@ -378,6 +391,8 @@ function getState() {
             return getVirtualizedState();
         case AppMode.Typed:
             return getTypedState();
+        case AppMode.SingleHeaders:
+            return getSingleHeaderState();
         case AppMode.TaleOfTwoTables:
         case AppMode.Default:
         default:

src/dash-table/utils/actions.js

@@ -96,9 +96,9 @@ export function changeColumnHeader(column, columns, headerRowIndex, mergeDuplica
     );
 
     R.range(groupIndexFirst, groupIndexLast + 1).map(i => {
-        let namePath;
+        const namePath = [i, 'name'];
         if (R.type(newColumns[i].name) === 'Array') {
-            namePath = [i, 'name', headerRowIndex];
+            namePath.push(headerRowIndex);
         }
         newColumns = R.set(R.lensPath(namePath), newColumnName, newColumns);
     });

tests/cypress/tests/standalone/edit_headers.ts

@@ -2,18 +2,13 @@ import DashTable from 'cypress/DashTable';
 import { AppMode } from 'demo/AppMode';
 
 describe(`edit, mode=${AppMode.Typed}`, () => {
-    beforeEach(() => {
-        cy.visit(`http://localhost:8080?mode=${AppMode.Typed}`);
-        DashTable.toggleScroll(false);
-    });
-
     describe(`edit headers, mode=${AppMode.Typed}`, () => {
         beforeEach(() => {
             cy.visit(`http://localhost:8080?mode=${AppMode.Typed}`);
             DashTable.toggleScroll(false);
         });
 
-        it('changing the column 0 header should not change any column 0 headers below it  ', () => {
+        it('changing the column 0 header should not change any column 0 headers below it', () => {
             cy.window().then((win: any) => {
                 cy.stub(win, 'prompt').returns('Hello');
             });
@@ -37,7 +32,7 @@ describe(`edit, mode=${AppMode.Typed}`, () => {
             cy.visit(`http://localhost:8080?mode=${AppMode.MergeDuplicateHeaders}`);
             DashTable.toggleScroll(false);
         });
-        it('changing the column 0 header should not change any column 0 headers below it  ', () => {
+        it('changing the column 0 header should not change any column 0 headers below it', () => {
             cy.window().then((win: any) => {
                 cy.stub(win, 'prompt').returns('Otter');
             });
@@ -55,4 +50,26 @@ describe(`edit, mode=${AppMode.Typed}`, () => {
             cy.get('.dash-header.column-6 > div > span:last-child').should('have.html', ``);
         });
     });
-});
+
+    describe(`edit headers, mode=${AppMode.SingleHeaders}`, () => {
+        beforeEach(() => {
+            cy.visit(`http://localhost:8080?mode=${AppMode.SingleHeaders}`);
+            DashTable.toggleScroll(false);
+        });
+        it('allows changing single-row column 0 header', () => {
+            cy.window().then((win: any) => {
+                cy.stub(win, 'prompt').returns('Russia');
+            });
+            cy.get('.dash-header.column-0 .column-header--edit').eq(0).click();
+            cy.get('.dash-header.column-0 > div > span:last-child').should('have.html', 'Russia');
+        });
+        it('changing the column 1 header should not change any other headers', () => {
+            cy.window().then((win: any) => {
+                cy.stub(win, 'prompt').returns('Alaska');
+            });
+            cy.get('.dash-header.column-1 .column-header--edit').eq(0).click();
+            cy.get('.dash-header.column-0 > div > span:last-child').should('have.html', 'rows');
+            cy.get('.dash-header.column-1 > div > span:last-child').should('have.html', 'Alaska');
+        });
+    });
+});