Skip to content
This repository was archived by the owner on Jun 4, 2024. It is now read-only.

Commit 4a10d6a

Browse files
Marc-Andre-RivetMarc-Andre-Rivet
authored
Issue 524 - Readonly dropdown column content (#530)
1 parent bb290b6 commit 4a10d6a

File tree

8 files changed

+112
-24
lines changed

8 files changed

+112
-24
lines changed

‎CHANGELOG.md

+6-3
Original file line numberDiff line numberDiff line change
@@ -26,16 +26,19 @@ This project adheres to [Semantic Versioning](http://semver.org/).
2626
- Additionally clearing the column will reset the filter for the affected column(s)
2727

2828
[#318](https://github.com/plotly/dash-table/issues/318)
29-
- Headers are included when copying from the table to different
30-
tabs and elsewhere. They are ignored when copying from the table onto itself and
31-
between two tables within the same tab.
29+
- Headers are included when copying from the table to different
30+
tabs and elsewhere. They are ignored when copying from the table onto itself and
31+
between two tables within the same tab.
3232

3333
### Changed
3434
[#497](https://github.com/plotly/dash-table/pull/497)
3535
- Like for clearing above, deleting through the `x` action will also
3636
reset the filter for the affected column(s)
3737

3838
### Fixed
39+
[#524](https://github.com/plotly/dash-table/issues/524)
40+
- Fixed readonly dropdown cells content (display label, not value)
41+
3942
[#259](https://github.com/plotly/dash-table/issues/259)
4043
- Fixed columns `sticky` on Safari
4144

‎demo/AppMode.ts

+8-1
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,14 @@ function getBaseTableProps(mock: IDataMock) {
5656
bbb: {
5757
clearable: true,
5858
options: ['Humid', 'Wet', 'Snowy', 'Tropical Beaches'].map(i => ({
59-
label: i,
59+
label: `label: ${i}`,
60+
value: i
61+
}))
62+
},
63+
'bbb-readonly': {
64+
clearable: true,
65+
options: ['Humid', 'Wet', 'Snowy', 'Tropical Beaches'].map(i => ({
66+
label: `label: ${i}`,
6067
value: i
6168
}))
6269
}

‎demo/data.ts

+2
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ export const generateMockData = (rows: number) => unpackIntoColumnsAndData([
6868
id: 'bbb-readonly',
6969
name: ['', 'Weather', 'Climate-RO'],
7070
type: ColumnType.Text,
71+
presentation: 'dropdown',
7172
editable: false,
7273
data: gendata(
7374
i => ['Humid', 'Wet', 'Snowy', 'Tropical Beaches'][i % 4],
@@ -86,6 +87,7 @@ export const generateMockData = (rows: number) => unpackIntoColumnsAndData([
8687
id: 'aaa-readonly',
8788
name: ['', 'Weather', 'Temperature-RO'],
8889
type: ColumnType.Numeric,
90+
presentation: 'dropdown',
8991
editable: false,
9092
data: gendata(i => i + 1, rows)
9193
}

‎src/dash-table/derived/cell/contents.tsx

+17-3
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ const mapRow = R.addIndex<IColumn, JSX.Element>(R.map);
2626

2727
enum CellType {
2828
Dropdown,
29+
DropdownLabel,
2930
Input,
3031
Label
3132
}
@@ -40,7 +41,7 @@ function getCellType(
4041
case Presentation.Input:
4142
return (!active || !editable) ? CellType.Label : CellType.Input;
4243
case Presentation.Dropdown:
43-
return (!dropdown || !editable) ? CellType.Label : CellType.Dropdown;
44+
return (!dropdown || !editable) ? CellType.DropdownLabel : CellType.Dropdown;
4445
default:
4546
return (!active || !editable) ? CellType.Label : CellType.Input;
4647
}
@@ -124,7 +125,9 @@ class Contents {
124125
'dash-cell-value'
125126
].join(' ');
126127

127-
switch (getCellType(active, column.editable, dropdown && dropdown.options, column.presentation)) {
128+
const cellType = getCellType(active, column.editable, dropdown && dropdown.options, column.presentation);
129+
130+
switch (cellType) {
128131
case CellType.Dropdown:
129132
return (<CellDropdown
130133
key={`column-${columnIndex}`}
@@ -148,15 +151,26 @@ class Contents {
148151
type={column.type}
149152
value={datum[column.id]}
150153
/>);
154+
case CellType.DropdownLabel:
151155
case CellType.Label:
152156
default:
157+
const resolvedValue = cellType === CellType.DropdownLabel ?
158+
this.resolveDropdownLabel(dropdown, datum[column.id]) :
159+
formatters[columnIndex](datum[column.id]);
160+
153161
return (<CellLabel
154162
className={className}
155163
key={`column-${columnIndex}`}
156164
onClick={this.handlers(Handler.Click, rowIndex, columnIndex)}
157165
onDoubleClick={this.handlers(Handler.DoubleClick, rowIndex, columnIndex)}
158-
value={formatters[columnIndex](datum[column.id])}
166+
value={resolvedValue}
159167
/>);
160168
}
161169
}
170+
171+
private resolveDropdownLabel(dropdown: IDropdown | undefined, value: any) {
172+
const dropdownValue = dropdown && dropdown.options && dropdown.options.find(option => option.value === value);
173+
174+
return dropdownValue ? dropdownValue.label : value;
175+
}
162176
}

‎tests/cypress/tests/standalone/filtering_test.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ describe('filter', () => {
101101
DashTable.getFilterById('ccc').click();
102102

103103
DashTable.getFilterById('bbb').within(() => cy.get('input').should('have.value', 'Tr'));
104-
DashTable.getCellById(0, 'bbb-readonly').within(() => cy.get('.dash-cell-value').should('have.html', 'Tropical Beaches'));
104+
DashTable.getCellById(0, 'bbb-readonly').within(() => cy.get('.dash-cell-value').should('have.html', 'label: Tropical Beaches'));
105105
});
106106

107107
it('filters `Numeric` columns with `equal` without operator', () => {

‎tests/cypress/tests/standalone/readonly_sorting_test.ts

+18-8
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,25 @@ Object.values([AppMode.ReadOnly]).forEach(mode => {
1010
});
1111

1212
it('can sort', () => {
13-
DashTable.getCell(0, 6).within(() => cy.get('.dash-cell-value').should('have.html', 'Wet'));
14-
DashTable.getCell(1, 6).within(() => cy.get('.dash-cell-value').should('have.html', 'Snowy'));
15-
DashTable.getCell(2, 6).within(() => cy.get('.dash-cell-value').should('have.html', 'Tropical Beaches'));
16-
DashTable.getCell(3, 6).within(() => cy.get('.dash-cell-value').should('have.html', 'Humid'));
13+
DashTable.getCell(0, 6).within(() => cy.get('.dash-cell-value').should('have.html', 'label: Wet'));
14+
DashTable.getCell(1, 6).within(() => cy.get('.dash-cell-value').should('have.html', 'label: Snowy'));
15+
DashTable.getCell(2, 6).within(() => cy.get('.dash-cell-value').should('have.html', 'label: Tropical Beaches'));
16+
DashTable.getCell(3, 6).within(() => cy.get('.dash-cell-value').should('have.html', 'label: Humid'));
17+
18+
DashTable.getCell(0, 7).within(() => cy.get('.dash-cell-value').should('have.html', 'label: Wet'));
19+
DashTable.getCell(1, 7).within(() => cy.get('.dash-cell-value').should('have.html', 'label: Snowy'));
20+
DashTable.getCell(2, 7).within(() => cy.get('.dash-cell-value').should('have.html', 'label: Tropical Beaches'));
21+
DashTable.getCell(3, 7).within(() => cy.get('.dash-cell-value').should('have.html', 'label: Humid'));
1722
cy.get('tr th.column-6 .sort').last().click();
18-
DashTable.getCell(0, 6).within(() => cy.get('.dash-cell-value').should('have.html', 'Humid'));
19-
DashTable.getCell(1, 6).within(() => cy.get('.dash-cell-value').should('have.html', 'Humid'));
20-
DashTable.getCell(2, 6).within(() => cy.get('.dash-cell-value').should('have.html', 'Humid'));
21-
DashTable.getCell(3, 6).within(() => cy.get('.dash-cell-value').should('have.html', 'Humid'));
23+
DashTable.getCell(0, 6).within(() => cy.get('.dash-cell-value').should('have.html', 'label: Humid'));
24+
DashTable.getCell(1, 6).within(() => cy.get('.dash-cell-value').should('have.html', 'label: Humid'));
25+
DashTable.getCell(2, 6).within(() => cy.get('.dash-cell-value').should('have.html', 'label: Humid'));
26+
DashTable.getCell(3, 6).within(() => cy.get('.dash-cell-value').should('have.html', 'label: Humid'));
27+
28+
DashTable.getCell(0, 7).within(() => cy.get('.dash-cell-value').should('have.html', 'label: Humid'));
29+
DashTable.getCell(1, 7).within(() => cy.get('.dash-cell-value').should('have.html', 'label: Humid'));
30+
DashTable.getCell(2, 7).within(() => cy.get('.dash-cell-value').should('have.html', 'label: Humid'));
31+
DashTable.getCell(3, 7).within(() => cy.get('.dash-cell-value').should('have.html', 'label: Humid'));
2232
});
2333
});
2434
});

‎tests/cypress/tests/standalone/readwrite_sorting_test.ts

+18-8
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,25 @@ Object.values(ReadWriteModes).forEach(mode => {
1010
});
1111

1212
it('can sort', () => {
13-
DashTable.getCell(0, 6).within(() => cy.get('.Select-value-label').should('have.html', 'Wet'));
14-
DashTable.getCell(1, 6).within(() => cy.get('.Select-value-label').should('have.html', 'Snowy'));
15-
DashTable.getCell(2, 6).within(() => cy.get('.Select-value-label').should('have.html', 'Tropical Beaches'));
16-
DashTable.getCell(3, 6).within(() => cy.get('.Select-value-label').should('have.html', 'Humid'));
13+
DashTable.getCell(0, 6).within(() => cy.get('.Select-value-label').should('have.html', 'label: Wet'));
14+
DashTable.getCell(1, 6).within(() => cy.get('.Select-value-label').should('have.html', 'label: Snowy'));
15+
DashTable.getCell(2, 6).within(() => cy.get('.Select-value-label').should('have.html', 'label: Tropical Beaches'));
16+
DashTable.getCell(3, 6).within(() => cy.get('.Select-value-label').should('have.html', 'label: Humid'));
17+
18+
DashTable.getCell(0, 7).within(() => cy.get('.dash-cell-value').should('have.html', 'label: Wet'));
19+
DashTable.getCell(1, 7).within(() => cy.get('.dash-cell-value').should('have.html', 'label: Snowy'));
20+
DashTable.getCell(2, 7).within(() => cy.get('.dash-cell-value').should('have.html', 'label: Tropical Beaches'));
21+
DashTable.getCell(3, 7).within(() => cy.get('.dash-cell-value').should('have.html', 'label: Humid'));
1722
cy.get('tr th.column-6 .sort').last().click();
18-
DashTable.getCell(0, 6).within(() => cy.get('.Select-value-label').should('have.html', 'Humid'));
19-
DashTable.getCell(1, 6).within(() => cy.get('.Select-value-label').should('have.html', 'Humid'));
20-
DashTable.getCell(2, 6).within(() => cy.get('.Select-value-label').should('have.html', 'Humid'));
21-
DashTable.getCell(3, 6).within(() => cy.get('.Select-value-label').should('have.html', 'Humid'));
23+
DashTable.getCell(0, 6).within(() => cy.get('.Select-value-label').should('have.html', 'label: Humid'));
24+
DashTable.getCell(1, 6).within(() => cy.get('.Select-value-label').should('have.html', 'label: Humid'));
25+
DashTable.getCell(2, 6).within(() => cy.get('.Select-value-label').should('have.html', 'label: Humid'));
26+
DashTable.getCell(3, 6).within(() => cy.get('.Select-value-label').should('have.html', 'label: Humid'));
27+
28+
DashTable.getCell(0, 7).within(() => cy.get('.dash-cell-value').should('have.html', 'label: Humid'));
29+
DashTable.getCell(1, 7).within(() => cy.get('.dash-cell-value').should('have.html', 'label: Humid'));
30+
DashTable.getCell(2, 7).within(() => cy.get('.dash-cell-value').should('have.html', 'label: Humid'));
31+
DashTable.getCell(3, 7).within(() => cy.get('.dash-cell-value').should('have.html', 'label: Humid'));
2232
});
2333
});
2434
});

‎tests/visual/percy-storybook/Dropdown.percy.tsx

+42
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,48 @@ const columns2 = R.map(
3030
);
3131

3232
storiesOf('DashTable/Dropdown', module)
33+
.add('readonly dropdown shows label', () => <DataTable
34+
setProps={setProps}
35+
id='table'
36+
data={data}
37+
columns={columns}
38+
editable={false}
39+
dropdown={{
40+
climate: {
41+
options: R.map(
42+
i => ({ label: `label: ${i}`, value: i }),
43+
['Sunny', 'Snowy', 'Rainy']
44+
)
45+
},
46+
city: {
47+
options: R.map(
48+
i => ({ label: `label: ${i}`, value: i }),
49+
['NYC', 'Montreal', 'Miami']
50+
)
51+
}
52+
}}
53+
/>)
54+
.add('editable dropdown shows label', () => <DataTable
55+
setProps={setProps}
56+
id='table'
57+
data={data}
58+
columns={columns}
59+
editable={true}
60+
dropdown={{
61+
climate: {
62+
options: R.map(
63+
i => ({ label: `label: ${i}`, value: i }),
64+
['Sunny', 'Snowy', 'Rainy']
65+
)
66+
},
67+
city: {
68+
options: R.map(
69+
i => ({ label: `label: ${i}`, value: i }),
70+
['NYC', 'Montreal', 'Miami']
71+
)
72+
}
73+
}}
74+
/>)
3375
.add('dropdown by column', () => (<DataTable
3476
setProps={setProps}
3577
id='table'

0 commit comments

Comments
 (0)