Skip to content
This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Issue 314 - Hidden Columns #508

Merged
Marc-Andre-Rivet merged 41 commits into from
Aug 1, 2019
Merged

Issue 314 - Hidden Columns #508

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
41 commits
Select commit Hold shift + click to select a range
b011018
- react 15 to 16
Jul 17, 2019
6bd3440
Merge remote-tracking branch 'origin/master' into 473-hidden-columns
Jul 17, 2019
5fb388a
react 16 in index.html
Jul 18, 2019
6c68d44
update hidden columns tests
Jul 18, 2019
80c33a6
add icons
Jul 18, 2019
0948cca
lint
Jul 18, 2019
1fb1e26
hideable columns + hide icon / action
Jul 18, 2019
0e516dc
toggle column menu + states
Jul 22, 2019
090ca2b
fix font-awesome performance issues
Jul 23, 2019
66f8d1d
dev dep
Jul 23, 2019
5fec5f3
merge with master
Jul 23, 2019
9f0dce9
Update changelog
Jul 23, 2019
f918216
refactor / isolate menu rendering
Jul 23, 2019
952b2ab
standalone tests
Jul 23, 2019
7055d3c
reorg controlled table menu
Jul 24, 2019
4e70f92
prop description
Jul 25, 2019
239aad2
Merge branch '314-hidden-columns' of github.com:plotly/dash-table int…
Jul 25, 2019
f37735f
Merge branch 'master' into 314-hidden-columns
Marc-Andre-Rivet Jul 25, 2019
c467fb5
Merge branch 'master' into 314-hidden-columns
Marc-Andre-Rivet Jul 29, 2019
1b7784a
Update CHANGELOG.md
Marc-Andre-Rivet Jul 30, 2019
342849f
improve column toggle menu styling
Jul 30, 2019
1d02097
Merge branch 'master' into 314-hidden-columns
Marc-Andre-Rivet Jul 30, 2019
52568bc
- prevent hiding last column
Jul 31, 2019
5064da7
Merge branch '314-hidden-columns' of github.com:plotly/dash-table int…
Jul 31, 2019
0b3a0c5
update unit tests
Jul 31, 2019
8b91da6
- display `hide` action on desired header row
Jul 31, 2019
402b977
hideable merged columns / header row index
Jul 31, 2019
bc4b571
add new visual tests for hideable columns
Jul 31, 2019
b01468d
- support hideable on all headers at the same time
Aug 1, 2019
5355559
- update standalone test to use only last column
Aug 1, 2019
6fbbe2f
Merge branch 'master' into 314-hidden-columns
Marc-Andre-Rivet Aug 1, 2019
1a5aba1
- add support for 'last' in column.hideable
Aug 1, 2019
e5e7e7f
fix lint
Aug 1, 2019
ac9b74e
Merge branch '314-hidden-columns' of github.com:plotly/dash-table int…
Aug 1, 2019
c178da8
- add 'last' to clearable, deletable, renamable
Aug 1, 2019
4fcd8e3
- add support for 'first' too
Aug 1, 2019
80e5137
extra visual tests for first and last
Aug 1, 2019
d01777c
- update changelog
Aug 1, 2019
630345a
remove still remaining table-level hideable prop code
Aug 1, 2019
b9e235f
simplify toggle menu sorting
Aug 1, 2019
b3ff548
- switch to js true/false from python True/False
Aug 1, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,15 @@ This project adheres to [Semantic Versioning](http://semver.org/).

## [Unreleased]
### Added
[#314](https://github.com/plotly/dash-table/issues/314)
- New `column.hideable` flag that displays an "eye" action icon in the column
Accepts a boolean, array of booleans, 'last' or 'first'. Clicking on the "eye" will add the column to the `hidden_columns` prop.
`hidden_columns` can be added back through the Columns toggle menu whether they are hideable or not.
- New accepted values for `column.clearable`, `column.deletable` and `column.renamable`
These props now also accept 'last' and 'first'.
- 'last' will display the action only on the last row of the headers
- 'first' will display the action only on the first row of the headers

[#313](https://github.com/plotly/dash-table/issues/313)
- Ability to export table as csv or xlsx file.

Expand Down
5 changes: 2 additions & 3 deletions dash_table/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,8 @@
</head>
<body>
<div id='root'></div>

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src='https://unpkg.com/react@16.8.6/umd/react.production.min.js'></script>
<script src='https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js'></script>
Comment thread
alexcjohnson marked this conversation as resolved.

<script src="./demo.js"></script>
</body>
Expand Down
22 changes: 11 additions & 11 deletions demo/AppMode.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,14 @@ import {
PropsWithDefaults,
ChangeAction,
ChangeFailure,
IVisibleColumn,
ColumnType,
TableAction
} from 'dash-table/components/Table/props';
import { TooltipSyntax } from 'dash-table/tooltips/props';

export enum AppMode {
Clearable = 'clearable',
ClearableMerged = 'clearableMerged',
Actionable = 'actionable',
ActionableMerged = 'actionableMerged',

@Marc-Andre-Rivet Marc-Andre-Rivet Jul 24, 2019

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Modified clearable modes to display all actions instead

Date = 'date',
Default = 'default',
Filtering = 'filtering',
Expand Down Expand Up @@ -178,7 +177,7 @@ function getTypedState() {
const state = getDefaultState();

R.forEach(column => {
(column as IVisibleColumn).on_change = {
column.on_change = {
action: ChangeAction.Coerce,
failure: ChangeFailure.Reject
};
Expand All @@ -187,19 +186,20 @@ function getTypedState() {
return state;
}

function getClearableState() {
function getActionableState() {
const state = getDefaultState();
state.tableProps.filter_action = TableAction.Native;

R.forEach(c => {
c.clearable = true;
c.hideable = [false, false, true];
}, state.tableProps.columns || []);

return state;
}

function getClearableMergedState() {
const state = getClearableState();
function getActionableMergedState() {
const state = getActionableState();
state.tableProps.merge_duplicate_headers = true;

return state;
Expand Down Expand Up @@ -345,10 +345,10 @@ function getState() {
const mode = Environment.searchParams.get('mode');

switch (mode) {
case AppMode.Clearable:
return getClearableState();
case AppMode.ClearableMerged:
return getClearableMergedState();
case AppMode.Actionable:
return getActionableState();
case AppMode.ActionableMerged:
return getActionableMergedState();
case AppMode.Date:
return getDateState();
case AppMode.Filtering:
Expand Down
7 changes: 3 additions & 4 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,9 @@
</head>
<body>
<div id='root'></div>

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<script src='https://unpkg.com/react@16.8.6/umd/react.production.min.js'></script>
<script src='https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js'></script>

<script src="./demo.js"></script>
</body>
</html>
4 changes: 4 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,10 @@
"@babel/preset-env": "^7.5.5",
"@babel/preset-react": "^7.0.0",
"@cypress/webpack-preprocessor": "^4.1.0",
"@fortawesome/fontawesome-svg-core": "^1.2.19",
"@fortawesome/free-regular-svg-icons": "^5.9.0",
"@fortawesome/free-solid-svg-icons": "^5.9.0",
"@fortawesome/react-fontawesome": "^0.1.4",

@Marc-Andre-Rivet Marc-Andre-Rivet Jul 24, 2019

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The core FA library for JS / tree-shaking, the free icons and the React wrapper.
The original implementation used CSS pseudo-elements instead of the React wrappers but the table / FA core interaction for actively checking pseudo-elements degraded the table's performance significantly (~300% increase in render time)

"@percy-io/percy-storybook": "^2.1.0",
"@storybook/cli": "^5.1.9",
"@storybook/react": "^5.1.9",
Expand Down
4 changes: 2 additions & 2 deletions src/core/storage/Cookie.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ const __20years = 86400 * 1000 * 365 * 20;

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

document.cookie = `${id}=;expires=${expires};domain=${domain};path=${path}`;
}
Expand All @@ -28,7 +28,7 @@ export default class CookieStorage {
}

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

@Marc-Andre-Rivet Marc-Andre-Rivet Jul 24, 2019

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unrelated cleanup that was done while the issue still included persistence. Keeping this small change around.


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

Expand Down
14 changes: 7 additions & 7 deletions src/dash-table/components/CellFactory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@ export default class CellFactory {
public createCells(dataEdges: IEdgesMatrices | undefined, dataOpEdges: IEdgesMatrices | undefined) {
const {
active_cell,
columns,
dropdown_conditional,
dropdown,
data,
Expand All @@ -51,7 +50,8 @@ export default class CellFactory {
style_cell_conditional,
style_data,
style_data_conditional,
virtualized
virtualized,
visibleColumns

@Marc-Andre-Rivet Marc-Andre-Rivet Jul 24, 2019

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

columns became visibleColumns pretty much everywhere under the sanitation layer. Updating usage / destructuring-ordering accordingly.

@Marc-Andre-Rivet Marc-Andre-Rivet Jul 24, 2019

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

columns -> visibleColumns
IVisibleColumn -> IColumn
etc. on that theme

} = this.props;

const relevantStyles = this.relevantStyles(
Expand All @@ -62,7 +62,7 @@ export default class CellFactory {
);

const partialCellStyles = this.dataPartialStyles(
columns,
visibleColumns,
relevantStyles,
virtualized.data,
virtualized.offset
Expand All @@ -82,7 +82,7 @@ export default class CellFactory {
);

const dropdowns = this.cellDropdowns(
columns,
visibleColumns,
virtualized.data,
virtualized.indices,
dropdown_conditional,
Expand All @@ -101,7 +101,7 @@ export default class CellFactory {
);

const partialCellWrappers = this.cellWrappers.partialGet(
columns,
visibleColumns,
virtualized.data,
virtualized.offset
);
Expand All @@ -114,7 +114,7 @@ export default class CellFactory {
);

const partialCellContents = this.cellContents.partialGet(
columns,
visibleColumns,
virtualized.data,
virtualized.offset,
!!is_focused,
Expand All @@ -124,7 +124,7 @@ export default class CellFactory {
const cellContents = this.cellContents.get(
partialCellContents,
active_cell,
columns,
visibleColumns,
virtualized.data,
virtualized.offset,
!!is_focused,
Expand Down
Loading