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

Commit a4ea856

Browse files
Marc-Andre-RivetMarc-Andre-Rivet
authored
Issue 188 - Simpler multiline / ellipsis (#573)
1 parent 03dfc7f commit a4ea856

File tree

11 files changed

+59
-58
lines changed

11 files changed

+59
-58
lines changed

‎CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,11 @@ This project adheres to [Semantic Versioning](http://semver.org/).
1414
[#18](https://github.com/plotly/dash-table/issues/18)
1515
- Fix row selection vertical and horizontal alignment
1616

17+
[#103](https://github.com/plotly/dash-table/issues/103)
18+
- Simplify usage for multi-line cells and ellipsis. The cell's content now inherits the value of
19+
`white-space`, `overflow` and `text-overflow` from its parent, making it possible to style
20+
multi-line & ellipsis with `style_data` and other style props.
21+
1722
[#583](https://github.com/plotly/dash-table/issues/583)
1823
- Fix regression when editing the content of a cell in a scrolled virtualized table
1924

‎src/core/Stylesheet.ts‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -55,19 +55,6 @@ class StylesheetFacade {
5555
export default class Stylesheet {
5656
private stylesheet: StylesheetFacade;
5757

58-
static unit(dimension: any, defaultUnit: 'em' | 'rem' | 'px' | '%' = 'px') {
59-
if (Stylesheet.hasUnit(dimension)) {
60-
return dimension;
61-
} else {
62-
return `${dimension}${defaultUnit}`;
63-
}
64-
}
65-
66-
static hasUnit(dimension: any) {
67-
return typeof dimension === 'string' &&
68-
/^\d+(\.\d+)?(px|em|rem|%)$/.test(dimension);
69-
}
70-
7158
constructor(private readonly prefix: string) {
7259
this.stylesheet = new StylesheetFacade(`${prefix}-dynamic-inline.css`);
7360
}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ export default class Cell extends Component<ICellProps> {
2323
const {
2424
attributes,
2525
classes,
26+
onClick,
27+
onDoubleClick,
2628
onMouseEnter,
2729
onMouseLeave,
2830
onMouseMove,
@@ -34,6 +36,8 @@ export default class Cell extends Component<ICellProps> {
3436
children={(this as any).props.children}
3537
tabIndex={-1}
3638
className={classes}
39+
onClick={onClick}
40+
onDoubleClick={onDoubleClick}
3741
onMouseEnter={onMouseEnter}
3842
onMouseLeave={onMouseLeave}
3943
onMouseMove={onMouseMove}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ export interface ICellProps {
88
active: boolean;
99
attributes: IAttributes;
1010
classes: string;
11+
onClick: (e: MouseEvent) => void;
12+
onDoubleClick: (e: MouseEvent) => void;
1113
onMouseEnter: (e: MouseEvent) => void;
1214
onMouseLeave: (e: MouseEvent) => void;
1315
onMouseMove: (e: MouseEvent) => void;

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,10 @@ export default class CellDropdown extends PureComponent<IProps> {
2929
disabled
3030
} = this.props;
3131

32-
return (<div className='dash-dropdown-cell-value-container dash-cell-value-container'>
32+
return (<div
33+
className='dash-dropdown-cell-value-container dash-cell-value-container'
34+
onClick={this.handleClick}
35+
>
3336
<div className='dropdown-cell-value-shadow cell-value-shadow'>
3437
{(dropdown && dropdown.find(entry => entry.value === value) || { label: undefined }).label}
3538
</div>
@@ -56,6 +59,10 @@ export default class CellDropdown extends PureComponent<IProps> {
5659
this.setFocus();
5760
}
5861

62+
private handleClick(e: React.MouseEvent) {
63+
e.stopPropagation();
64+
}
65+
5966
private setFocus() {
6067
const { active } = this.props;
6168
if (!active) {

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

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,6 @@ interface ICellProps {
1515
className: string;
1616
focused: boolean;
1717
onChange: (e: ChangeEvent) => void;
18-
onClick: (e: MouseEvent) => void;
19-
onDoubleClick: (e: MouseEvent) => void;
2018
onMouseUp: (e: MouseEvent) => void;
2119
onPaste: (e: ClipboardEvent<Element>) => void;
2220
type?: string;
@@ -40,8 +38,6 @@ export default class CellInput extends PureComponent<ICellProps, ICellState> {
4038
render() {
4139
const {
4240
className,
43-
onClick,
44-
onDoubleClick,
4541
onMouseUp,
4642
onPaste,
4743
value
@@ -62,8 +58,6 @@ export default class CellInput extends PureComponent<ICellProps, ICellState> {
6258
className={className}
6359
onBlur={this.propagateChange}
6460
onChange={this.handleChange}
65-
onClick={onClick}
66-
onDoubleClick={onDoubleClick}
6761
onKeyDown={this.handleKeyDown}
6862
onMouseUp={onMouseUp}
6963
onPaste={onPaste}

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

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,21 @@
11
import React, {
2-
MouseEvent,
32
PureComponent
43
} from 'react';
54

65
interface IProps {
76
className: string;
8-
onClick: (e: MouseEvent) => void;
9-
onDoubleClick: (e: MouseEvent) => void;
107
value: any;
118
}
129

1310
export default class CellLabel extends PureComponent<IProps> {
1411
render() {
1512
const {
1613
className,
17-
onClick,
18-
onDoubleClick,
1914
value
2015
} = this.props;
2116

2217
return (<div
2318
className={className}
24-
onClick={onClick}
25-
onDoubleClick={onDoubleClick}
2619
>
2720
{value}
2821
</div>);

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

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -316,12 +316,6 @@
316316
}
317317
}
318318

319-
div.dash-cell-value {
320-
display: flex;
321-
flex-direction: column;
322-
justify-content: center;
323-
}
324-
325319
.cell-value-shadow {
326320
margin: auto 0;
327321
opacity: 0;
@@ -352,27 +346,36 @@
352346
}
353347
}
354348

349+
th {
350+
white-space: nowrap;
351+
352+
.column-header--clear,
353+
.column-header--delete,
354+
.column-header--edit,
355+
.column-header--hide
356+
.column-header--sort {
357+
.not-selectable();
358+
cursor: pointer;
359+
}
360+
}
361+
355362
// cell content styling
356363
td, th {
357364
background-clip: padding-box;
358365
padding: 2px;
359-
white-space: nowrap;
360366
overflow-x: hidden;
361-
text-overflow: ellipsis;
367+
white-space: nowrap;
362368

363369
height: 30px;
364370

365371
text-align: right;
366-
}
367372

368-
th {
369-
.column-header--clear,
370-
.column-header--delete,
371-
.column-header--edit,
372-
.column-header--hide
373-
.column-header--sort {
374-
.not-selectable();
375-
cursor: pointer;
373+
div.dash-cell-value {
374+
display: inline;
375+
vertical-align: middle;
376+
white-space: inherit;
377+
overflow: inherit;
378+
text-overflow: inherit;
376379
}
377380
}
378381
}

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -151,8 +151,6 @@ class Contents {
151151
className={className}
152152
focused={isFocused}
153153
onChange={this.handlers(Handler.Change, rowIndex, columnIndex)}
154-
onClick={this.handlers(Handler.Click, rowIndex, columnIndex)}
155-
onDoubleClick={this.handlers(Handler.DoubleClick, rowIndex, columnIndex)}
156154
onMouseUp={this.handlers(Handler.MouseUp, rowIndex, columnIndex)}
157155
onPaste={this.handlers(Handler.Paste, rowIndex, columnIndex)}
158156
type={column.type}
@@ -168,8 +166,6 @@ class Contents {
168166
return (<CellLabel
169167
className={className}
170168
key={`column-${columnIndex}`}
171-
onClick={this.handlers(Handler.Click, rowIndex, columnIndex)}
172-
onDoubleClick={this.handlers(Handler.DoubleClick, rowIndex, columnIndex)}
173169
value={resolvedValue}
174170
/>);
175171
}

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,9 @@ class Wrappers {
8686
rowIndex,
8787
this.handlers(Handler.Enter, rowIndex, columnIndex),
8888
this.handlers(Handler.Leave, rowIndex, columnIndex),
89-
this.handlers(Handler.Move, rowIndex, columnIndex)
89+
this.handlers(Handler.Move, rowIndex, columnIndex),
90+
this.handlers(Handler.Click, rowIndex, columnIndex),
91+
this.handlers(Handler.DoubleClick, rowIndex, columnIndex)
9092
);
9193
}
9294

@@ -101,7 +103,9 @@ class Wrappers {
101103
rowIndex: number,
102104
onEnter: (e: MouseEvent) => void,
103105
onLeave: (e: MouseEvent) => void,
104-
onMove: (e: MouseEvent) => void
106+
onMove: (e: MouseEvent) => void,
107+
onClick: (e: MouseEvent) => void,
108+
onDoubleClick: (e: MouseEvent) => void
105109
) => (<Cell
106110
active={active}
107111
attributes={{
@@ -110,6 +114,8 @@ class Wrappers {
110114
}}
111115
classes={classes}
112116
key={`column-${columnIndex}`}
117+
onClick={onClick}
118+
onDoubleClick={onDoubleClick}
113119
onMouseEnter={onEnter}
114120
onMouseLeave={onLeave}
115121
onMouseMove={onMove}

0 commit comments

Comments
 (0)