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

Commit ea3a78b

Browse files
Marc-Andre-RivetMarc-Andre-Rivet
authored
Issue 314 - Hidden Columns (#508)
1 parent 0ea08fa commit ea3a78b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+1175
-532
lines changed

‎CHANGELOG.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,15 @@ This project adheres to [Semantic Versioning](http://semver.org/).
44

55
## [Unreleased]
66
### Added
7+
[#314](https://github.com/plotly/dash-table/issues/314)
8+
- New `column.hideable` flag that displays an "eye" action icon in the column
9+
Accepts a boolean, array of booleans, 'last' or 'first'. Clicking on the "eye" will add the column to the `hidden_columns` prop.
10+
`hidden_columns` can be added back through the Columns toggle menu whether they are hideable or not.
11+
- New accepted values for `column.clearable`, `column.deletable` and `column.renamable`
12+
These props now also accept 'last' and 'first'.
13+
- 'last' will display the action only on the last row of the headers
14+
- 'first' will display the action only on the first row of the headers
15+
716
[#313](https://github.com/plotly/dash-table/issues/313)
817
- Ability to export table as csv or xlsx file.
918

‎dash_table/index.html

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,8 @@
55
</head>
66
<body>
77
<div id='root'></div>
8-
9-
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
10-
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
8+
<script src='https://unpkg.com/[email protected]/umd/react.production.min.js'></script>
9+
<script src='https://unpkg.com/[email protected]/umd/react-dom.production.min.js'></script>
1110

1211
<script src="./demo.js"></script>
1312
</body>

‎demo/AppMode.ts

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,14 @@ import {
77
PropsWithDefaults,
88
ChangeAction,
99
ChangeFailure,
10-
IVisibleColumn,
1110
ColumnType,
1211
TableAction
1312
} from 'dash-table/components/Table/props';
1413
import { TooltipSyntax } from 'dash-table/tooltips/props';
1514

1615
export enum AppMode {
17-
Clearable = 'clearable',
18-
ClearableMerged = 'clearableMerged',
16+
Actionable = 'actionable',
17+
ActionableMerged = 'actionableMerged',
1918
Date = 'date',
2019
Default = 'default',
2120
Filtering = 'filtering',
@@ -178,7 +177,7 @@ function getTypedState() {
178177
const state = getDefaultState();
179178

180179
R.forEach(column => {
181-
(column as IVisibleColumn).on_change = {
180+
column.on_change = {
182181
action: ChangeAction.Coerce,
183182
failure: ChangeFailure.Reject
184183
};
@@ -187,19 +186,20 @@ function getTypedState() {
187186
return state;
188187
}
189188

190-
function getClearableState() {
189+
function getActionableState() {
191190
const state = getDefaultState();
192191
state.tableProps.filter_action = TableAction.Native;
193192

194193
R.forEach(c => {
195194
c.clearable = true;
195+
c.hideable = [false, false, true];
196196
}, state.tableProps.columns || []);
197197

198198
return state;
199199
}
200200

201-
function getClearableMergedState() {
202-
const state = getClearableState();
201+
function getActionableMergedState() {
202+
const state = getActionableState();
203203
state.tableProps.merge_duplicate_headers = true;
204204

205205
return state;
@@ -345,10 +345,10 @@ function getState() {
345345
const mode = Environment.searchParams.get('mode');
346346

347347
switch (mode) {
348-
case AppMode.Clearable:
349-
return getClearableState();
350-
case AppMode.ClearableMerged:
351-
return getClearableMergedState();
348+
case AppMode.Actionable:
349+
return getActionableState();
350+
case AppMode.ActionableMerged:
351+
return getActionableMergedState();
352352
case AppMode.Date:
353353
return getDateState();
354354
case AppMode.Filtering:

‎demo/index.html

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,9 @@
55
</head>
66
<body>
77
<div id='root'></div>
8-
9-
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
10-
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
11-
8+
<script src='https://unpkg.com/[email protected]/umd/react.production.min.js'></script>
9+
<script src='https://unpkg.com/[email protected]/umd/react-dom.production.min.js'></script>
10+
1211
<script src="./demo.js"></script>
1312
</body>
1413
</html>

‎package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,10 @@
5757
"@babel/preset-env": "^7.5.5",
5858
"@babel/preset-react": "^7.0.0",
5959
"@cypress/webpack-preprocessor": "^4.1.0",
60+
"@fortawesome/fontawesome-svg-core": "^1.2.19",
61+
"@fortawesome/free-regular-svg-icons": "^5.9.0",
62+
"@fortawesome/free-solid-svg-icons": "^5.9.0",
63+
"@fortawesome/react-fontawesome": "^0.1.4",
6064
"@percy-io/percy-storybook": "^2.1.0",
6165
"@storybook/cli": "^5.1.9",
6266
"@storybook/react": "^5.1.9",

‎src/core/storage/Cookie.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ const __20years = 86400 * 1000 * 365 * 20;
33

44
export default class CookieStorage {
55
public static delete(id: string, domain: string = '', path: string = '/') {
6-
let expires = new Date((new Date().getTime() - __1day)).toUTCString();
6+
let expires = new Date(Date.now() - __1day).toUTCString();
77

88
document.cookie = `${id}=;expires=${expires};domain=${domain};path=${path}`;
99
}
@@ -28,7 +28,7 @@ export default class CookieStorage {
2828
}
2929

3030
public static set(id: string, value: string, domain: string = '', path: string = '/') {
31-
let expires = new Date((new Date().getTime() + __20years)).toUTCString();
31+
let expires = new Date(Date.now() + __20years).toUTCString();
3232

3333
let entry = `${id}=${value};expires=${expires};domain=${domain};path=${path}`;
3434

‎src/dash-table/components/CellFactory.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@ export default class CellFactory {
3636
public createCells(dataEdges: IEdgesMatrices | undefined, dataOpEdges: IEdgesMatrices | undefined) {
3737
const {
3838
active_cell,
39-
columns,
4039
dropdown_conditional,
4140
dropdown,
4241
data,
@@ -51,7 +50,8 @@ export default class CellFactory {
5150
style_cell_conditional,
5251
style_data,
5352
style_data_conditional,
54-
virtualized
53+
virtualized,
54+
visibleColumns
5555
} = this.props;
5656

5757
const relevantStyles = this.relevantStyles(
@@ -62,7 +62,7 @@ export default class CellFactory {
6262
);
6363

6464
const partialCellStyles = this.dataPartialStyles(
65-
columns,
65+
visibleColumns,
6666
relevantStyles,
6767
virtualized.data,
6868
virtualized.offset
@@ -82,7 +82,7 @@ export default class CellFactory {
8282
);
8383

8484
const dropdowns = this.cellDropdowns(
85-
columns,
85+
visibleColumns,
8686
virtualized.data,
8787
virtualized.indices,
8888
dropdown_conditional,
@@ -101,7 +101,7 @@ export default class CellFactory {
101101
);
102102

103103
const partialCellWrappers = this.cellWrappers.partialGet(
104-
columns,
104+
visibleColumns,
105105
virtualized.data,
106106
virtualized.offset
107107
);
@@ -114,7 +114,7 @@ export default class CellFactory {
114114
);
115115

116116
const partialCellContents = this.cellContents.partialGet(
117-
columns,
117+
visibleColumns,
118118
virtualized.data,
119119
virtualized.offset,
120120
!!is_focused,
@@ -124,7 +124,7 @@ export default class CellFactory {
124124
const cellContents = this.cellContents.get(
125125
partialCellContents,
126126
active_cell,
127-
columns,
127+
visibleColumns,
128128
virtualized.data,
129129
virtualized.offset,
130130
!!is_focused,

0 commit comments

Comments
 (0)