Issue 188 - Simpler multiline / ellipsis

CHANGELOG.md

@@ -14,6 +14,11 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 [#18](https://github.com/plotly/dash-table/issues/18)
 - Fix row selection vertical and horizontal alignment
 
+[#103](https://github.com/plotly/dash-table/issues/103)
+- Simplify usage for multi-line cells and ellipsis. The cell's content now inherits the value of
+`white-space`, `overflow` and `text-overflow` from its parent, making it possible to style
+multi-line & ellipsis with `style_data` and other style props.
+
 [#583](https://github.com/plotly/dash-table/issues/583)
 - Fix regression when editing the content of a cell in a scrolled virtualized table
 

src/core/Stylesheet.ts

@@ -55,19 +55,6 @@ class StylesheetFacade {
 export default class Stylesheet {
     private stylesheet: StylesheetFacade;
 
-    static unit(dimension: any, defaultUnit: 'em' | 'rem' | 'px' | '%' = 'px') {
-        if (Stylesheet.hasUnit(dimension)) {
-            return dimension;
-        } else {
-            return `${dimension}${defaultUnit}`;
-        }
-    }
-
-    static hasUnit(dimension: any) {
-        return typeof dimension === 'string' &&
-            /^\d+(\.\d+)?(px|em|rem|%)$/.test(dimension);
-    }
-
     constructor(private readonly prefix: string) {
         this.stylesheet = new StylesheetFacade(`${prefix}-dynamic-inline.css`);
     }

src/dash-table/components/Cell/index.tsx

@@ -23,6 +23,8 @@ export default class Cell extends Component<ICellProps> {
         const {
             attributes,
             classes,
+            onClick,
+            onDoubleClick,
             onMouseEnter,
             onMouseLeave,
             onMouseMove,
@@ -34,6 +36,8 @@ export default class Cell extends Component<ICellProps> {
             children={(this as any).props.children}
             tabIndex={-1}
             className={classes}
+            onClick={onClick}
+            onDoubleClick={onDoubleClick}
             onMouseEnter={onMouseEnter}
             onMouseLeave={onMouseLeave}
             onMouseMove={onMouseMove}

src/dash-table/components/Cell/props.ts

@@ -8,6 +8,8 @@ export interface ICellProps {
     active: boolean;
     attributes: IAttributes;
     classes: string;
+    onClick: (e: MouseEvent) => void;
+    onDoubleClick: (e: MouseEvent) => void;
     onMouseEnter: (e: MouseEvent) => void;
     onMouseLeave: (e: MouseEvent) => void;
     onMouseMove: (e: MouseEvent) => void;

src/dash-table/components/CellDropdown/index.tsx

@@ -29,7 +29,10 @@ export default class CellDropdown extends PureComponent<IProps> {
             disabled
         } = this.props;
 
-        return (<div className='dash-dropdown-cell-value-container dash-cell-value-container'>
+        return (<div
+            className='dash-dropdown-cell-value-container dash-cell-value-container'
+            onClick={this.handleClick}
+        >
             <div className='dropdown-cell-value-shadow cell-value-shadow'>
                 {(dropdown && dropdown.find(entry => entry.value === value) || { label: undefined }).label}
             </div>
@@ -56,6 +59,10 @@ export default class CellDropdown extends PureComponent<IProps> {
         this.setFocus();
     }
 
+    private handleClick(e: React.MouseEvent) {
+        e.stopPropagation();
+    }
+
     private setFocus() {
         const { active } = this.props;
         if (!active) {

src/dash-table/components/CellInput/index.tsx

@@ -15,8 +15,6 @@ interface ICellProps {
     className: string;
     focused: boolean;
     onChange: (e: ChangeEvent) => void;
-    onClick: (e: MouseEvent) => void;
-    onDoubleClick: (e: MouseEvent) => void;
     onMouseUp: (e: MouseEvent) => void;
     onPaste: (e: ClipboardEvent<Element>) => void;
     type?: string;
@@ -40,8 +38,6 @@ export default class CellInput extends PureComponent<ICellProps, ICellState> {
     render() {
         const {
             className,
-            onClick,
-            onDoubleClick,
             onMouseUp,
             onPaste,
             value
@@ -62,8 +58,6 @@ export default class CellInput extends PureComponent<ICellProps, ICellState> {
                 className={className}
                 onBlur={this.propagateChange}
                 onChange={this.handleChange}
-                onClick={onClick}
-                onDoubleClick={onDoubleClick}
                 onKeyDown={this.handleKeyDown}
                 onMouseUp={onMouseUp}
                 onPaste={onPaste}

src/dash-table/components/CellLabel/index.tsx

@@ -1,28 +1,21 @@
 import React, {
-    MouseEvent,
     PureComponent
 } from 'react';
 
 interface IProps {
     className: string;
-    onClick: (e: MouseEvent) => void;
-    onDoubleClick: (e: MouseEvent) => void;
     value: any;
 }
 
 export default class CellLabel extends PureComponent<IProps> {
     render() {
         const {
             className,
-            onClick,
-            onDoubleClick,
             value
         } = this.props;
 
         return (<div
             className={className}
-            onClick={onClick}
-            onDoubleClick={onDoubleClick}
         >
             {value}
         </div>);

src/dash-table/components/Table/Table.less

@@ -316,12 +316,6 @@
                 }
             }
 
-            div.dash-cell-value {
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-            }
-
             .cell-value-shadow {
                 margin: auto 0;
                 opacity: 0;
@@ -352,27 +346,36 @@
             }
         }
 
+        th {
+            white-space: nowrap;
+
+            .column-header--clear,
+            .column-header--delete,
+            .column-header--edit,
+            .column-header--hide
+            .column-header--sort {
+                .not-selectable();
+                cursor: pointer;
+            }
+        }
+
         // cell content styling
         td, th {
             background-clip: padding-box;
             padding: 2px;
-            white-space: nowrap;
             overflow-x: hidden;
-            text-overflow: ellipsis;
+            white-space: nowrap;
 
             height: 30px;
 
             text-align: right;
-        }
 
-        th {
-            .column-header--clear,
-            .column-header--delete,
-            .column-header--edit,
-            .column-header--hide
-            .column-header--sort {
-                .not-selectable();
-                cursor: pointer;
+            div.dash-cell-value {
+                display: inline;
+                vertical-align: middle;
+                white-space: inherit;
+                overflow: inherit;
+                text-overflow: inherit;
             }
         }
     }

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

@@ -151,8 +151,6 @@ class Contents {
                     className={className}
                     focused={isFocused}
                     onChange={this.handlers(Handler.Change, rowIndex, columnIndex)}
-                    onClick={this.handlers(Handler.Click, rowIndex, columnIndex)}
-                    onDoubleClick={this.handlers(Handler.DoubleClick, rowIndex, columnIndex)}
                     onMouseUp={this.handlers(Handler.MouseUp, rowIndex, columnIndex)}
                     onPaste={this.handlers(Handler.Paste, rowIndex, columnIndex)}
                     type={column.type}
@@ -168,8 +166,6 @@ class Contents {
                 return (<CellLabel
                     className={className}
                     key={`column-${columnIndex}`}
-                    onClick={this.handlers(Handler.Click, rowIndex, columnIndex)}
-                    onDoubleClick={this.handlers(Handler.DoubleClick, rowIndex, columnIndex)}
                     value={resolvedValue}
                 />);
         }

src/dash-table/derived/cell/wrappers.tsx

@@ -86,7 +86,9 @@ class Wrappers {
             rowIndex,
             this.handlers(Handler.Enter, rowIndex, columnIndex),
             this.handlers(Handler.Leave, rowIndex, columnIndex),
-            this.handlers(Handler.Move, rowIndex, columnIndex)
+            this.handlers(Handler.Move, rowIndex, columnIndex),
+            this.handlers(Handler.Click, rowIndex, columnIndex),
+            this.handlers(Handler.DoubleClick, rowIndex, columnIndex)
         );
     }
 
@@ -101,7 +103,9 @@ class Wrappers {
         rowIndex: number,
         onEnter: (e: MouseEvent) => void,
         onLeave: (e: MouseEvent) => void,
-        onMove: (e: MouseEvent) => void
+        onMove: (e: MouseEvent) => void,
+        onClick: (e: MouseEvent) => void,
+        onDoubleClick: (e: MouseEvent) => void
     ) => (<Cell
         active={active}
         attributes={{
@@ -110,6 +114,8 @@ class Wrappers {
         }}
         classes={classes}
         key={`column-${columnIndex}`}
+        onClick={onClick}
+        onDoubleClick={onDoubleClick}
         onMouseEnter={onEnter}
         onMouseLeave={onLeave}
         onMouseMove={onMove}

src/dash-table/handlers/cellEvents.ts

@@ -5,7 +5,12 @@ import isSelected from 'dash-table/derived/cell/isSelected';
 import { makeCell, makeSelection } from 'dash-table/derived/cell/cellProps';
 import reconcile from 'dash-table/type/reconcile';
 
-export const handleClick = (propsFn: () => ICellFactoryProps, idx: number, i: number, e: any) => {
+export const handleClick = (
+    propsFn: () => ICellFactoryProps,
+    idx: number,
+    i: number,
+    e: any
+) => {
     const {
         selected_cells,
         active_cell,
@@ -15,13 +20,12 @@ export const handleClick = (propsFn: () => ICellFactoryProps, idx: number, i: nu
         visibleColumns
     } = propsFn();
 
-    const row = idx + virtualized.offset.rows;
     const col = i + virtualized.offset.columns;
 
-    const clickedCell = makeCell(row, col, visibleColumns, viewport);
+    const clickedCell = makeCell(idx, col, visibleColumns, viewport);
 
     // clicking again on the already-active cell: ignore
-    if (active_cell && row === active_cell.row && col === active_cell.column) {
+    if (active_cell && idx === active_cell.row && col === active_cell.column) {
         return;
     }
 
@@ -40,7 +44,7 @@ export const handleClick = (propsFn: () => ICellFactoryProps, idx: number, i: nu
         browserSelection.removeAllRanges();
     }
 
-    const selected = isSelected(selected_cells, row, col);
+    const selected = isSelected(selected_cells, idx, col);
 
     // if clicking on a *different* already-selected cell (NOT shift-clicking,
     // not the active cell), don't alter the selection,
@@ -61,8 +65,8 @@ export const handleClick = (propsFn: () => ICellFactoryProps, idx: number, i: nu
     if (e.shiftKey && active_cell) {
         newProps.selected_cells = makeSelection(
             {
-                minRow: min(row, active_cell.row),
-                maxRow: max(row, active_cell.row),
+                minRow: min(idx, active_cell.row),
+                maxRow: max(idx, active_cell.row),
                 minCol: min(col, active_cell.column),
                 maxCol: max(col, active_cell.column)
             },
@@ -94,7 +98,7 @@ export const handleDoubleClick = (propsFn: () => ICellFactoryProps, idx: number,
     }
 
     const newCell = makeCell(
-        idx + virtualized.offset.rows,
+        idx,
         i + virtualized.offset.columns,
         visibleColumns, viewport
     );