diff --git a/CHANGELOG.md b/CHANGELOG.md index 09d14fdf4..59870ec86 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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. diff --git a/dash_table/index.html b/dash_table/index.html index daab9fee6..613c17016 100644 --- a/dash_table/index.html +++ b/dash_table/index.html @@ -5,9 +5,8 @@
- - - + + diff --git a/demo/AppMode.ts b/demo/AppMode.ts index 873b07d70..788823a74 100644 --- a/demo/AppMode.ts +++ b/demo/AppMode.ts @@ -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', Date = 'date', Default = 'default', Filtering = 'filtering', @@ -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 }; @@ -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; @@ -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: diff --git a/demo/index.html b/demo/index.html index b00532b7c..613c17016 100644 --- a/demo/index.html +++ b/demo/index.html @@ -5,10 +5,9 @@
- - - - + + + diff --git a/package.json b/package.json index c3573e776..6daa3a8e6 100644 --- a/package.json +++ b/package.json @@ -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", "@percy-io/percy-storybook": "^2.1.0", "@storybook/cli": "^5.1.9", "@storybook/react": "^5.1.9", diff --git a/src/core/storage/Cookie.ts b/src/core/storage/Cookie.ts index 71f665767..b06db4ce3 100644 --- a/src/core/storage/Cookie.ts +++ b/src/core/storage/Cookie.ts @@ -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}`; } @@ -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(); let entry = `${id}=${value};expires=${expires};domain=${domain};path=${path}`; diff --git a/src/dash-table/components/CellFactory.tsx b/src/dash-table/components/CellFactory.tsx index e295158e3..144713cc0 100644 --- a/src/dash-table/components/CellFactory.tsx +++ b/src/dash-table/components/CellFactory.tsx @@ -36,7 +36,6 @@ export default class CellFactory { public createCells(dataEdges: IEdgesMatrices | undefined, dataOpEdges: IEdgesMatrices | undefined) { const { active_cell, - columns, dropdown_conditional, dropdown, data, @@ -51,7 +50,8 @@ export default class CellFactory { style_cell_conditional, style_data, style_data_conditional, - virtualized + virtualized, + visibleColumns } = this.props; const relevantStyles = this.relevantStyles( @@ -62,7 +62,7 @@ export default class CellFactory { ); const partialCellStyles = this.dataPartialStyles( - columns, + visibleColumns, relevantStyles, virtualized.data, virtualized.offset @@ -82,7 +82,7 @@ export default class CellFactory { ); const dropdowns = this.cellDropdowns( - columns, + visibleColumns, virtualized.data, virtualized.indices, dropdown_conditional, @@ -101,7 +101,7 @@ export default class CellFactory { ); const partialCellWrappers = this.cellWrappers.partialGet( - columns, + visibleColumns, virtualized.data, virtualized.offset ); @@ -114,7 +114,7 @@ export default class CellFactory { ); const partialCellContents = this.cellContents.partialGet( - columns, + visibleColumns, virtualized.data, virtualized.offset, !!is_focused, @@ -124,7 +124,7 @@ export default class CellFactory { const cellContents = this.cellContents.get( partialCellContents, active_cell, - columns, + visibleColumns, virtualized.data, virtualized.offset, !!is_focused, diff --git a/src/dash-table/components/ControlledTable/index.tsx b/src/dash-table/components/ControlledTable/index.tsx index de7afed26..6d80f0228 100644 --- a/src/dash-table/components/ControlledTable/index.tsx +++ b/src/dash-table/components/ControlledTable/index.tsx @@ -8,6 +8,7 @@ import { isCtrlDown, isNavKey } from 'dash-table/utils/unicode'; +import * as actions from 'dash-table/utils/actions'; import ExportButton from 'dash-table/components/Export'; import { selectionBounds, selectionCycle } from 'dash-table/utils/navigation'; import { makeCell, makeSelection } from 'dash-table/derived/cell/cellProps'; @@ -19,9 +20,11 @@ import { memoizeOne } from 'core/memoizer'; import lexer from 'core/syntax-tree/lexer'; import TableClipboardHelper from 'dash-table/utils/TableClipboardHelper'; -import { ControlledTableProps, ICellFactoryProps, TableAction } from 'dash-table/components/Table/props'; +import { ControlledTableProps, ICellFactoryProps, TableAction, IColumn } from 'dash-table/components/Table/props'; import dropdownHelper from 'dash-table/components/dropdownHelper'; +import getColumnFlag from 'dash-table/derived/header/columnFlag'; +import derivedLabelsAndIndices from 'dash-table/derived/header/labelsAndIndices'; import derivedTable from 'dash-table/derived/table'; import derivedTableFragments from 'dash-table/derived/table/fragments'; import derivedTableFragmentStyles from 'dash-table/derived/table/fragmentStyles'; @@ -37,10 +40,12 @@ const DEFAULT_STYLE = { }; export default class ControlledTable extends PureComponent { + private readonly menuRef = React.createRef(); private readonly stylesheet: Stylesheet = new Stylesheet(`#${this.props.id}`); private readonly tableFn = derivedTable(() => this.props); private readonly tableFragments = derivedTableFragments(); private readonly tableStyle = derivedTableStyle(); + private readonly labelsAndIndices = derivedLabelsAndIndices(); private calculateTableStyle = memoizeOne((style: Partial) => R.mergeAll( this.tableStyle(DEFAULT_STYLE, style) @@ -122,13 +127,13 @@ export default class ControlledTable extends PureComponent // Fallback method for paste handling in Chrome // when no input element has focused inside the table window.addEventListener('resize', this.forceHandleResize); + document.addEventListener('mousedown', this.handleClick); document.addEventListener('paste', this.handlePaste); - document.addEventListener('mousedown', this.handleClickOutside); } componentWillUnmount() { window.removeEventListener('resize', this.forceHandleResize); - document.removeEventListener('mousedown', this.handleClickOutside); + document.removeEventListener('mousedown', this.handleClick); document.removeEventListener('paste', this.handlePaste); } @@ -173,7 +178,7 @@ export default class ControlledTable extends PureComponent }); } - handleClickOutside = (event: any) => { + handleClick = (event: any) => { const $el = this.$el; if ($el && @@ -183,8 +188,23 @@ export default class ControlledTable extends PureComponent * so, only call when the table isn't already focussed, otherwise * the app will excessively re-render on _every click on the page_ */ - this.props.is_focused) { - this.props.setProps({ is_focused: false }); + this.props.is_focused + ) { + this.props.setProps({ + is_focused: false + }); + } + + const menu = this.menuRef; + + if (this.props.activeMenu && + menu && + menu.current && + !menu.current.contains(event.target as Node) + ) { + this.props.setState({ + activeMenu: undefined + }); } } @@ -318,12 +338,12 @@ export default class ControlledTable extends PureComponent const e = event; const { active_cell, - columns, selected_cells, start_cell, end_cell, setProps, - viewport + viewport, + visibleColumns } = this.props; // This is mostly to prevent TABing also triggering native HTML tab @@ -415,7 +435,7 @@ export default class ControlledTable extends PureComponent if (active_cell.column > minCol) { minCol++; endCol = minCol; - } else if (maxCol < columns.length - 1) { + } else if (maxCol < visibleColumns.length - 1) { maxCol++; endCol = maxCol; } @@ -433,12 +453,12 @@ export default class ControlledTable extends PureComponent const finalSelected = makeSelection( {minRow, maxRow, minCol, maxCol}, - columns, viewport + visibleColumns, viewport ); const newProps: Partial = { is_focused: false, - end_cell: makeCell(endRow, endCol, columns, viewport), + end_cell: makeCell(endRow, endCol, visibleColumns, viewport), selected_cells: finalSelected }; @@ -449,7 +469,7 @@ export default class ControlledTable extends PureComponent newProps.start_cell = makeCell( newStartRow, newStartCol, - columns, + visibleColumns, viewport ); } @@ -459,11 +479,11 @@ export default class ControlledTable extends PureComponent deleteCell = (event: any) => { const { - columns, data, selected_cells, setProps, - viewport + viewport, + visibleColumns } = this.props; event.preventDefault(); @@ -476,9 +496,9 @@ export default class ControlledTable extends PureComponent ); realCells.forEach(cell => { - if (columns[cell[1]].editable) { + if (visibleColumns[cell[1]].editable) { newData = R.set( - R.lensPath([cell[0], columns[cell[1]].id]), + R.lensPath([cell[0], visibleColumns[cell[1]].id]), '', newData ); @@ -491,7 +511,7 @@ export default class ControlledTable extends PureComponent } getNextCell = (event: any, { restrictToSelection, currentCell }: any) => { - const { columns, selected_cells, viewport } = this.props; + const { selected_cells, viewport, visibleColumns } = this.props; const e = event; @@ -509,7 +529,7 @@ export default class ControlledTable extends PureComponent case KEY_CODES.TAB: nextCoords = restrictToSelection ? selectionCycle([row, column + 1], selected_cells) - : [row, R.min(columns.length - 1, column + 1)]; + : [row, R.min(visibleColumns.length - 1, column + 1)]; break; case KEY_CODES.ARROW_UP: @@ -530,30 +550,30 @@ export default class ControlledTable extends PureComponent `Table.getNextCell: unknown navigation keycode ${e.keyCode}` ); } - return makeCell(nextCoords[0], nextCoords[1], columns, viewport); + return makeCell(nextCoords[0], nextCoords[1], visibleColumns, viewport); } onCopy = (e: any) => { const { - columns, selected_cells, - viewport + viewport, + visibleColumns } = this.props; - TableClipboardHelper.toClipboard(e, selected_cells, columns, viewport.data); + TableClipboardHelper.toClipboard(e, selected_cells, visibleColumns, viewport.data); this.$el.focus(); } onPaste = (e: any) => { const { active_cell, - columns, data, editable, filter_query, setProps, sort_by, - viewport + viewport, + visibleColumns } = this.props; if (!editable || !active_cell) { @@ -564,7 +584,7 @@ export default class ControlledTable extends PureComponent e, active_cell, viewport.indices, - columns, + visibleColumns, data, true, !sort_by.length || !filter_query.length @@ -680,8 +700,8 @@ export default class ControlledTable extends PureComponent render() { const { - id, columns, + id, tooltip_conditional, tooltip, currentTooltip, @@ -700,7 +720,8 @@ export default class ControlledTable extends PureComponent uiViewport, viewport, virtualized, - virtualization + virtualization, + visibleColumns } = this.props; const fragmentClasses = [ @@ -730,7 +751,7 @@ export default class ControlledTable extends PureComponent ...(style_as_list_view ? ['dash-list-view'] : []), ...(empty[0][1] ? ['dash-empty-01'] : []), ...(empty[1][1] ? ['dash-empty-11'] : []), - ...(columns.length ? [] : ['dash-no-columns']), + ...(visibleColumns.length ? [] : ['dash-no-columns']), ...(virtualized.data.length ? [] : ['dash-no-data']), ...(filter_action !== TableAction.None ? [] : ['dash-no-filter']), ...(fill_width ? ['dash-fill-width'] : []) @@ -762,7 +783,13 @@ export default class ControlledTable extends PureComponent ); const { export_format, export_headers, virtual } = this.props; - const buttonProps = { export_format, virtual_data: virtual, columns, export_headers }; + const buttonProps = { + export_format, + virtual_data: virtual, + columns, + visibleColumns, + export_headers + }; return (
className='dash-table-tooltip' tooltip={tableTooltip} /> +
+ {this.renderMenu()} + +
ref={`r${rowIndex}c${columnIndex}`} className={`cell cell-${rowIndex}-${columnIndex} ${c}`} > - {g ? React.cloneElement(g, { style: s.cell }) : g} + {g ? React.cloneElement(g, { style: s.cell }) : g}
))}
))}
@@ -806,7 +837,67 @@ export default class ControlledTable extends PureComponent )} - + ); + } + + renderMenu() { + if (!this.showToggleColumns) { + return null; + } + + const { + activeMenu, + columns, + hidden_columns, + merge_duplicate_headers, + setState + } = this.props; + + const labelsAndIndices = this.labelsAndIndices(columns, columns, merge_duplicate_headers); + const lastRow = labelsAndIndices.length - 1; + + return (
+ + {activeMenu !== 'show/hide' ? + null : +
+ {R.unnest(labelsAndIndices.map(([, indices], i) => indices.map((index, j) => { + const spansAllColumns = indices.length === 1; + const column = columns[index]; + + const checked = !hidden_columns || hidden_columns.indexOf(column.id) < 0; + const hideable = getColumnFlag(i, lastRow, column.hideable); + + const disabled = (spansAllColumns && checked) || (!hideable && checked); + + return { + i: index, + j, + component: !hideable ? null : (
+ + +
) + }; + }))).filter(i => !R.isNil(i)).sort((a, b) => (a.i - b.i) || (a.j - b.j)).map(a => a.component)} +
+ }
); } @@ -828,4 +919,38 @@ export default class ControlledTable extends PureComponent (this.refs.tooltip as TableTooltip).updateBounds(cell); } } + + private get showToggleColumns(): boolean { + const { + columns, + hidden_columns + } = this.props; + + return ( + hidden_columns && hidden_columns.length > 0) || + R.any(column => !!column.hideable, columns); + } + + private toggleColumn = (column: IColumn, headerRowIndex: number, mergeDuplicateHeaders: boolean) => { + const { + columns, + hidden_columns: base, + setProps + } = this.props; + + const ids: string[] = actions.getColumnIds(column, columns, headerRowIndex, mergeDuplicateHeaders); + + const hidden_columns = base ? base.slice(0) : []; + R.forEach(id => { + const cIndex = hidden_columns.indexOf(id); + + if (cIndex >= 0) { + hidden_columns.splice(cIndex, 1); + } else { + hidden_columns.push(id); + } + }, ids); + + setProps({ hidden_columns }); + } } diff --git a/src/dash-table/components/EdgeFactory.tsx b/src/dash-table/components/EdgeFactory.tsx index 08da253d4..6cf20fd5a 100644 --- a/src/dash-table/components/EdgeFactory.tsx +++ b/src/dash-table/components/EdgeFactory.tsx @@ -15,7 +15,7 @@ import getHeaderRows from 'dash-table/derived/header/headerRows'; import { derivedRelevantCellStyles, derivedRelevantFilterStyles, derivedRelevantHeaderStyles } from 'dash-table/derived/style'; import { Style, Cells, DataCells, BasicFilters, Headers } from 'dash-table/derived/style/props'; -import { ControlledTableProps, VisibleColumns, IViewportOffset, Data, ICellCoordinates, TableAction } from './Table/props'; +import { ControlledTableProps, Columns, IViewportOffset, Data, ICellCoordinates, TableAction } from './Table/props'; import { SingleColumnSyntaxTree } from 'dash-table/syntax-tree'; type EdgesMatricesOp = EdgesMatrices | undefined; @@ -155,12 +155,14 @@ export default class EdgeFactory { style_filter_conditional, style_header, style_header_conditional, - virtualized + virtualized, + visibleColumns } = this.props; return this.memoizedCreateEdges( active_cell, columns, + visibleColumns, (row_deletable ? 1 : 0) + (row_selectable ? 1 : 0), filter_action !== TableAction.None, workFilter.map, @@ -182,7 +184,8 @@ export default class EdgeFactory { private memoizedCreateEdges = memoizeOne(( active_cell: ICellCoordinates, - columns: VisibleColumns, + columns: Columns, + visibleColumns: Columns, operations: number, filter_action: boolean, filterMap: Map, @@ -224,7 +227,7 @@ export default class EdgeFactory { const headerRows = getHeaderRows(columns); let dataEdges = this.getDataEdges( - columns, + visibleColumns, dataStyles, data, offset, @@ -241,7 +244,7 @@ export default class EdgeFactory { ); let filterEdges = this.getFilterEdges( - columns, + visibleColumns, filter_action, filterMap, filterStyles, @@ -256,7 +259,7 @@ export default class EdgeFactory { ); let headerEdges = this.getHeaderEdges( - columns, + visibleColumns, headerRows, headerStyles, style_as_list_view diff --git a/src/dash-table/components/Export/index.tsx b/src/dash-table/components/Export/index.tsx index 942447f3d..46b112076 100644 --- a/src/dash-table/components/Export/index.tsx +++ b/src/dash-table/components/Export/index.tsx @@ -1,24 +1,25 @@ import XLSX from 'xlsx'; import React from 'react'; -import { IDerivedData, IVisibleColumn } from 'dash-table/components/Table/props'; +import { IDerivedData, Columns } from 'dash-table/components/Table/props'; import { createWorkbook, createHeadings, createWorksheet } from './utils'; import getHeaderRows from 'dash-table/derived/header/headerRows'; interface IExportButtonProps { + columns: Columns; export_format: string; virtual_data: IDerivedData; - columns: IVisibleColumn[]; + visibleColumns: Columns; export_headers: string; } export default React.memo((props: IExportButtonProps) => { - const { columns, export_format, virtual_data, export_headers } = props; + const { columns, export_format, virtual_data, export_headers, visibleColumns } = props; const isFormatSupported = export_format === 'csv' || export_format === 'xlsx'; const handleExport = () => { - const columnID = columns.map(column => column.id); - const columnHeaders = columns.map(column => column.name); + const columnID = visibleColumns.map(column => column.id); + const columnHeaders = visibleColumns.map(column => column.name); const maxLength = getHeaderRows(columns); const heading = (export_headers !== 'none') ? createHeadings(columnHeaders, maxLength) : []; const ws = createWorksheet(heading, virtual_data.data, columnID, export_headers); @@ -30,11 +31,9 @@ export default React.memo((props: IExportButtonProps) => { } }; - return ( -
- { !isFormatSupported ? null : ( - - )} -
- ); + return (
+ {!isFormatSupported ? null : ( + + )} +
); }); diff --git a/src/dash-table/components/FilterFactory.tsx b/src/dash-table/components/FilterFactory.tsx index dd6235769..a56673afa 100644 --- a/src/dash-table/components/FilterFactory.tsx +++ b/src/dash-table/components/FilterFactory.tsx @@ -7,7 +7,7 @@ import memoizerCache from 'core/cache/memoizer'; import { memoizeOne } from 'core/memoizer'; import ColumnFilter from 'dash-table/components/Filter/Column'; -import { ColumnId, IVisibleColumn, TableAction, IFilterFactoryProps, SetFilter } from 'dash-table/components/Table/props'; +import { ColumnId, IColumn, TableAction, IFilterFactoryProps, SetFilter } from 'dash-table/components/Table/props'; import derivedFilterStyles, { derivedFilterOpStyles } from 'dash-table/derived/filter/wrapperStyles'; import derivedHeaderOperations from 'dash-table/derived/header/operations'; import { derivedRelevantFilterStyles } from 'dash-table/derived/style'; @@ -32,7 +32,7 @@ export default class FilterFactory { } - private onChange = (column: IVisibleColumn, map: Map, setFilter: SetFilter, ev: any) => { + private onChange = (column: IColumn, map: Map, setFilter: SetFilter, ev: any) => { Logger.debug('Filter -- onChange', column.id, ev.target.value && ev.target.value.trim()); const value = ev.target.value.trim(); @@ -41,7 +41,7 @@ export default class FilterFactory { } private filter = memoizerCache<[ColumnId, number]>()(( - column: IVisibleColumn, + column: IColumn, index: number, map: Map, setFilter: SetFilter @@ -74,7 +74,6 @@ export default class FilterFactory { filterOpEdges: IEdgesMatrices | undefined ) { const { - columns, filter_action, map, row_deletable, @@ -83,7 +82,8 @@ export default class FilterFactory { style_cell, style_cell_conditional, style_filter, - style_filter_conditional + style_filter_conditional, + visibleColumns } = this.props; if (filter_action === TableAction.None) { @@ -98,7 +98,7 @@ export default class FilterFactory { ); const wrapperStyles = this.wrapperStyles( - this.filterStyles(columns, relevantStyles), + this.filterStyles(visibleColumns, relevantStyles), filterEdges ); @@ -108,14 +108,14 @@ export default class FilterFactory { relevantStyles )[0]; - const filters = R.addIndex(R.map)((column, index) => { + const filters = R.addIndex(R.map)((column, index) => { return this.filter.get(column.id, index)( column, index, map, setFilter ); - }, columns); + }, visibleColumns); const styledFilters = this.getFilterCells( filters, diff --git a/src/dash-table/components/HeaderFactory.tsx b/src/dash-table/components/HeaderFactory.tsx index 696e6ddf0..35f82fb52 100644 --- a/src/dash-table/components/HeaderFactory.tsx +++ b/src/dash-table/components/HeaderFactory.tsx @@ -4,11 +4,8 @@ import React, { CSSProperties } from 'react'; import { arrayMap2 } from 'core/math/arrayZipMap'; import { matrixMap2, matrixMap3 } from 'core/math/matrixZipMap'; -import { VisibleColumns, HeaderFactoryProps } from 'dash-table/components/Table/props'; import derivedHeaderContent from 'dash-table/derived/header/content'; -import getHeaderRows from 'dash-table/derived/header/headerRows'; -import getIndices from 'dash-table/derived/header/indices'; -import getLabels from 'dash-table/derived/header/labels'; +import derivedLabelsAndIndices from 'dash-table/derived/header/labelsAndIndices'; import derivedHeaderOperations from 'dash-table/derived/header/operations'; import derivedHeaderWrappers from 'dash-table/derived/header/wrappers'; import { derivedRelevantHeaderStyles } from 'dash-table/derived/style'; @@ -16,6 +13,7 @@ import derivedHeaderStyles, { derivedHeaderOpStyles } from 'dash-table/derived/h import { IEdgesMatrices } from 'dash-table/derived/edges/type'; import { memoizeOne } from 'core/memoizer'; +import { HeaderFactoryProps } from './Table/props'; export default class HeaderFactory { private readonly headerContent = derivedHeaderContent(); @@ -24,6 +22,7 @@ export default class HeaderFactory { private readonly headerOpStyles = derivedHeaderOpStyles(); private readonly headerWrappers = derivedHeaderWrappers(); private readonly relevantStyles = derivedRelevantHeaderStyles(); + private readonly labelsAndIndices = derivedLabelsAndIndices(); private get props() { return this.propsFn(); @@ -39,6 +38,7 @@ export default class HeaderFactory { const { columns, data, + hidden_columns, map, merge_duplicate_headers, page_action, @@ -52,12 +52,12 @@ export default class HeaderFactory { style_cell, style_cell_conditional, style_header, - style_header_conditional + style_header_conditional, + visibleColumns } = props; - const headerRows = getHeaderRows(columns); - - const labelsAndIndices = this.getLabelsAndIndices(columns, headerRows, merge_duplicate_headers); + const labelsAndIndices = this.labelsAndIndices(columns, visibleColumns, merge_duplicate_headers); + const headerRows = labelsAndIndices.length; const relevantStyles = this.relevantStyles( style_cell, @@ -73,7 +73,7 @@ export default class HeaderFactory { ); const wrapperStyles = this.headerStyles( - columns, + visibleColumns, headerRows, relevantStyles ); @@ -85,14 +85,14 @@ export default class HeaderFactory { ); const wrappers = this.headerWrappers( - columns, + visibleColumns, labelsAndIndices, merge_duplicate_headers ); const contents = this.headerContent( - columns, - merge_duplicate_headers, + visibleColumns, + hidden_columns, data, labelsAndIndices, map, @@ -121,18 +121,6 @@ export default class HeaderFactory { return this.getCells(ops, headers); } - getLabelsAndIndices = memoizeOne(( - columns: VisibleColumns, - headerRows: number, - merge_duplicate_headers: boolean - ) => { - const labels = getLabels(columns, headerRows); - const indices = getIndices(columns, labels, merge_duplicate_headers); - - return R.zip(labels, indices); - - }); - getCells = memoizeOne(( opCells: JSX.Element[][], dataCells: JSX.Element[][] diff --git a/src/dash-table/components/Table/Table.less b/src/dash-table/components/Table/Table.less index 0e51ce9eb..5f0566694 100644 --- a/src/dash-table/components/Table/Table.less +++ b/src/dash-table/components/Table/Table.less @@ -103,6 +103,43 @@ } } } + +.dash-spreadsheet-menu { + display: flex; + flex-direction: row; + + & > * { + padding-right: 5px; + } + + .dash-spreadsheet-menu-item { + position: relative; + + .show-hide-menu { + background-color: #fafafa; + border: 1px solid #d3d3d3; + display: flex; + flex-direction: column; + max-height: 300px; + overflow: auto; + position: absolute; + top: 100%; + left: 0; + z-index: 500; + + .show-hide-menu-item { + display: flex; + flex-direction: row; + padding: 5px; + + label { + white-space: nowrap; + } + } + } + } +} + .dash-spreadsheet-container { .reset-css(); display: flex; @@ -331,6 +368,7 @@ .column-header--clear, .column-header--delete, .column-header--edit, + .column-header--hide .sort { .not-selectable(); cursor: pointer; @@ -402,8 +440,8 @@ cursor: pointer; float: left; color: var(--faded-text-header); - font-size: 20px; } + th:hover .sort { color: var(--accent); } @@ -481,21 +519,10 @@ } .dash-spreadsheet-inner { - .column-header--clear::before { - content: 'ø'; - } - - .column-header--delete::before { - content: '×' - } - - .column-header--edit::before { - content: '✎'; - } - .column-header--clear, .column-header--delete, - .column-header--edit { + .column-header--edit, + .column-header--hide { float: left; opacity: 0.1; padding-left: 2px; @@ -506,9 +533,12 @@ th:hover { .column-header--clear, .column-header--delete, - .column-header--edit { - color: var(--accent); - opacity: 1; + .column-header--edit, + .column-header--hide { + &:not(.disabled) { + color: var(--accent); + opacity: 1; + } } } } diff --git a/src/dash-table/components/Table/controlledPropsHelper.ts b/src/dash-table/components/Table/controlledPropsHelper.ts new file mode 100644 index 000000000..dbf5849b6 --- /dev/null +++ b/src/dash-table/components/Table/controlledPropsHelper.ts @@ -0,0 +1,106 @@ +import * as R from 'ramda'; + +import derivedPaginator from 'dash-table/derived/paginator'; +import derivedSelectedRows from 'dash-table/derived/selectedRows'; +import derivedViewportData from 'dash-table/derived/data/viewport'; +import derivedVirtualData from 'dash-table/derived/data/virtual'; +import derivedVirtualizedData from 'dash-table/derived/data/virtualized'; + +import { + ControlledTableProps, + SanitizedAndDerivedProps, + SetProps, + SetState, + StandaloneState +} from './props'; + +export default () => { + const getPaginator = derivedPaginator(); + const getViewport = derivedViewportData(); + const getViewportSelectedRows = derivedSelectedRows(); + const getVirtual = derivedVirtualData(); + const getVirtualSelectedRows = derivedSelectedRows(); + const getVirtualized = derivedVirtualizedData(); + + return ( + setProps: SetProps, + setState: SetState, + props: SanitizedAndDerivedProps, + state: StandaloneState + ) => { + const { + data, + filter_query, + filter_action, + page_action, + page_current, + page_size, + selected_rows, + sort_action, + sort_by, + uiCell, + uiHeaders, + uiViewport, + virtualization, + visibleColumns + } = R.merge(props, state) as (SanitizedAndDerivedProps & StandaloneState); + + const virtual = getVirtual( + visibleColumns, + data, + filter_action, + filter_query, + sort_action, + sort_by + ); + + const viewport = getViewport( + page_action, + page_current, + page_size, + virtual.data, + virtual.indices + ); + + const virtualized = getVirtualized( + virtualization, + uiCell, + uiHeaders, + uiViewport, + viewport + ); + + const virtual_selected_rows = getVirtualSelectedRows( + virtual.indices, + selected_rows + ); + + const viewport_selected_rows = getViewportSelectedRows( + viewport.indices, + selected_rows + ); + + const paginator = getPaginator( + page_action, + page_current, + page_size, + setProps, + virtual.data + ); + + return R.mergeAll([ + props, + state, + { + paginator, + setProps, + setState, + viewport, + viewport_selected_rows, + virtual, + virtual_selected_rows, + virtualized + } + ]) as ControlledTableProps; + }; +}; \ No newline at end of file diff --git a/src/dash-table/components/Table/derivedPropsHelper.ts b/src/dash-table/components/Table/derivedPropsHelper.ts new file mode 100644 index 000000000..f25ff422b --- /dev/null +++ b/src/dash-table/components/Table/derivedPropsHelper.ts @@ -0,0 +1,107 @@ +import * as R from 'ramda'; + +import { memoizeOneWithFlag } from 'core/memoizer'; + +import QuerySyntaxTree from 'dash-table/syntax-tree/QuerySyntaxTree'; + +import { + ControlledTableProps, + SanitizedAndDerivedProps, + SetProps, + TableAction +} from './props'; + +export default () => { + const filterCache = memoizeOneWithFlag(filter_query => filter_query); + const paginationCache = memoizeOneWithFlag((page_current, page_size) => [page_current, page_size]); + const sortCache = memoizeOneWithFlag(sort => sort); + const viewportCache = memoizeOneWithFlag(viewport => viewport); + const viewportSelectedRowsCache = memoizeOneWithFlag(viewport => viewport); + const virtualCache = memoizeOneWithFlag(virtual => virtual); + const virtualSelectedRowsCache = memoizeOneWithFlag(virtual => virtual); + const structuredQueryCache = memoizeOneWithFlag( + (query: string) => new QuerySyntaxTree(query).toStructure() + ); + + return (props: ControlledTableProps, setProps: SetProps) => { + const { + filter_query, + filter_action, + page_action, + page_current, + page_size, + sort_action, + sort_by, + viewport, + viewport_selected_rows, + virtual, + virtual_selected_rows + } = props; + + const derivedStructureCache = structuredQueryCache(filter_query); + + const viewportCached = viewportCache(viewport).cached; + const virtualCached = virtualCache(virtual).cached; + + const viewportSelectedRowsCached = viewportSelectedRowsCache(viewport_selected_rows).cached; + const virtualSelectedRowsCached = virtualSelectedRowsCache(virtual_selected_rows).cached; + + const invalidatedFilter = filterCache(filter_query); + const invalidatedPagination = paginationCache(page_current, page_size); + const invalidatedSort = sortCache(sort_by); + + const invalidateSelection = + (!invalidatedFilter.cached && !invalidatedFilter.first && filter_action === TableAction.Custom) || + (!invalidatedPagination.cached && !invalidatedPagination.first && page_action === TableAction.Custom) || + (!invalidatedSort.cached && !invalidatedSort.first && sort_action === TableAction.Custom); + + let newProps: Partial = {}; + + if (!derivedStructureCache.cached) { + newProps.derived_filter_structure = derivedStructureCache.result; + } + + if (!virtualCached) { + newProps.derived_virtual_data = virtual.data; + newProps.derived_virtual_indices = virtual.indices; + newProps.derived_virtual_row_ids = R.pluck('id', virtual.data); + } + + if (!viewportCached) { + newProps.derived_viewport_data = viewport.data; + newProps.derived_viewport_indices = viewport.indices; + newProps.derived_viewport_row_ids = R.pluck('id', viewport.data); + } + + if (!virtualSelectedRowsCached) { + newProps.derived_virtual_selected_rows = virtual_selected_rows; + newProps.derived_virtual_selected_row_ids = R.map( + i => virtual.data[i].id, + virtual_selected_rows + ); + } + + if (!viewportSelectedRowsCached) { + newProps.derived_viewport_selected_rows = viewport_selected_rows; + newProps.derived_viewport_selected_row_ids = R.map( + i => viewport.data[i].id, + viewport_selected_rows + ); + } + + if (invalidateSelection) { + newProps.active_cell = undefined; + newProps.selected_cells = []; + newProps.start_cell = undefined; + newProps.end_cell = undefined; + newProps.selected_rows = []; + newProps.selected_row_ids = []; + } + + if (!R.keys(newProps).length) { + return; + } + + setTimeout(() => setProps(newProps), 0); + }; +}; \ No newline at end of file diff --git a/src/dash-table/components/Table/index.tsx b/src/dash-table/components/Table/index.tsx index 18bbf1916..f20893e7a 100644 --- a/src/dash-table/components/Table/index.tsx +++ b/src/dash-table/components/Table/index.tsx @@ -5,35 +5,28 @@ import * as R from 'ramda'; import Logger from 'core/Logger'; /*#endif*/ -import { memoizeOne, memoizeOneWithFlag } from 'core/memoizer'; +import { memoizeOne } from 'core/memoizer'; import ControlledTable from 'dash-table/components/ControlledTable'; -import derivedPaginator from 'dash-table/derived/paginator'; -import derivedSelectedRows from 'dash-table/derived/selectedRows'; -import derivedViewportData from 'dash-table/derived/data/viewport'; -import derivedVirtualData from 'dash-table/derived/data/virtual'; -import derivedVirtualizedData from 'dash-table/derived/data/virtualized'; -import derivedVisibleColumns from 'dash-table/derived/column/visible'; - -import QuerySyntaxTree from 'dash-table/syntax-tree/QuerySyntaxTree'; - import { - ControlledTableProps, SetProps, IState, StandaloneState, - SanitizedAndDerivedProps, - TableAction + SanitizedAndDerivedProps } from './props'; import 'react-select/dist/react-select.css'; import './Table.less'; +import './style'; import './Dropdown.css'; import { isEqual } from 'core/comparer'; import { SingleColumnSyntaxTree } from 'dash-table/syntax-tree'; import derivedFilterMap from 'dash-table/derived/filter/map'; +import controlledPropsHelper from './controlledPropsHelper'; +import derivedPropsHelper from './derivedPropsHelper'; + const DERIVED_REGEX = /^derived_/; export default class Table extends Component { @@ -47,7 +40,7 @@ export default class Table extends Component(), props.filter_query, - props.columns + props.visibleColumns ) }, rawFilterQuery: '', @@ -67,7 +60,7 @@ export default class Table extends Component); - } - - private getControlledProps(): ControlledTableProps { - const { - controlledSetProps: setProps, - controlledSetState: setState - } = this; - - const { - columns, - data, - filter_query, - filter_action, - page_action, - page_current, - page_size, - selected_rows, - sort_action, - sort_by, - uiCell, - uiHeaders, - uiViewport, - virtualization - } = R.merge(this.props, this.state) as (SanitizedAndDerivedProps & StandaloneState); - - const virtual = this.virtual( - columns, - data, - filter_action, - filter_query, - sort_action, - sort_by - ); - - const viewport = this.viewport( - page_action, - page_current, - page_size, - virtual.data, - virtual.indices - ); - - const virtualized = this.virtualized( - virtualization, - uiCell, - uiHeaders, - uiViewport, - viewport - ); - - const virtual_selected_rows = this.virtualSelectedRows( - virtual.indices, - selected_rows - ); - - const viewport_selected_rows = this.viewportSelectedRows( - viewport.indices, - selected_rows - ); - - const paginator = this.paginator( - page_action, - page_current, - page_size, - setProps, - virtual.data - ); - - const visibleColumns = this.visibleColumns(columns); - - return R.mergeAll([ + let controlled = this.controlledPropsHelper( + this.controlledSetProps, + this.controlledSetState, this.props, - this.state, - { - columns: visibleColumns, - paginator, - setProps, - setState, - viewport, - viewport_selected_rows, - virtual, - virtual_selected_rows, - virtualized - } - ]) as ControlledTableProps; - } - - private updateDerivedProps(controlled: ControlledTableProps) { - const { - filter_query, - filter_action, - page_action, - page_current, - page_size, - sort_action, - sort_by, - viewport, - viewport_selected_rows, - virtual, - virtual_selected_rows - } = controlled; - - const derivedStructureCache = this.structuredQueryCache(filter_query); - - const viewportCached = this.viewportCache(viewport).cached; - const virtualCached = this.virtualCache(virtual).cached; - - const viewportSelectedRowsCached = this.viewportSelectedRowsCache(viewport_selected_rows).cached; - const virtualSelectedRowsCached = this.virtualSelectedRowsCache(virtual_selected_rows).cached; - - const invalidatedFilter = this.filterCache(filter_query); - const invalidatedPagination = this.paginationCache(page_current, page_size); - const invalidatedSort = this.sortCache(sort_by); - - const invalidateSelection = - (!invalidatedFilter.cached && !invalidatedFilter.first && filter_action === TableAction.Custom) || - (!invalidatedPagination.cached && !invalidatedPagination.first && page_action === TableAction.Custom) || - (!invalidatedSort.cached && !invalidatedSort.first && sort_action === TableAction.Custom); - - const { controlledSetProps } = this; - let newProps: Partial = {}; - - if (!derivedStructureCache.cached) { - newProps.derived_filter_structure = derivedStructureCache.result; - } - - if (!virtualCached) { - newProps.derived_virtual_data = virtual.data; - newProps.derived_virtual_indices = virtual.indices; - newProps.derived_virtual_row_ids = R.pluck('id', virtual.data); - } - - if (!viewportCached) { - newProps.derived_viewport_data = viewport.data; - newProps.derived_viewport_indices = viewport.indices; - newProps.derived_viewport_row_ids = R.pluck('id', viewport.data); - } - - if (!virtualSelectedRowsCached) { - newProps.derived_virtual_selected_rows = virtual_selected_rows; - newProps.derived_virtual_selected_row_ids = R.map( - i => virtual.data[i].id, - virtual_selected_rows - ); - } - - if (!viewportSelectedRowsCached) { - newProps.derived_viewport_selected_rows = viewport_selected_rows; - newProps.derived_viewport_selected_row_ids = R.map( - i => viewport.data[i].id, - viewport_selected_rows - ); - } - - if (invalidateSelection) { - newProps.active_cell = undefined; - newProps.selected_cells = []; - newProps.start_cell = undefined; - newProps.end_cell = undefined; - newProps.selected_rows = []; - newProps.selected_row_ids = []; - } + this.state + ); - if (!R.keys(newProps).length) { - return; - } + this.updateDerivedProps(controlled, this.controlledSetProps); - setTimeout(() => controlledSetProps(newProps), 0); + return (); } private get controlledSetProps() { @@ -304,22 +135,7 @@ export default class Table extends Component (state: Partial) => this.setState(state as IState)); private readonly filterMap = derivedFilterMap(); - private readonly paginator = derivedPaginator(); - private readonly viewport = derivedViewportData(); - private readonly viewportSelectedRows = derivedSelectedRows(); - private readonly virtual = derivedVirtualData(); - private readonly virtualSelectedRows = derivedSelectedRows(); - private readonly virtualized = derivedVirtualizedData(); - private readonly visibleColumns = derivedVisibleColumns(); - private readonly filterCache = memoizeOneWithFlag(filter_query => filter_query); - private readonly paginationCache = memoizeOneWithFlag((page_current, page_size) => [page_current, page_size]); - private readonly sortCache = memoizeOneWithFlag(sort => sort); - private readonly viewportCache = memoizeOneWithFlag(viewport => viewport); - private readonly viewportSelectedRowsCache = memoizeOneWithFlag(viewport => viewport); - private readonly virtualCache = memoizeOneWithFlag(virtual => virtual); - private readonly virtualSelectedRowsCache = memoizeOneWithFlag(virtual => virtual); - private readonly structuredQueryCache = memoizeOneWithFlag( - (query: string) => new QuerySyntaxTree(query).toStructure() - ); + private readonly controlledPropsHelper = controlledPropsHelper(); + private readonly updateDerivedProps = derivedPropsHelper(); } diff --git a/src/dash-table/components/Table/props.ts b/src/dash-table/components/Table/props.ts index 85eecc885..3905fb2e2 100644 --- a/src/dash-table/components/Table/props.ts +++ b/src/dash-table/components/Table/props.ts @@ -74,7 +74,6 @@ export type SelectedCells = ICellCoordinates[]; export type SetProps = (...args: any[]) => void; export type SetState = (state: Partial) => void; export type SortAsNull = (string | number | boolean)[]; -export type VisibleColumns = IVisibleColumn[]; export enum ChangeAction { Coerce = 'coerce', @@ -153,11 +152,12 @@ export interface IDatetimeColumn extends ITypeColumn { validation?: IDateValidation; } -export interface IBaseVisibleColumn { - clearable?: boolean | boolean[]; - deletable?: boolean | boolean[]; +export interface IBaseColumn { + clearable?: boolean | boolean[] | 'first' | 'last'; + deletable?: boolean | boolean[] | 'first' |'last'; editable: boolean; - renamable?: boolean | boolean[]; + hideable?: boolean | boolean[] | 'first' | 'last'; + renamable?: boolean | boolean[] | 'first' | 'last'; sort_as_null: SortAsNull; id: ColumnId; name: string | string[]; @@ -170,11 +170,7 @@ export type StaticDropdowns = Partial; export type Fixed = { headers: false, data?: 0 } | { headers: true, data?: number }; export type IColumnType = INumberColumn | ITextColumn | IDatetimeColumn | IAnyColumn; -export type IVisibleColumn = IBaseVisibleColumn & IColumnType; - -export type IColumn = IVisibleColumn & { - hidden?: boolean; -}; +export type IColumn = IBaseColumn & IColumnType; interface IDatumObject { [key: string]: any; @@ -234,6 +230,7 @@ export interface IUSerInterfaceTooltip { } export interface IState { + activeMenu?: 'show/hide'; currentTooltip?: IUSerInterfaceTooltip; forcedResizeOnly: boolean; rawFilterQuery: string; @@ -275,6 +272,7 @@ export interface IProps { fill_width?: boolean; filter_query?: string; filter_action?: TableAction; + hidden_columns?: string[]; locale_format: INumberLocale; merge_duplicate_headers?: boolean; fixed_columns?: Fixed; @@ -372,13 +370,14 @@ interface IDerivedProps { export type PropsWithDefaults = IProps & IDefaultProps; -export type SanitizedProps = Omit< - Omit< - Merge, - 'locale_format' - >, - 'sort_as_null' ->; +export type SanitizedProps = Omit, + 'locale_format'>, + 'sort_as_null'>; export type SanitizedAndDerivedProps = SanitizedProps & IDerivedProps; @@ -386,7 +385,6 @@ export type ControlledTableProps = SanitizedProps & IState & { setProps: SetProps; setState: SetState; - columns: VisibleColumns; currentTooltip: IUSerInterfaceTooltip; paginator: IPaginator; viewport: IDerivedData; @@ -403,7 +401,6 @@ export type SetFilter = ( ) => void; export interface IFilterFactoryProps { - columns: VisibleColumns; filter_query: string; filter_action: TableAction; id: string; @@ -416,6 +413,7 @@ export interface IFilterFactoryProps { style_cell_conditional: Cells; style_filter: Style; style_filter_conditional: BasicFilters; + visibleColumns: Columns; } export type HeaderFactoryProps = ControlledTableProps & { @@ -425,7 +423,6 @@ export type HeaderFactoryProps = ControlledTableProps & { export interface ICellFactoryProps { active_cell: ICellCoordinates; - columns: VisibleColumns; dropdown: StaticDropdowns; dropdown_conditional: ConditionalDropdowns; dropdown_data: DataDropdowns; @@ -433,19 +430,19 @@ export interface ICellFactoryProps { currentTooltip: IUSerInterfaceTooltip; data: Data; editable: boolean; - id: string; - is_focused?: boolean; + end_cell: ICellCoordinates; fixed_columns: number; fixed_rows: number; + id: string; + is_focused?: boolean; paginator: IPaginator; row_deletable: boolean; row_selectable: RowSelection; selected_cells: SelectedCells; - start_cell: ICellCoordinates; - end_cell: ICellCoordinates; selected_rows: Indices; setProps: SetProps; setState: SetState; + start_cell: ICellCoordinates; style_cell: Style; style_data: Style; style_filter: Style; @@ -461,4 +458,5 @@ export interface ICellFactoryProps { viewport: IDerivedData; virtualization: boolean; virtualized: IVirtualizedDerivedData; + visibleColumns: Columns; } diff --git a/src/dash-table/components/Table/style.ts b/src/dash-table/components/Table/style.ts new file mode 100644 index 000000000..1b5eca4e1 --- /dev/null +++ b/src/dash-table/components/Table/style.ts @@ -0,0 +1,13 @@ +import { library } from '@fortawesome/fontawesome-svg-core'; +import { faEyeSlash, faTrashAlt } from '@fortawesome/free-regular-svg-icons'; +import { faEraser, faPencilAlt, faSort, faSortDown, faSortUp } from '@fortawesome/free-solid-svg-icons'; + +library.add( + faEraser, + faEyeSlash, + faPencilAlt, + faSort, + faSortDown, + faSortUp, + faTrashAlt +); diff --git a/src/dash-table/conditional/index.ts b/src/dash-table/conditional/index.ts index a0326c7b4..92f2f5691 100644 --- a/src/dash-table/conditional/index.ts +++ b/src/dash-table/conditional/index.ts @@ -1,6 +1,6 @@ import * as R from 'ramda'; -import { ColumnId, Datum, ColumnType, IVisibleColumn } from 'dash-table/components/Table/props'; +import { ColumnId, Datum, ColumnType, IColumn } from 'dash-table/components/Table/props'; import { QuerySyntaxTree } from 'dash-table/syntax-tree'; import { IConvertedStyle } from 'dash-table/derived/style'; @@ -89,17 +89,17 @@ export function ifEditable(condition: IEditableElement | undefined, isEditable: export type Filter = (s: T[]) => T[]; -export const matchesDataCell = (datum: Datum, i: number, column: IVisibleColumn): Filter => R.filter((style => +export const matchesDataCell = (datum: Datum, i: number, column: IColumn): Filter => R.filter((style => style.matchesRow(i) && style.matchesColumn(column) && style.matchesFilter(datum) )); -export const matchesFilterCell = (column: IVisibleColumn): Filter => R.filter((style => +export const matchesFilterCell = (column: IColumn): Filter => R.filter((style => style.matchesColumn(column) )); -export const matchesHeaderCell = (i: number, column: IVisibleColumn): Filter => R.filter((style => +export const matchesHeaderCell = (i: number, column: IColumn): Filter => R.filter((style => style.matchesRow(i) && style.matchesColumn(column) )); diff --git a/src/dash-table/dash/DataTable.js b/src/dash-table/dash/DataTable.js index 4d943cd20..21f70b1b8 100644 --- a/src/dash-table/dash/DataTable.js +++ b/src/dash-table/dash/DataTable.js @@ -119,36 +119,54 @@ export const propTypes = { columns: PropTypes.arrayOf(PropTypes.exact({ /** - * If True, the user can clear the column by clicking on a little `Ø` - * button on the column. + * If true, the user can clear the column by clicking on the `clear` + * action button on the column. If there are multiple header rows, true + * will display the action button on each row. + * + * If `last`, the `clear` action button will only appear on the last header + * row. If `first` it will only appear on the first header row. These + * are respectively shortcut equivalents to `[false, ..., false, true]` and + * `[true, ..., true, false]`. + * * If there are merged, multi-header columns then you can choose - * which column header row to display the "Ø" in by + * which column header row to display the `clear` action button in by * supplying an array of booleans. - * For example, `[true, false]` will display the "Ø" on the first row, - * but not the second row. - * If the "Ø" appears on a merged column, then clicking on that button - * will clear *all* of the merged columns associated with it. + * For example, `[true, false]` will display the `clear` action button + * on the first row, but not the second row. + * + * If the `clear` action button appears on a merged column, then clicking + * on that button will clear *all* of the merged columns associated with it. * * Unlike `column.deletable`, this action does not remove the column(s) * from the table. It only removed the associated entries from `data`. */ clearable: PropTypes.oneOfType([ + PropTypes.oneOf(['first', 'last']), PropTypes.bool, PropTypes.arrayOf(PropTypes.bool) ]), /** - * If True, the user can delete the column by clicking on a little `x` - * button on the column. + * If true, the user can remove the column by clicking on the `delete` + * action button on the column. If there are multiple header rows, true + * will display the action button on each row. + * + * If `last`, the `delete` action button will only appear on the last header + * row. If `first` it will only appear on the first header row. These + * are respectively shortcut equivalents to `[false, ..., false, true]` and + * `[true, ..., true, false]`. + * * If there are merged, multi-header columns then you can choose - * which column header row to display the "x" in by + * which column header row to display the `delete` action button in by * supplying an array of booleans. - * For example, `[true, false]` will display the "x" on the first row, - * but not the second row. - * If the "x" appears on a merged column, then clicking on that button - * will delete *all* of the merged columns associated with it. + * For example, `[true, false]` will display the `delete` action button + * on the first row, but not the second row. + * + * If the `delete` action button appears on a merged column, then clicking + * on that button will remove *all* of the merged columns associated with it. */ deletable: PropTypes.oneOfType([ + PropTypes.oneOf(['first', 'last']), PropTypes.bool, PropTypes.arrayOf(PropTypes.bool) ]), @@ -167,16 +185,51 @@ export const propTypes = { editable: PropTypes.bool, /** - * If True, then the name of this column is editable. - * If there are multiple column headers (if `name` is a list of strings), - * then `renamable` can refer to _which_ column header should be - * editable by defining an array of booleans. - * For example, `[true, false]` will make the first row's name editable, - * but not the second row. - * Also, updating the name in a merged column header cell will - * update the name of each column. + * If true, the user can hide the column by clicking on the `hide` + * action button on the column. If there are multiple header rows, true + * will display the action button on each row. + * + * If `last`, the `hide` action button will only appear on the last header + * row. If `first` it will only appear on the first header row. These + * are respectively shortcut equivalents to `[false, ..., false, true]` and + * `[true, ..., true, false]`. + * + * If there are merged, multi-header columns then you can choose + * which column header row to display the `hide` action button in by + * supplying an array of booleans. + * For example, `[true, false]` will display the `hide` action button + * on the first row, but not the second row. + * + * If the `hide` action button appears on a merged column, then clicking + * on that button will hide *all* of the merged columns associated with it. + */ + hideable: PropTypes.oneOfType([ + PropTypes.oneOf(['first', 'last']), + PropTypes.bool, + PropTypes.arrayOf(PropTypes.bool) + ]), + + /** + * If true, the user can rename the column by clicking on the `rename` + * action button on the column. If there are multiple header rows, true + * will display the action button on each row. + * + * If `last`, the `rename` action button will only appear on the last header + * row. If `first` it will only appear on the first header row. These + * are respectively shortcut equivalents to `[false, ..., false, true]` and + * `[true, ..., true, false]`. + * + * If there are merged, multi-header columns then you can choose + * which column header row to display the `rename` action button in by + * supplying an array of booleans. + * For example, `[true, false]` will display the `rename` action button + * on the first row, but not the second row. + * + * If the `rename` action button appears on a merged column, then clicking + * on that button will rename *all* of the merged columns associated with it. */ renamable: PropTypes.oneOfType([ + PropTypes.oneOf(['first', 'last']), PropTypes.bool, PropTypes.arrayOf(PropTypes.bool) ]), @@ -460,6 +513,13 @@ export const propTypes = { */ fill_width: PropTypes.bool, + /** + * List of columns ids of the columns that are currently hidden. + * + * See the associated nested prop `columns.hideable`. + */ + hidden_columns: PropTypes.arrayOf(PropTypes.string), + /** * The ID of the table. */ diff --git a/src/dash-table/dash/Sanitizer.ts b/src/dash-table/dash/Sanitizer.ts index 93ee5779d..dc2282630 100644 --- a/src/dash-table/dash/Sanitizer.ts +++ b/src/dash-table/dash/Sanitizer.ts @@ -15,7 +15,7 @@ import { TableAction } from 'dash-table/components/Table/props'; import headerRows from 'dash-table/derived/header/headerRows'; -import isEditable from 'dash-table/derived/cell/isEditable'; +import resolveFlag from 'dash-table/derived/cell/resolveFlag'; const D3_DEFAULT_LOCALE: INumberLocale = { symbol: ['$', ''], @@ -47,9 +47,14 @@ const getFixedRows = ( 0 : headerRows(columns) + (filter_action !== TableAction.None ? 1 : 0) + data2number(fixed.data); -const applyDefaultsToColumns = (defaultLocale: INumberLocale, defaultSort: SortAsNull, columns: Columns, editable: boolean) => R.map(column => { +const applyDefaultsToColumns = ( + defaultLocale: INumberLocale, + defaultSort: SortAsNull, + columns: Columns, + editable: boolean +) => R.map(column => { const c = R.clone(column); - c.editable = isEditable(editable, column.editable); + c.editable = resolveFlag(editable, column.editable); c.sort_as_null = c.sort_as_null || defaultSort; if (c.type === ColumnType.Numeric && c.format) { @@ -62,27 +67,39 @@ const applyDefaultsToColumns = (defaultLocale: INumberLocale, defaultSort: SortA const applyDefaultToLocale = (locale: INumberLocale) => getLocale(locale); +const getVisibleColumns = ( + columns: Columns, + hiddenColumns: string[] | undefined +) => R.filter(column => !hiddenColumns || hiddenColumns.indexOf(column.id) < 0, columns); + export default class Sanitizer { sanitize(props: PropsWithDefaults): SanitizedProps { const locale_format = this.applyDefaultToLocale(props.locale_format); + const columns = this.applyDefaultsToColumns(locale_format, props.sort_as_null, props.columns, props.editable); + const visibleColumns = this.getVisibleColumns(columns, props.hidden_columns); + let headerFormat = props.export_headers; if (props.export_format === 'xlsx' && R.isNil(headerFormat)) { headerFormat = 'names'; } else if (props.export_format === 'csv' && R.isNil(headerFormat)) { headerFormat = 'ids'; } + return R.merge(props, { - columns: this.applyDefaultsToColumns(locale_format, props.sort_as_null, props.columns, props.editable), + columns, + export_headers: headerFormat, fixed_columns: getFixedColumns(props.fixed_columns, props.row_deletable, props.row_selectable), fixed_rows: getFixedRows(props.fixed_rows, props.columns, props.filter_action), locale_format, - export_headers: headerFormat + visibleColumns }); } private readonly applyDefaultToLocale = memoizeOne(applyDefaultToLocale); private readonly applyDefaultsToColumns = memoizeOne(applyDefaultsToColumns); + + private readonly getVisibleColumns = memoizeOne(getVisibleColumns); } export const getLocale = (...locales: Partial[]): INumberLocale => diff --git a/src/dash-table/derived/cell/contents.tsx b/src/dash-table/derived/cell/contents.tsx index f4a18335f..3539546f2 100644 --- a/src/dash-table/derived/cell/contents.tsx +++ b/src/dash-table/derived/cell/contents.tsx @@ -9,9 +9,9 @@ import { IDropdown, IDropdownValue, IViewportOffset, - IVisibleColumn, + IColumn, Presentation, - VisibleColumns + Columns } from 'dash-table/components/Table/props'; import CellInput from 'dash-table/components/CellInput'; import derivedCellEventHandlerProps, { Handler } from 'dash-table/derived/cell/eventHandlerProps'; @@ -22,7 +22,7 @@ import getFormatter from 'dash-table/type/formatter'; import { shallowClone } from 'core/math/matrixZipMap'; const mapData = R.addIndex(R.map); -const mapRow = R.addIndex(R.map); +const mapRow = R.addIndex(R.map); enum CellType { Dropdown, @@ -57,7 +57,7 @@ class Contents { } partialGet = memoizeOne(( - columns: VisibleColumns, + columns: Columns, data: Data, _offset: IViewportOffset, isFocused: boolean, @@ -82,7 +82,7 @@ class Contents { get = memoizeOne(( contents: JSX.Element[][], activeCell: ICellCoordinates | undefined, - columns: VisibleColumns, + columns: Columns, data: Data, offset: IViewportOffset, isFocused: boolean, @@ -117,7 +117,7 @@ class Contents { return contents; }); - private getContent(active: boolean, isFocused: boolean, column: IVisibleColumn, dropdown: IDropdown | undefined, columnIndex: number, rowIndex: number, datum: any, formatters: ((value: any) => any)[]) { + private getContent(active: boolean, isFocused: boolean, column: IColumn, dropdown: IDropdown | undefined, columnIndex: number, rowIndex: number, datum: any, formatters: ((value: any) => any)[]) { const className = [ ...(active ? ['input-active'] : []), isFocused ? 'focused' : 'unfocused', diff --git a/src/dash-table/derived/cell/dropdowns.ts b/src/dash-table/derived/cell/dropdowns.ts index fa6cfb364..00b1cc5c4 100644 --- a/src/dash-table/derived/cell/dropdowns.ts +++ b/src/dash-table/derived/cell/dropdowns.ts @@ -12,9 +12,9 @@ import { IConditionalDropdown, IDropdown, Indices, - IVisibleColumn, + IColumn, StaticDropdowns, - VisibleColumns + Columns } from 'dash-table/components/Table/props'; import { QuerySyntaxTree } from 'dash-table/syntax-tree'; import { ifColumnId } from 'dash-table/conditional'; @@ -28,7 +28,7 @@ class Dropdowns { * Return the dropdown for each cell in the table. */ get = memoizeOne(( - columns: VisibleColumns, + columns: Columns, data: Data, indices: Indices, conditionalDropdowns: ConditionalDropdowns, @@ -59,7 +59,7 @@ class Dropdowns { private readonly dropdown = memoizerCache<[ColumnId, number]>()(( base: IDropdown | undefined, conditionals: ConditionalDropdowns, - column: IVisibleColumn, + column: IColumn, datum: Datum ) => { const conditional = R.findLast( diff --git a/src/dash-table/derived/cell/isEditable.ts b/src/dash-table/derived/cell/isEditable.ts deleted file mode 100644 index 31612b0f8..000000000 --- a/src/dash-table/derived/cell/isEditable.ts +++ /dev/null @@ -1,6 +0,0 @@ -export default ( - isEditableTable: boolean, - isEditableColumn: boolean | undefined -): boolean => isEditableColumn === undefined ? - isEditableTable : - isEditableColumn; \ No newline at end of file diff --git a/src/dash-table/derived/cell/resolveFlag.ts b/src/dash-table/derived/cell/resolveFlag.ts new file mode 100644 index 000000000..68e1f4598 --- /dev/null +++ b/src/dash-table/derived/cell/resolveFlag.ts @@ -0,0 +1,6 @@ +export default ( + tableFlag: boolean, + columnFlag: boolean | undefined +): boolean => columnFlag === undefined ? + tableFlag : + columnFlag; \ No newline at end of file diff --git a/src/dash-table/derived/cell/wrapperStyles.ts b/src/dash-table/derived/cell/wrapperStyles.ts index 7acfe6983..7ebc7ff22 100644 --- a/src/dash-table/derived/cell/wrapperStyles.ts +++ b/src/dash-table/derived/cell/wrapperStyles.ts @@ -2,14 +2,14 @@ import * as R from 'ramda'; import { CSSProperties } from 'react'; import { memoizeOneFactory } from 'core/memoizer'; -import { Data, VisibleColumns, IViewportOffset, SelectedCells } from 'dash-table/components/Table/props'; +import { Data, Columns, IViewportOffset, SelectedCells } from 'dash-table/components/Table/props'; import { IConvertedStyle, getDataCellStyle, getDataOpCellStyle } from '../style'; import { traverseMap2, shallowClone } from 'core/math/matrixZipMap'; const SELECTED_CELL_STYLE = { backgroundColor: 'var(--selected-background)' }; const partialGetter = ( - columns: VisibleColumns, + columns: Columns, styles: IConvertedStyle[], data: Data, offset: IViewportOffset diff --git a/src/dash-table/derived/cell/wrappers.tsx b/src/dash-table/derived/cell/wrappers.tsx index 9533d6314..715a7bdd0 100644 --- a/src/dash-table/derived/cell/wrappers.tsx +++ b/src/dash-table/derived/cell/wrappers.tsx @@ -3,7 +3,7 @@ import React, { MouseEvent } from 'react'; import { memoizeOne } from 'core/memoizer'; import memoizerCache from 'core/cache/memoizer'; -import { Data, IVisibleColumn, VisibleColumns, ICellCoordinates, SelectedCells, Datum, ColumnId, IViewportOffset, Presentation, ICellFactoryProps } from 'dash-table/components/Table/props'; +import { Data, IColumn, Columns, ICellCoordinates, SelectedCells, Datum, ColumnId, IViewportOffset, Presentation, ICellFactoryProps } from 'dash-table/components/Table/props'; import Cell from 'dash-table/components/Cell'; import derivedCellEventHandlerProps, { Handler } from 'dash-table/derived/cell/eventHandlerProps'; import isActiveCell from 'dash-table/derived/cell/isActive'; @@ -20,11 +20,11 @@ class Wrappers { } partialGet = memoizeOne(( - columns: VisibleColumns, + columns: Columns, data: Data, _offset: IViewportOffset ) => R.addIndex(R.map)( - (_, rowIndex) => R.addIndex(R.map)( + (_, rowIndex) => R.addIndex(R.map)( (column, columnIndex) => this.getWrapper( false, false, @@ -69,7 +69,7 @@ class Wrappers { selected: boolean, rowIndex: number, columnIndex: number, - column: IVisibleColumn + column: IColumn ) { const isDropdown = column.presentation === Presentation.Dropdown; const classes = 'dash-cell' + diff --git a/src/dash-table/derived/column/visible.ts b/src/dash-table/derived/column/visible.ts deleted file mode 100644 index 9d5d38d18..000000000 --- a/src/dash-table/derived/column/visible.ts +++ /dev/null @@ -1,8 +0,0 @@ -import * as R from 'ramda'; - -import { memoizeOneFactory } from 'core/memoizer'; -import { Columns, VisibleColumns } from 'dash-table/components/Table/props'; - -const getter = (columns: Columns): VisibleColumns => R.filter(column => !column.hidden, columns); - -export default memoizeOneFactory(getter); diff --git a/src/dash-table/derived/data/virtual.ts b/src/dash-table/derived/data/virtual.ts index 186057541..6a388ba38 100644 --- a/src/dash-table/derived/data/virtual.ts +++ b/src/dash-table/derived/data/virtual.ts @@ -8,13 +8,13 @@ import { Datum, IDerivedData, SortAsNull, - VisibleColumns, + Columns, TableAction } from 'dash-table/components/Table/props'; import { QuerySyntaxTree } from 'dash-table/syntax-tree'; const getter = ( - columns: VisibleColumns, + columns: Columns, data: Data, filter_action: TableAction, filter_query: string, diff --git a/src/dash-table/derived/edges/data.ts b/src/dash-table/derived/edges/data.ts index 44497e05c..d97169f74 100644 --- a/src/dash-table/derived/edges/data.ts +++ b/src/dash-table/derived/edges/data.ts @@ -3,7 +3,7 @@ import { memoizeOneFactory } from 'core/memoizer'; import { IViewportOffset, - VisibleColumns, + Columns, Data, ICellCoordinates } from 'dash-table/components/Table/props'; @@ -14,7 +14,7 @@ import { getDataCellEdges } from '.'; import { traverse2 } from 'core/math/matrixZipMap'; export default memoizeOneFactory(( - columns: VisibleColumns, + columns: Columns, styles: IConvertedStyle[], data: Data, offset: IViewportOffset, diff --git a/src/dash-table/derived/edges/filter.ts b/src/dash-table/derived/edges/filter.ts index 5ff35fcac..8f1f64212 100644 --- a/src/dash-table/derived/edges/filter.ts +++ b/src/dash-table/derived/edges/filter.ts @@ -4,7 +4,7 @@ import Environment from 'core/environment'; import { memoizeOneFactory } from 'core/memoizer'; import { - VisibleColumns + Columns } from 'dash-table/components/Table/props'; import { IConvertedStyle } from '../style'; @@ -14,7 +14,7 @@ import { getFilterCellEdges } from '.'; import { traverse2 } from 'core/math/matrixZipMap'; export default memoizeOneFactory(( - columns: VisibleColumns, + columns: Columns, showFilters: boolean, map: Map, styles: IConvertedStyle[], diff --git a/src/dash-table/derived/edges/header.ts b/src/dash-table/derived/edges/header.ts index 757109615..09f53f64c 100644 --- a/src/dash-table/derived/edges/header.ts +++ b/src/dash-table/derived/edges/header.ts @@ -4,7 +4,7 @@ import Environment from 'core/environment'; import { memoizeOneFactory } from 'core/memoizer'; import { - VisibleColumns + Columns } from 'dash-table/components/Table/props'; import { IConvertedStyle } from '../style'; @@ -13,7 +13,7 @@ import { getHeaderCellEdges } from '.'; import { traverse2 } from 'core/math/matrixZipMap'; export default memoizeOneFactory(( - columns: VisibleColumns, + columns: Columns, headerRows: number, styles: IConvertedStyle[], listViewStyle: boolean diff --git a/src/dash-table/derived/edges/index.ts b/src/dash-table/derived/edges/index.ts index 893b3a3ce..c323c4d15 100644 --- a/src/dash-table/derived/edges/index.ts +++ b/src/dash-table/derived/edges/index.ts @@ -1,6 +1,6 @@ import { BorderStyle, BORDER_PROPERTIES } from './type'; import { IConvertedStyle } from '../style'; -import { Datum, IVisibleColumn } from 'dash-table/components/Table/props'; +import { Datum, IColumn } from 'dash-table/components/Table/props'; import { matchesDataCell, matchesDataOpCell, matchesFilterCell, getFilterOpStyles, matchesHeaderCell, getHeaderOpStyles } from 'dash-table/conditional'; import { traverse2 } from 'core/math/matrixZipMap'; @@ -22,9 +22,9 @@ function resolveEdges(styles: IConvertedStyle[]): BorderStyle { return res; } -export const getDataCellEdges = (datum: Datum, i: number, column: IVisibleColumn) => (styles: IConvertedStyle[]) => resolveEdges(matchesDataCell(datum, i, column)(styles)); +export const getDataCellEdges = (datum: Datum, i: number, column: IColumn) => (styles: IConvertedStyle[]) => resolveEdges(matchesDataCell(datum, i, column)(styles)); export const getDataOpCellEdges = (datum: Datum, i: number) => (styles: IConvertedStyle[]) => resolveEdges(matchesDataOpCell(datum, i)(styles)); -export const getFilterCellEdges = (column: IVisibleColumn) => (styles: IConvertedStyle[]) => resolveEdges(matchesFilterCell(column)(styles)); +export const getFilterCellEdges = (column: IColumn) => (styles: IConvertedStyle[]) => resolveEdges(matchesFilterCell(column)(styles)); export const getFilterOpCellEdges = () => (styles: IConvertedStyle[]) => resolveEdges(getFilterOpStyles(styles)); -export const getHeaderCellEdges = (i: number, column: IVisibleColumn) => (styles: IConvertedStyle[]) => resolveEdges(matchesHeaderCell(i, column)(styles)); +export const getHeaderCellEdges = (i: number, column: IColumn) => (styles: IConvertedStyle[]) => resolveEdges(matchesHeaderCell(i, column)(styles)); export const getHeaderOpCellEdges = (i: number) => (styles: IConvertedStyle[]) => resolveEdges(getHeaderOpStyles(i)(styles)); \ No newline at end of file diff --git a/src/dash-table/derived/filter/map.ts b/src/dash-table/derived/filter/map.ts index 1c7219fdc..0259ebb47 100644 --- a/src/dash-table/derived/filter/map.ts +++ b/src/dash-table/derived/filter/map.ts @@ -2,7 +2,7 @@ import * as R from 'ramda'; import { memoizeOneFactory } from 'core/memoizer'; -import { VisibleColumns, IVisibleColumn, SetFilter } from 'dash-table/components/Table/props'; +import { Columns, IColumn, SetFilter } from 'dash-table/components/Table/props'; import { SingleColumnSyntaxTree, MultiColumnsSyntaxTree, getMultiColumnQueryString, getSingleColumnMap } from 'dash-table/syntax-tree'; const cloneIf = ( @@ -13,7 +13,7 @@ const cloneIf = ( export default memoizeOneFactory(( map: Map, query: string, - columns: VisibleColumns + columns: Columns ): Map => { const multiQuery = new MultiColumnsSyntaxTree(query); const reversedMap = getSingleColumnMap(multiQuery, columns); @@ -61,7 +61,7 @@ export default memoizeOneFactory(( return newMap; }); -function updateMap(map: Map, column: IVisibleColumn, value: any) { +function updateMap(map: Map, column: IColumn, value: any) { const id = column.id.toString(); const newMap = new Map(map); @@ -88,7 +88,7 @@ function updateState(map: Map, setFilter: SetFil export const updateColumnFilter = ( map: Map, - column: IVisibleColumn, + column: IColumn, value: any, setFilter: SetFilter ) => { @@ -98,7 +98,7 @@ export const updateColumnFilter = ( export const clearColumnsFilter = ( map: Map, - columns: VisibleColumns, + columns: Columns, setFilter: SetFilter ) => { R.forEach(column => { diff --git a/src/dash-table/derived/filter/wrapperStyles.ts b/src/dash-table/derived/filter/wrapperStyles.ts index b09955367..ce55600f1 100644 --- a/src/dash-table/derived/filter/wrapperStyles.ts +++ b/src/dash-table/derived/filter/wrapperStyles.ts @@ -2,13 +2,13 @@ import * as R from 'ramda'; import { memoizeOneFactory } from 'core/memoizer'; -import { VisibleColumns } from 'dash-table/components/Table/props'; +import { Columns } from 'dash-table/components/Table/props'; import { IConvertedStyle, getFilterCellStyle, getFilterOpCellStyle } from '../style'; import { traverseMap2 } from 'core/math/matrixZipMap'; const getter = ( - columns: VisibleColumns, + columns: Columns, filterStyles: IConvertedStyle[] ) => R.map( column => getFilterCellStyle(column)(filterStyles), diff --git a/src/dash-table/derived/header/columnFlag.ts b/src/dash-table/derived/header/columnFlag.ts new file mode 100644 index 000000000..ff34cb3ae --- /dev/null +++ b/src/dash-table/derived/header/columnFlag.ts @@ -0,0 +1,11 @@ +export default ( + i: number, + last: number, + flag?: boolean | boolean[] | 'first' | 'last' +): boolean => flag === 'last' ? + i === last : + flag === 'first' ? + i === 0 : + typeof flag === 'boolean' ? + flag : + !!flag && flag[i]; \ No newline at end of file diff --git a/src/dash-table/derived/header/content.tsx b/src/dash-table/derived/header/content.tsx index 3190c3178..6c606ba1e 100644 --- a/src/dash-table/derived/header/content.tsx +++ b/src/dash-table/derived/header/content.tsx @@ -5,31 +5,32 @@ import { memoizeOneFactory } from 'core/memoizer'; import { SortDirection, SortBy } from 'core/sorting'; import multiUpdate from 'core/sorting/multi'; import singleUpdate from 'core/sorting/single'; - +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { ColumnId, Data, SortMode, - VisibleColumns, - IVisibleColumn, + Columns, + IColumn, SetProps, TableAction, SetFilter } from 'dash-table/components/Table/props'; +import getColumnFlag from 'dash-table/derived/header/columnFlag'; import * as actions from 'dash-table/utils/actions'; import { SingleColumnSyntaxTree } from 'dash-table/syntax-tree'; import { clearColumnsFilter } from '../filter/map'; const doAction = ( action: ( - column: IVisibleColumn, - columns: VisibleColumns, + column: IColumn, + columns: Columns, columnRowIndex: any, mergeDuplicateHeaders: boolean, data: Data ) => any, - column: IVisibleColumn, - columns: VisibleColumns, + column: IColumn, + columns: Columns, columnRowIndex: any, mergeDuplicateHeaders: boolean, setFilter: SetFilter, @@ -39,7 +40,7 @@ const doAction = ( ) => () => { setProps(action(column, columns, columnRowIndex, mergeDuplicateHeaders, data)); - const affectedColumns: VisibleColumns = []; + const affectedColumns: Columns = []; R.forEach(id => { const affectedColumn = columns.find(c => c.id === id); if (affectedColumn) { @@ -82,7 +83,7 @@ function doSort(columnId: ColumnId, sortBy: SortBy, mode: SortMode, setProps: Se }; } -function editColumnName(column: IVisibleColumn, columns: VisibleColumns, columnRowIndex: any, setProps: SetProps, mergeDuplicateHeaders: boolean) { +function editColumnName(column: IColumn, columns: Columns, columnRowIndex: any, setProps: SetProps, mergeDuplicateHeaders: boolean) { return () => { setProps(actions.editColumnName(column, columns, columnRowIndex, mergeDuplicateHeaders)); }; @@ -97,24 +98,18 @@ function getSorting(columnId: ColumnId, sortBy: SortBy): SortDirection { function getSortingIcon(columnId: ColumnId, sortBy: SortBy) { switch (getSorting(columnId, sortBy)) { case SortDirection.Descending: - return '↓'; + return 'sort-down'; case SortDirection.Ascending: - return '↑'; + return 'sort-up'; case SortDirection.None: default: - return '↕'; + return 'sort'; } } -function getColumnFlag(i: number, flag?: boolean | boolean[]): boolean { - return typeof flag === 'boolean' ? - flag : - !!flag && flag[i]; -} - function getter( - columns: VisibleColumns, - mergeDuplicateHeaders: boolean, + columns: Columns, + hiddenColumns: string[] | undefined, data: Data, labelsAndIndices: R.KeyValuePair[], map: Map, @@ -124,19 +119,34 @@ function getter( paginationMode: TableAction, setFilter: SetFilter, setProps: SetProps, - merge_duplicate_headers: boolean + mergeDuplicateHeaders: boolean ): JSX.Element[][] { return R.addIndex, JSX.Element[]>(R.map)( ([labels, indices], headerRowIndex) => { - const isLastRow = headerRowIndex === labelsAndIndices.length - 1; + const lastRow = labelsAndIndices.length - 1; + const isLastRow = headerRowIndex === lastRow; return R.addIndex(R.map)( - columnIndex => { + (columnIndex, index) => { const column = columns[columnIndex]; - const renamable = getColumnFlag(headerRowIndex, column.renamable); - const clearable = paginationMode !== TableAction.Custom && getColumnFlag(headerRowIndex, column.clearable); - const deletable = paginationMode !== TableAction.Custom && getColumnFlag(headerRowIndex, column.deletable); + let colSpan: number; + if (!mergeDuplicateHeaders) { + colSpan = 1; + } else { + if (columnIndex === R.last(indices)) { + colSpan = labels.length - columnIndex; + } else { + colSpan = indices[index + 1] - columnIndex; + } + } + + const clearable = paginationMode !== TableAction.Custom && getColumnFlag(headerRowIndex, lastRow, column.clearable); + const deletable = paginationMode !== TableAction.Custom && getColumnFlag(headerRowIndex, lastRow, column.deletable); + const hideable = getColumnFlag(headerRowIndex, lastRow, column.hideable); + const renamable = getColumnFlag(headerRowIndex, lastRow, column.renamable); + + const spansAllColumns = columns.length === colSpan; return (
{sort_action !== TableAction.None && isLastRow ? @@ -144,7 +154,7 @@ function getter( className='sort' onClick={doSort(column.id, sortBy, mode, setProps)} > - {getSortingIcon(column.id, sortBy)} + ) : '' } @@ -152,8 +162,10 @@ function getter( {renamable ? () : + onClick={editColumnName(column, columns, headerRowIndex, setProps, mergeDuplicateHeaders)} + > + + ) : '' } @@ -161,15 +173,41 @@ function getter( () : + > + + ) : '' } {deletable ? () : + className={'column-header--delete' + (spansAllColumns ? ' disabled' : '')} + onClick={spansAllColumns ? + undefined : + doAction(actions.deleteColumn, column, columns, headerRowIndex, mergeDuplicateHeaders, setFilter, setProps, map, data) + } + > + + ) : + '' + } + + {hideable ? + ( { + const ids = actions.getColumnIds(column, columns, headerRowIndex, mergeDuplicateHeaders); + + const hidden_columns = hiddenColumns ? + R.union(hiddenColumns, ids) : + ids; + + setProps({ hidden_columns }); + }}> + + ) : '' } diff --git a/src/dash-table/derived/header/headerRows.ts b/src/dash-table/derived/header/headerRows.ts index 45e881085..d48cd67ea 100644 --- a/src/dash-table/derived/header/headerRows.ts +++ b/src/dash-table/derived/header/headerRows.ts @@ -1,10 +1,8 @@ import { IColumn } from 'dash-table/components/Table/props'; -const getColLength = (c: IColumn) => c.hidden ? - 0 : - Array.isArray(c.name) ? - c.name.length : - 1; +const getColLength = (c: IColumn) => Array.isArray(c.name) ? + c.name.length : + 1; export default ( columns: IColumn[] diff --git a/src/dash-table/derived/header/indices.ts b/src/dash-table/derived/header/indices.ts index e3e2f3212..ebf009c0f 100644 --- a/src/dash-table/derived/header/indices.ts +++ b/src/dash-table/derived/header/indices.ts @@ -1,9 +1,9 @@ import * as R from 'ramda'; -import { VisibleColumns } from 'dash-table/components/Table/props'; +import { Columns } from 'dash-table/components/Table/props'; export default ( - columns: VisibleColumns, + columns: Columns, labels: any[][], mergeHeaders: boolean ): number[][] => { diff --git a/src/dash-table/derived/header/labels.ts b/src/dash-table/derived/header/labels.ts index 5ca394d95..c1334deb4 100644 --- a/src/dash-table/derived/header/labels.ts +++ b/src/dash-table/derived/header/labels.ts @@ -1,11 +1,11 @@ import * as R from 'ramda'; -import { VisibleColumns } from 'dash-table/components/Table/props'; +import { Columns } from 'dash-table/components/Table/props'; const getColNameAt = (c: any, i: number) => (Array.isArray(c.name) ? c.name[i] : c.name); export default ( - columns: VisibleColumns, + columns: Columns, headerRows: number ): any[][] => { return R.map( diff --git a/src/dash-table/derived/header/labelsAndIndices.ts b/src/dash-table/derived/header/labelsAndIndices.ts new file mode 100644 index 000000000..8c4223b05 --- /dev/null +++ b/src/dash-table/derived/header/labelsAndIndices.ts @@ -0,0 +1,22 @@ +import * as R from 'ramda'; + +import { memoizeOneFactory } from 'core/memoizer'; + +import getHeaderRows from 'dash-table/derived/header/headerRows'; +import getIndices from 'dash-table/derived/header/indices'; +import getLabels from 'dash-table/derived/header/labels'; + +import { Columns } from 'dash-table/components/Table/props'; + +export default memoizeOneFactory(( + columns: Columns, + usedColumns: Columns, + merge_duplicate_headers: boolean +) => { + const headerRows = getHeaderRows(columns); + + const labels = getLabels(usedColumns, headerRows); + const indices = getIndices(usedColumns, labels, merge_duplicate_headers); + + return R.zip(labels, indices); +}); \ No newline at end of file diff --git a/src/dash-table/derived/header/wrapperStyles.ts b/src/dash-table/derived/header/wrapperStyles.ts index 2293e1835..b91a700aa 100644 --- a/src/dash-table/derived/header/wrapperStyles.ts +++ b/src/dash-table/derived/header/wrapperStyles.ts @@ -2,13 +2,13 @@ import * as R from 'ramda'; import { memoizeOneFactory } from 'core/memoizer'; -import { VisibleColumns } from 'dash-table/components/Table/props'; +import { Columns } from 'dash-table/components/Table/props'; import { IConvertedStyle, getHeaderCellStyle, getHeaderOpCellStyle } from '../style'; import { traverseMap2 } from 'core/math/matrixZipMap'; const getter = ( - columns: VisibleColumns, + columns: Columns, headerRows: number, headerStyles: IConvertedStyle[] ) => traverseMap2( diff --git a/src/dash-table/derived/header/wrappers.tsx b/src/dash-table/derived/header/wrappers.tsx index c18c34a5e..06d0c60ec 100644 --- a/src/dash-table/derived/header/wrappers.tsx +++ b/src/dash-table/derived/header/wrappers.tsx @@ -3,10 +3,10 @@ import React from 'react'; import { memoizeOneFactory } from 'core/memoizer'; -import { VisibleColumns } from 'dash-table/components/Table/props'; +import { Columns } from 'dash-table/components/Table/props'; function getter( - columns: VisibleColumns, + columns: Columns, labelsAndIndices: R.KeyValuePair[], mergeHeaders: boolean ): JSX.Element[][] { diff --git a/src/dash-table/derived/style/index.ts b/src/dash-table/derived/style/index.ts index ed3df3993..b885234d9 100644 --- a/src/dash-table/derived/style/index.ts +++ b/src/dash-table/derived/style/index.ts @@ -3,7 +3,7 @@ import { CSSProperties } from 'react'; import { memoizeOneFactory } from 'core/memoizer'; -import { Datum, IVisibleColumn } from 'dash-table/components/Table/props'; +import { Datum, IColumn } from 'dash-table/components/Table/props'; import { Cells, @@ -35,7 +35,7 @@ export interface IConvertedStyle { checksColumn: () => boolean; checksRow: () => boolean; checksFilter: () => boolean; - matchesColumn: (column: IVisibleColumn | undefined) => boolean; + matchesColumn: (column: IColumn | undefined) => boolean; matchesRow: (index: number | undefined) => boolean; matchesFilter: (datum: Datum) => boolean; } @@ -56,7 +56,7 @@ function convertElement(style: GenericStyle): IConvertedStyle { checksRow: () => !R.isNil(indexFilter), checksFilter: () => !R.isNil(style.if) && !R.isNil(style.if.filter_query), - matchesColumn: (column: IVisibleColumn | undefined) => + matchesColumn: (column: IColumn | undefined) => !style.if || ( !R.isNil(column) && ifColumnId(style.if, column && column.id) && @@ -139,9 +139,9 @@ export function resolveStyle(styles: IConvertedStyle[]): CSSProperties { return R.omit(BORDER_PROPERTIES_AND_FRAGMENTS, res); } -export const getDataCellStyle = (datum: Datum, i: number, column: IVisibleColumn) => (styles: IConvertedStyle[]) => resolveStyle(matchesDataCell(datum, i, column)(styles)); +export const getDataCellStyle = (datum: Datum, i: number, column: IColumn) => (styles: IConvertedStyle[]) => resolveStyle(matchesDataCell(datum, i, column)(styles)); export const getDataOpCellStyle = (datum: Datum, i: number) => (styles: IConvertedStyle[]) => resolveStyle(matchesDataOpCell(datum, i)(styles)); -export const getFilterCellStyle = (column: IVisibleColumn) => (styles: IConvertedStyle[]) => resolveStyle(matchesFilterCell(column)(styles)); +export const getFilterCellStyle = (column: IColumn) => (styles: IConvertedStyle[]) => resolveStyle(matchesFilterCell(column)(styles)); export const getFilterOpCellStyle = () => (styles: IConvertedStyle[]) => resolveStyle(getFilterOpStyles(styles)); -export const getHeaderCellStyle = (i: number, column: IVisibleColumn) => (styles: IConvertedStyle[]) => resolveStyle(matchesHeaderCell(i, column)(styles)); +export const getHeaderCellStyle = (i: number, column: IColumn) => (styles: IConvertedStyle[]) => resolveStyle(matchesHeaderCell(i, column)(styles)); export const getHeaderOpCellStyle = (i: number) => (styles: IConvertedStyle[]) => resolveStyle(getHeaderOpStyles(i)(styles)); diff --git a/src/dash-table/handlers/cellEvents.ts b/src/dash-table/handlers/cellEvents.ts index bf5e89b2a..e3f3e9875 100644 --- a/src/dash-table/handlers/cellEvents.ts +++ b/src/dash-table/handlers/cellEvents.ts @@ -10,15 +10,15 @@ export const handleClick = (propsFn: () => ICellFactoryProps, idx: number, i: nu selected_cells, active_cell, setProps, + viewport, virtualized, - columns, - viewport + visibleColumns } = propsFn(); const row = idx + virtualized.offset.rows; const col = i + virtualized.offset.columns; - const clickedCell = makeCell(row, col, columns, viewport); + const clickedCell = makeCell(row, col, visibleColumns, viewport); // clicking again on the already-active cell: ignore if (active_cell && row === active_cell.row && col === active_cell.column) { @@ -66,7 +66,7 @@ export const handleClick = (propsFn: () => ICellFactoryProps, idx: number, i: nu minCol: min(col, active_cell.column), maxCol: max(col, active_cell.column) }, - columns, + visibleColumns, viewport ); } else { @@ -82,12 +82,12 @@ export const handleDoubleClick = (propsFn: () => ICellFactoryProps, idx: number, const { is_focused, setProps, + viewport, virtualized, - columns, - viewport + visibleColumns } = propsFn(); - const c = columns[i]; + const c = visibleColumns[i]; if (!c.editable) { return; @@ -96,7 +96,7 @@ export const handleDoubleClick = (propsFn: () => ICellFactoryProps, idx: number, const newCell = makeCell( idx + virtualized.offset.rows, i + virtualized.offset.columns, - columns, viewport + visibleColumns, viewport ); if (!is_focused) { @@ -114,13 +114,13 @@ export const handleDoubleClick = (propsFn: () => ICellFactoryProps, idx: number, export const handleChange = (propsFn: () => ICellFactoryProps, idx: number, i: number, value: any) => { const { - columns, data, setProps, - virtualized + virtualized, + visibleColumns } = propsFn(); - const c = columns[i]; + const c = visibleColumns[i]; const realIdx = virtualized.indices[idx]; if (!c.editable) { @@ -146,12 +146,12 @@ export const handleChange = (propsFn: () => ICellFactoryProps, idx: number, i: n export const handleEnter = (propsFn: () => ICellFactoryProps, idx: number, i: number) => { const { - columns, + setState, virtualized, - setState + visibleColumns } = propsFn(); - const c = columns[i]; + const c = visibleColumns[i]; const realIdx = virtualized.indices[idx]; setState({ @@ -172,13 +172,13 @@ export const handleLeave = (propsFn: () => ICellFactoryProps, _idx: number, _i: export const handleMove = (propsFn: () => ICellFactoryProps, idx: number, i: number) => { const { - columns, currentTooltip, + setState, virtualized, - setState + visibleColumns } = propsFn(); - const c = columns[i]; + const c = visibleColumns[i]; const realIdx = virtualized.indices[idx]; if (currentTooltip && currentTooltip.id === c.id && currentTooltip.row === realIdx) { diff --git a/src/dash-table/syntax-tree/SingleColumnSyntaxTree.ts b/src/dash-table/syntax-tree/SingleColumnSyntaxTree.ts index 04482da3f..f5ecd81c6 100644 --- a/src/dash-table/syntax-tree/SingleColumnSyntaxTree.ts +++ b/src/dash-table/syntax-tree/SingleColumnSyntaxTree.ts @@ -3,7 +3,7 @@ import SyntaxTree from 'core/syntax-tree'; import { ILexemeResult, ILexerResult } from 'core/syntax-tree/lexer'; import { LexemeType, boundLexeme } from 'core/syntax-tree/lexicon'; -import { ColumnType, IVisibleColumn } from 'dash-table/components/Table/props'; +import { ColumnType, IColumn } from 'dash-table/components/Table/props'; import { fieldExpression } from './lexeme/expression'; import { equal, RelationalOperator } from './lexeme/relational'; @@ -60,7 +60,7 @@ function modifyLex(config: SingleColumnConfig, res: ILexerResult) { return res; } -export type SingleColumnConfig = RequiredPluck & OptionalPluck; +export type SingleColumnConfig = RequiredPluck & OptionalPluck; export default class SingleColumnSyntaxTree extends SyntaxTree { constructor(query: string, config: SingleColumnConfig) { diff --git a/src/dash-table/syntax-tree/index.ts b/src/dash-table/syntax-tree/index.ts index 46d307751..e4d03607c 100644 --- a/src/dash-table/syntax-tree/index.ts +++ b/src/dash-table/syntax-tree/index.ts @@ -6,7 +6,7 @@ import MultiColumnsSyntaxTree from './MultiColumnsSyntaxTree'; import QuerySyntaxTree from './QuerySyntaxTree'; import SingleColumnSyntaxTree from './SingleColumnSyntaxTree'; import { RelationalOperator } from './lexeme/relational'; -import { IVisibleColumn } from 'dash-table/components/Table/props'; +import { IColumn } from 'dash-table/components/Table/props'; export const getMultiColumnQueryString = ( asts: SingleColumnSyntaxTree[] @@ -17,7 +17,7 @@ export const getMultiColumnQueryString = ( export const getSingleColumnMap = ( ast: MultiColumnsSyntaxTree, - columns: IVisibleColumn[] + columns: IColumn[] ) => { if (!ast.isValid) { return; diff --git a/src/dash-table/utils/actions.js b/src/dash-table/utils/actions.js index 10064c897..9d24e8997 100644 --- a/src/dash-table/utils/actions.js +++ b/src/dash-table/utils/actions.js @@ -61,6 +61,17 @@ export function deleteColumn(column, columns, headerRowIndex, mergeDuplicateHead }; } +export function getColumnIds(column, columns, headerRowIndex, mergeDuplicateHeaders) { + const { groupIndexFirst, groupIndexLast } = getGroupedColumnIndices( + column, columns, headerRowIndex, mergeDuplicateHeaders, columns.indexOf(column) + ); + + return R.map( + c => c.id, + columns.slice(groupIndexFirst, groupIndexLast + 1) + ); +} + export const clearSelection = { active_cell: undefined, start_cell: undefined, @@ -75,7 +86,7 @@ export function changeColumnHeader(column, columns, headerRowIndex, mergeDuplica if (typeof column.name === 'string' && maxLength > 1) { const newColumnNames = Array(maxLength).fill(column.name); - const cloneColumn = R.mergeRight(column, {name: newColumnNames}); + const cloneColumn = R.mergeRight(column, { name: newColumnNames }); newColumns = newColumns.slice(0); newColumns[columnIndex] = cloneColumn; } @@ -92,7 +103,7 @@ export function changeColumnHeader(column, columns, headerRowIndex, mergeDuplica newColumns = R.set(R.lensPath(namePath), newColumnName, newColumns); }); - return { columns: newColumns} ; + return { columns: newColumns }; } export function editColumnName(column, columns, headerRowIndex, mergeDuplicateHeaders) { diff --git a/tests/cypress/src/DashTable.ts b/tests/cypress/src/DashTable.ts index 790957e98..c3d33fd49 100644 --- a/tests/cypress/src/DashTable.ts +++ b/tests/cypress/src/DashTable.ts @@ -41,6 +41,10 @@ export default class DashTable { return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"] .column-header--delete`).eq(row).click(); } + static hideColumnById(row: number, column: string) { + return cy.get(`#table tbody tr th.dash-header[data-dash-column="${column}"] .column-header--hide`).eq(row).click(); + } + static getDelete(row: number) { return cy.get(`#table tbody tr td.dash-delete-cell`).eq(row); } diff --git a/tests/cypress/tests/standalone/column_test.ts b/tests/cypress/tests/standalone/column_test.ts index c1a8d1522..3cca137fa 100644 --- a/tests/cypress/tests/standalone/column_test.ts +++ b/tests/cypress/tests/standalone/column_test.ts @@ -3,9 +3,9 @@ import DOM from 'cypress/DOM'; import { AppMode } from 'demo/AppMode'; -describe(`column, mode=${AppMode.ClearableMerged}`, () => { +describe(`column, mode=${AppMode.ActionableMerged}`, () => { beforeEach(() => { - cy.visit(`http://localhost:8080?mode=${AppMode.ClearableMerged}`); + cy.visit(`http://localhost:8080?mode=${AppMode.ActionableMerged}`); DashTable.toggleScroll(false); }); @@ -61,11 +61,31 @@ describe(`column, mode=${AppMode.ClearableMerged}`, () => { DashTable.getFilter(3).within(() => cy.get('input').should('have.value', 'is num')); DashTable.getFilter(4).within(() => cy.get('input').should('have.value', '')); }); + + it('can hide column', () => { + DashTable.getHeader(0, 0).within(() => cy.get('span.column-header-name').should('have.html', 'rows')); + DashTable.hideColumnById(0, 'rows'); + DashTable.getHeader(0, 0).within(() => cy.get('span.column-header-name').should('have.html', 'City')); + DashTable.getHeader(1, 0).within(() => cy.get('span.column-header-name').should('have.html', 'Canada')); + DashTable.getHeader(2, 0).within(() => cy.get('span.column-header-name').should('have.html', 'Toronto')); + DashTable.hideColumnById(0, 'ccc'); // Canada + DashTable.getHeader(0, 0).within(() => cy.get('span.column-header-name').should('have.html', 'City')); + DashTable.getHeader(1, 0).within(() => cy.get('span.column-header-name').should('have.html', 'Canada')); + DashTable.getHeader(2, 0).within(() => cy.get('span.column-header-name').should('have.html', 'Montréal')); + DashTable.hideColumnById(0, 'fff'); // Boston + DashTable.getHeader(0, 0).within(() => cy.get('span.column-header-name').should('have.html', 'City')); + DashTable.getHeader(1, 0).within(() => cy.get('span.column-header-name').should('have.html', 'Canada')); + DashTable.getHeader(0, 1).within(() => cy.get('span.column-header-name').should('have.html', 'America')); + DashTable.getHeader(1, 1).within(() => cy.get('span.column-header-name').should('have.html', 'New York City')); + DashTable.getHeader(0, 0).within(() => cy.get('span.column-header-name').should('have.html', 'City')); + DashTable.getHeader(0, 2).within(() => cy.get('span.column-header-name').should('have.html', 'France')); + DashTable.getHeader(1, 2).within(() => cy.get('span.column-header-name').should('have.html', 'Paris')); + }); }); -describe(`column, mode=${AppMode.Clearable}`, () => { +describe(`column, mode=${AppMode.Actionable}`, () => { beforeEach(() => { - cy.visit(`http://localhost:8080?mode=${AppMode.Clearable}`); + cy.visit(`http://localhost:8080?mode=${AppMode.Actionable}`); DashTable.toggleScroll(false); }); @@ -122,4 +142,23 @@ describe(`column, mode=${AppMode.Clearable}`, () => { DashTable.getFilter(3).within(() => cy.get('input').should('have.value', 'is num')); DashTable.getFilter(4).within(() => cy.get('input').should('have.value', '')); }); + + it('can hide column', () => { + DashTable.getHeader(0, 0).within(() => cy.get('span.column-header-name').should('have.html', 'rows')); + DashTable.hideColumnById(0, 'rows'); + DashTable.getHeader(0, 0).within(() => cy.get('span.column-header-name').should('have.html', 'City')); + DashTable.getHeader(1, 0).within(() => cy.get('span.column-header-name').should('have.html', 'Canada')); + DashTable.getHeader(2, 0).within(() => cy.get('span.column-header-name').should('have.html', 'Toronto')); + DashTable.hideColumnById(0, 'ccc'); // Canada + DashTable.getHeader(0, 0).within(() => cy.get('span.column-header-name').should('have.html', 'City')); + DashTable.getHeader(1, 0).within(() => cy.get('span.column-header-name').should('have.html', 'Canada')); + DashTable.getHeader(2, 0).within(() => cy.get('span.column-header-name').should('have.html', 'Montréal')); + DashTable.hideColumnById(0, 'fff'); // Boston + DashTable.getHeader(0, 1).within(() => cy.get('span.column-header-name').should('have.html', 'City')); + DashTable.getHeader(1, 1).within(() => cy.get('span.column-header-name').should('have.html', 'America')); + DashTable.getHeader(2, 1).within(() => cy.get('span.column-header-name').should('have.html', 'New York City')); + DashTable.getHeader(0, 2).within(() => cy.get('span.column-header-name').should('have.html', 'City')); + DashTable.getHeader(1, 2).within(() => cy.get('span.column-header-name').should('have.html', 'France')); + DashTable.getHeader(2, 2).within(() => cy.get('span.column-header-name').should('have.html', 'Paris')); + }); }); \ No newline at end of file diff --git a/tests/cypress/tests/unit/isEditable_test.ts b/tests/cypress/tests/unit/isEditable_test.ts index 91185b28b..75d26fe3b 100644 --- a/tests/cypress/tests/unit/isEditable_test.ts +++ b/tests/cypress/tests/unit/isEditable_test.ts @@ -1,27 +1,27 @@ -import isEditable from 'dash-table/derived/cell/isEditable'; +import resolveFlag from 'dash-table/derived/cell/resolveFlag'; describe('isEditable', () => { it('returns false if table=false, column=false', () => - expect(isEditable(false, false)).to.equal(false) + expect(resolveFlag(false, false)).to.equal(false) ); it('returns false if table=false, column=undefined', () => - expect(isEditable(false, undefined)).to.equal(false) + expect(resolveFlag(false, undefined)).to.equal(false) ); it('returns true if table=false, column=true', () => - expect(isEditable(false, true)).to.equal(true) + expect(resolveFlag(false, true)).to.equal(true) ); it('returns false if table=true, column=false', () => - expect(isEditable(true, false)).to.equal(false) + expect(resolveFlag(true, false)).to.equal(false) ); it('returns true if table=true, column=undefined', () => - expect(isEditable(true, undefined)).to.equal(true) + expect(resolveFlag(true, undefined)).to.equal(true) ); it('returns true if table=true, column=true', () => - expect(isEditable(true, true)).to.equal(true) + expect(resolveFlag(true, true)).to.equal(true) ); }); \ No newline at end of file diff --git a/tests/visual/percy-storybook/DashTable.percy.tsx b/tests/visual/percy-storybook/DashTable.percy.tsx index 9b3d8f4d8..2458a444c 100644 --- a/tests/visual/percy-storybook/DashTable.percy.tsx +++ b/tests/visual/percy-storybook/DashTable.percy.tsx @@ -200,38 +200,34 @@ const sparseData = (() => { )); })(); -const hiddenColumns = R.addIndex(R.map)((column, index) => - R.mergeAll([ - {}, - column, - { hidden: index % 2 === 0 } - ]), - columnsA2J -); +const hiddenColumns = columnsA2J.map(c => c.id).filter((_, index) => index % 2 === 0); storiesOf('DashTable/Hidden Columns', module) .add('hides', () => ()) .add('active cell', () => ()) .add('selected cells', () => ()); diff --git a/tests/visual/percy-storybook/Header.actions.percy.tsx b/tests/visual/percy-storybook/Header.actions.percy.tsx index 497992ff9..7db9ab188 100644 --- a/tests/visual/percy-storybook/Header.actions.percy.tsx +++ b/tests/visual/percy-storybook/Header.actions.percy.tsx @@ -77,6 +77,26 @@ const scenarios: ITest[] = [ }, COLUMNS_BASE) } }, { + name: 'clearable (first-city, last-climate)', + props: { + columns: R.map((c: any) => { + const firstName = c.name[0]; + + if (firstName === 'City') { + return R.mergeRight(c, { + clearable: 'first' + }); + } else if (firstName === 'Climate') { + return R.mergeRight(c, { + clearable: 'last' + }); + + } else { + return c; + } + }, COLUMNS_BASE) + } + }, { name: 'deletable', props: { columns: R.map(c => R.mergeRight(c, { @@ -104,11 +124,79 @@ const scenarios: ITest[] = [ }, COLUMNS_BASE) } }, { - name: 'clearable+deletable', + name: 'deletable (first-city, last-climate)', + props: { + columns: R.map((c: any) => { + const firstName = c.name[0]; + + if (firstName === 'City') { + return R.mergeRight(c, { + deletable: 'first' + }); + } else if (firstName === 'Climate') { + return R.mergeRight(c, { + deletable: 'last' + }); + + } else { + return c; + } + }, COLUMNS_BASE) + } + }, { + name: 'hideable', + props: { + columns: R.map(c => R.mergeRight(c, { + hideable: true + }), COLUMNS_BASE) + } + }, { + name: 'hideable (top-city, bottom-climate)', + props: { + columns: R.map((c: any) => { + const firstName = c.name[0]; + + if (firstName === 'City') { + return R.mergeRight(c, { + hideable: [true, false] + }); + } else if (firstName === 'Climate') { + return R.mergeRight(c, { + hideable: [false, true] + }); + + } else { + return c; + } + }, COLUMNS_BASE) + } + }, { + name: 'hideable (first-city, last-climate)', + props: { + columns: R.map((c: any) => { + const firstName = c.name[0]; + + if (firstName === 'City') { + return R.mergeRight(c, { + hideable: 'first' + }); + } else if (firstName === 'Climate') { + return R.mergeRight(c, { + hideable: 'last' + }); + + } else { + return c; + } + }, COLUMNS_BASE) + } + }, { + name: 'clearable+deletable+hideable', props: { columns: R.map(c => R.mergeRight(c, { clearable: true, - deletable: true + deletable: true, + hideable: true }), COLUMNS_BASE) } } diff --git a/tests/visual/percy-storybook/Hideable.percy.tsx b/tests/visual/percy-storybook/Hideable.percy.tsx new file mode 100644 index 000000000..e93fd417e --- /dev/null +++ b/tests/visual/percy-storybook/Hideable.percy.tsx @@ -0,0 +1,171 @@ +import parser from 'papaparse'; +import * as R from 'ramda'; +import React from 'react'; +import { storiesOf } from '@storybook/react'; + +import DataTable from 'dash-table/dash/DataTable'; + +import dataset from './../../assets/gapminder.csv'; +const result = parser.parse(dataset, { delimiter: ',', header: true }); + +const getColumns = () => R.addIndex(R.map)( + (id, index) => ({ + name: [ + Math.floor(index / 4).toString(), + Math.floor(index / 2).toString(), + id + ], + id + }), + result.meta.fields +); + +interface ITest { + name: string; + props: any; +} + +const DEFAULT_PROPS = { + id: 'table', + data: result.data.slice(0, 10) +}; + +const variants: ITest[] = [ + { name: 'merged', props: { merge_duplicate_headers: true } }, + { name: 'unmerged', props: { merge_duplicate_headers: false } } +]; + +const scenarios: ITest[] = [ + { + name: 'default (all)', + props: { + columns: getColumns().map((c: any) => { + c.hideable = true; + + return c; + }) + } + }, + { + name: 'explicit bottom row', + props: { + columns: getColumns().map((c: any) => { + c.hideable = [false, false, true]; + + return c; + }) + } + }, + { + name: 'explicit middle row', + props: { + columns: getColumns().map((c: any) => { + c.hideable = [false, true, false]; + + return c; + }) + } + }, + { + name: 'explicit top row', + props: { + columns: getColumns().map((c: any) => { + c.hideable = [true, false, false]; + + return c; + }) + } + }, + { + name: 'some non-hideable top rows', + props: { + columns: getColumns().map((c: any, i) => { + c.hideable = [true, false, false]; + if (i % 8 === 0) { + c.hideable = false; + } + + return c; + }) + } + }, + { + name: 'some non-hideable middle rows', + props: { + columns: getColumns().map((c: any, i) => { + c.hideable = [false, true, false]; + if (i % 4 === 0) { + c.hideable = false; + } + + return c; + }) + } + }, + { + name: 'some non-hideable bottom rows', + props: { + columns: getColumns().map((c: any, i) => { + c.hideable = [false, false, true]; + if (i % 2 === 0) { + c.hideable = false; + } + + return c; + }) + } + }, + { + name: 'some hideable top rows', + props: { + columns: getColumns().map((c: any, i) => { + c.hideable = false; + if (i % 8 === 0) { + c.hideable = [true, false, false]; + } + + return c; + }) + } + }, + { + name: 'some hideable middle rows', + props: { + columns: getColumns().map((c: any, i) => { + c.hideable = false; + if (i % 4 === 0) { + c.hideable = [false, true, false]; + } + + return c; + }) + } + }, + { + name: 'some hideable bottom rows', + props: { + columns: getColumns().map((c: any, i) => { + c.hideable = false; + if (i % 2 === 0) { + c.hideable = [false, false, true]; + } + + return c; + }) + } + } +]; + +const tests = R.xprod(scenarios, variants); + +R.reduce( + (chain, [scenario, variant]) => chain.add(`${scenario.name} (${variant.name})`, () => ()), + storiesOf(`DashTable/Hideable Columns`, module), + tests +); \ No newline at end of file