diff --git a/CHANGELOG.md b/CHANGELOG.md index 7a578b5f3..252bb2f53 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/demo/AppMode.ts b/demo/AppMode.ts index 0dd4715aa..f87d20621 100644 --- a/demo/AppMode.ts +++ b/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: diff --git a/src/dash-table/utils/actions.js b/src/dash-table/utils/actions.js index 9d24e8997..c08ada557 100644 --- a/src/dash-table/utils/actions.js +++ b/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); }); diff --git a/tests/cypress/tests/standalone/edit_headers.ts b/tests/cypress/tests/standalone/edit_headers.ts index 6d7e27237..21c25f844 100644 --- a/tests/cypress/tests/standalone/edit_headers.ts +++ b/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', ``); }); }); -}); \ No newline at end of file + + 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'); + }); + }); +});