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

Issue 649 - Fix mismatched row height for fixed columns#722

Merged
Marc-Andre-Rivet merged 50 commits into from
Apr 14, 2020
Merged

Issue 649 - Fix mismatched row height for fixed columns #722

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
50 commits
Select commit Hold shift + click to select a range
a58d4eb
Add phantom cells to fixed/unfixed table fragments
Mar 17, 2020
329f357
Update tests to ignore phantom cells
Mar 17, 2020
ddf6079
update cell-x-x styling
Mar 17, 2020
a7bacbe
fix helper (last row cell selector)
Mar 17, 2020
02a851e
Remove problematic content from phantom cells
Mar 17, 2020
bdb8366
Update tests and helpers
Mar 19, 2020
30f6aaa
Fix table styling/size and cell alignment
Mar 19, 2020
c059545
Tweak Markdown percy tests
Mar 20, 2020
ca4ffb2
Table rendering and fragments alignment/sizing through iterative styling
Mar 20, 2020
7faf779
changelog
Mar 24, 2020
7b465c7
update tests
Mar 24, 2020
6f68a9d
Make table non-clickable while keeping td/th clickable
Mar 25, 2020
06f6062
Add visual tests for table with text wrapping (will fail)
Mar 27, 2020
31d3f8b
Make sure the fixed/unfixed tables are the same size for all scenarios
Mar 27, 2020
1a821fe
Prevent CellInput fragment components from attempting to gain keyboar…
Mar 27, 2020
caee5e2
Merge remote-tracking branch 'origin/dev' into 649-mismatched-row-hei…
Mar 27, 2020
c8a1ae1
undo CellInput / focus change
Mar 27, 2020
4928631
redo
Mar 27, 2020
907bca1
CellInput check before props check
Mar 27, 2020
83882f1
lint fix
Mar 27, 2020
9d6fb35
invert
Mar 27, 2020
31ac90a
re-undo
Mar 27, 2020
717bb09
generalize phantom-cell border override
Apr 3, 2020
3dd7b2d
Merge branch 'dev' into 649-mismatched-row-heights
Marc-Andre-Rivet Apr 3, 2020
61eb050
always hide borders for phantom cells, not just when there are fixed …
Apr 3, 2020
a5845ba
Merge branch '649-mismatched-row-heights' of github.com:plotly/dash-t…
Apr 3, 2020
b809fe1
height -> min-height
Apr 3, 2020
8d18401
firefox behaves incorrectly when height is set on td
Apr 3, 2020
78f8fd0
ff: both min-height and height
Apr 3, 2020
15327a4
clean up styling of phantom cells
Apr 3, 2020
621d66b
keep phantom cell right border in cell-0-1 and cell-1-1
Apr 3, 2020
f131359
force type
Apr 3, 2020
b9967ec
ignore phantom-cell
Apr 3, 2020
8523a76
not a phantom cell
Apr 3, 2020
988ae85
undo
Apr 3, 2020
37c5692
move markdown keyboard navigation tests to selenium
Apr 3, 2020
26e6908
beforeEach..
Apr 3, 2020
144a616
additional md visual tests with fixed rows/columns/both
Apr 3, 2020
5b5ca8c
add a row to md "table" visual test
Apr 3, 2020
f0bf0ea
only restyle the cell's table
Apr 3, 2020
f0d72aa
fixed w/ deletable
Apr 3, 2020
75bd7e6
row_deletable
Apr 3, 2020
9c043bd
Comment for cell width delta handling
Apr 4, 2020
104ff53
Update CHANGELOG.md
Marc-Andre-Rivet Apr 7, 2020
33db6f3
Fix Ramda usage
Apr 14, 2020
034db51
Merge branch '649-mismatched-row-heights' of github.com:plotly/dash-t…
Apr 14, 2020
3d0b8c8
refactor duplicated code block
Apr 14, 2020
59ff242
fix typing
Apr 14, 2020
207c90a
clean up exit condition for table fragments sizing
Apr 14, 2020
99136c4
fixed_rows horizontal alignment on scroll
Apr 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .circleci/config.yml
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@ version: 2
jobs:
"server-test":
docker:
- image: circleci/python:3.7.5-node-browsers
- image: circleci/python:3.7-node-browsers
- image: cypress/base:10

steps:
Expand Down
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,6 +2,10 @@
All notable changes to this project will be documented in this file.
This project adheres to [Semantic Versioning](http://semver.org/).

## [Unreleased]
### Fixed
- [#722](https://github.com/plotly/dash-table/pull/722) Fix a bug where row height is misaligned when using fixed_columns and/or fixed_rows

## [4.6.2] - 2020-04-01
### Changed
- [#713](https://github.com/plotly/dash-table/pull/713) Update from React 16.8.6 to 16.13.0
Expand Down
10 changes: 8 additions & 2 deletions demo/data.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -176,9 +176,15 @@ export const generateMixedMarkdownMockData = (rows: number) => unpackIntoColumns
name: ['Markdown'],
type: ColumnType.Text,
presentation: 'markdown',
data: gendata(_ => [
data: gendata(i => [
'```javascript',
'console.warn("this is a markdown cell")',
...(i % 2 === 0 ?
['console.warn("this is a markdown cell")'] :
[
'console.log("logging things")',
'console.warn("this is a markdown cell")'
]
),

@Marc-Andre-RivetMarc-Andre-RivetMar 23, 2020

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Changing the mock to have variable height Markdown rows

'```'].join('\n'), rows)
},
{
Expand Down
4 changes: 2 additions & 2 deletions src/dash-table/components/Cell/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -22,7 +22,7 @@ export default class Cell extends Component<ICellProps> {
render() {
const {
attributes,
classes,
className,
onClick,
onDoubleClick,
onMouseEnter,
Expand All@@ -35,7 +35,7 @@ export default class Cell extends Component<ICellProps> {
ref='td'
children={(this as any).props.children}
tabIndex={-1}
className={classes}
className={className}
onClick={onClick}
onDoubleClick={onDoubleClick}
onMouseEnter={onMouseEnter}
Expand Down
2 changes: 1 addition & 1 deletion src/dash-table/components/Cell/props.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,7 +7,7 @@ interface IAttributes {
export interface ICellProps {
active: boolean;
attributes: IAttributes;
classes: string;
className: string;
onClick: (e: MouseEvent) => void;
onDoubleClick: (e: MouseEvent) => void;
onMouseEnter: (e: MouseEvent) => void;
Expand Down
2 changes: 1 addition & 1 deletion src/dash-table/components/CellDropdown/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -75,7 +75,7 @@ export default class CellDropdown extends PureComponent<IProps> {
if (applyFocus && dropdown && document.activeElement !== dropdown) {
// Limitation. If React >= 16 --> Use React.createRef instead to pass parent ref to child
const tdParent = DOM.getFirstParentOfType(dropdown.wrapper, 'td');
if (tdParent) {
if (tdParent && tdParent.className.indexOf('phantom-cell') === -1) {
tdParent.focus();
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/dash-table/components/CellMarkdown/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -62,7 +62,7 @@ export default class CellMarkdown extends PureComponent<IProps, {}> {
if (applyFocus && el && document.activeElement !== el) {
// Limitation. If React >= 16 --> Use React.createRef instead to pass parent ref to child
const tdParent = DOM.getFirstParentOfType(el, 'td');
if (tdParent) {
if (tdParent && tdParent.className.indexOf('phantom-cell') !== -1) {
tdParent.focus();
}
}
Expand Down
192 changes: 102 additions & 90 deletions src/dash-table/components/ControlledTable/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -48,6 +48,9 @@ const INNER_STYLE = {
minWidth: '100%'
};

const WIDTH_EPSILON = 0.5;
const MAX_WIDTH_ITERATIONS = 30;

@Marc-Andre-RivetMarc-Andre-RivetMar 23, 2020

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

30 is a very high number but most of the time it takes 2-6 iterations for the table's column width to settle.


export default class ControlledTable extends PureComponent<ControlledTableProps> {
private readonly menuRef = React.createRef<HTMLDivElement>();
private readonly stylesheet: Stylesheet = new Stylesheet(`#${this.props.id}`);
Expand DownExpand Up@@ -134,7 +137,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
setProps({ active_cell: selected_cells[0] });
}

this.applyStyle();
this.updateUiViewport();
this.handleResize();
}

Expand All@@ -146,7 +149,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>

componentDidUpdate() {
this.updateStylesheet();
this.applyStyle();

@Marc-Andre-RivetMarc-Andre-RivetMar 23, 2020

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

applyStyle is removed / replaced by new code to handle the fixed rows

this.updateUiViewport();
this.handleResize();
this.handleDropdown();
this.adjustTooltipPosition();
Expand DownExpand Up@@ -226,6 +229,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>

handleResize = (force: boolean = false) => {
const {
fixed_columns,
fixed_rows,
forcedResizeOnly,
setState
} = this.props;
Expand All@@ -244,6 +249,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>

const { r0c0, r0c1, r1c0, r1c1 } = this.refs as { [key: string]: HTMLElement };


// Adjust [fixed columns/fixed rows combo] to fixed rows height
let trs = r0c1.querySelectorAll('tr');
Array.from(r0c0.querySelectorAll('tr')).forEach((tr, index) => {
Expand All@@ -261,12 +267,77 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
tr.style.height = getComputedStyle(tr2).height;
});

// Adjust fixed columns data to data height
const contentTd = r1c1.querySelector('tr > td:first-of-type');
if (contentTd) {
const contentTr = contentTd.parentElement as HTMLElement;
if (fixed_columns) {
const r1c0Table = r1c0.querySelector('table') as HTMLElement;
const r1c1Table = r1c0.querySelector('table') as HTMLElement;

r1c0Table.style.width = getComputedStyle(r1c1Table).width;

const lastVisibleTd = r1c0.querySelector(`tr:first-of-type > *:nth-of-type(${fixed_columns})`);

let it = 0;
let currentWidth = r1c0.getBoundingClientRect().width;
let lastWidth = currentWidth;

do {
lastWidth = currentWidth

// Force first column containers width to match visible portion of table
if (lastVisibleTd) {
const r1c0FragmentBounds = r1c0.getBoundingClientRect();
const lastTdBounds = lastVisibleTd.getBoundingClientRect();
currentWidth = lastTdBounds.right - r1c0FragmentBounds.left;

const width = `${currentWidth}px`;

r0c0.style.width = width;
r1c0.style.width = width;
}

// Force second column containers width to match visible portion of table
const firstVisibleTd = r1c1.querySelector(`tr:first-of-type > *:nth-of-type(${fixed_columns + 1})`);
if (firstVisibleTd) {
const r1c1FragmentBounds = r1c1.getBoundingClientRect();
const firstTdBounds = firstVisibleTd.getBoundingClientRect();

const width = firstTdBounds.left - r1c1FragmentBounds.left;
r0c1.style.marginLeft = `-${width}px`;
r0c1.style.marginRight = `${width}px`;
r1c1.style.marginLeft = `-${width}px`;
r1c1.style.marginRight = `${width}px`;
}

this.stylesheet.setRule('.dash-fixed-column tr', `height: ${getComputedStyle(contentTr).height};`);
it++;
} while (
Math.abs(currentWidth - lastWidth) > WIDTH_EPSILON ||
it < MAX_WIDTH_ITERATIONS
)
}

if (fixed_columns || fixed_rows) {
const r1c0CellWidths = Array.from(
r1c0.querySelectorAll('table.cell-table > tbody > tr:first-of-type > *')
).map(c => c.getBoundingClientRect().width);

const r1c1CellWidths = Array.from(
r1c1.querySelectorAll('table.cell-table > tbody > tr:first-of-type > *')
).map(c => c.getBoundingClientRect().width);

Array.from<HTMLElement>(
r0c0.querySelectorAll('table.cell-table > tbody > tr:first-of-type > *')
).forEach((c, i) => this.setCellWidth(c, r1c0CellWidths[i]));

Array.from<HTMLElement>(
r0c0.querySelectorAll('table.cell-table > tbody > tr:last-of-type > *')
).forEach((c, i) => this.setCellWidth(c, r1c0CellWidths[i]));

Array.from<HTMLElement>(
r0c1.querySelectorAll('table.cell-table > tbody > tr:first-of-type > *')
).forEach((c, i) => this.setCellWidth(c, r1c1CellWidths[i]));

Array.from<HTMLElement>(
r0c1.querySelectorAll('table.cell-table > tbody > tr:last-of-type > *')
).forEach((c, i) => this.setCellWidth(c, r1c1CellWidths[i]));

@Marc-Andre-RivetMarc-Andre-RivetApr 4, 2020

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

All this replaces and adds to the previous applyStyle method

}
}

Expand DownExpand Up@@ -627,98 +698,20 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
) || page_action === TableAction.Custom;
}

applyStyle = () => {
const {
fixed_columns,
fixed_rows,
row_deletable,
row_selectable
} = this.props;

const { r1c0, r1c1 } = this.refs as { [key: string]: HTMLElement };

this.updateUiViewport();

if (row_deletable) {
this.stylesheet.setRule(
`.dash-spreadsheet-inner td.dash-delete-cell`,
`width: 30px; max-width: 30px; min-width: 30px;`
);
}

if (row_selectable) {
this.stylesheet.setRule(
`.dash-spreadsheet-inner td.dash-select-cell`,
`width: 30px; max-width: 30px; min-width: 30px;`
);
}

// Adjust the width of the fixed row header
if (fixed_rows) {
Array.from(r1c1.querySelectorAll('tr:first-of-type td.dash-cell, tr:first-of-type th.dash-header')).forEach(td => {
const classname = td.className.split(' ')[1];
const style = getComputedStyle(td);
const width = style.width;

this.stylesheet.setRule(
`.dash-fixed-row:not(.dash-fixed-column) th.${classname}`,
`width: ${width} !important; min-width: ${width} !important; max-width: ${width} !important;`
);
});
}

// Adjust the width of the fixed row / fixed columns header
if (fixed_columns && fixed_rows) {
Array.from(r1c0.querySelectorAll('tr:first-of-type td.dash-cell, tr:first-of-type th.dash-header')).forEach(td => {
const classname = td.className.split(' ')[1];
const style = getComputedStyle(td);
const width = style.width;

this.stylesheet.setRule(
`.dash-fixed-column.dash-fixed-row th.${classname}`,
`width: ${width} !important; min-width: ${width} !important; max-width: ${width} !important;`
);
});
}

// Adjust widths of row deletable/row selectable headers
const subTable = fixed_rows && !fixed_columns ? r1c1 : r1c0;

if (row_deletable) {
Array.from(subTable.querySelectorAll('tr:first-of-type td.dash-delete-cell')).forEach(td => {
const style = getComputedStyle(td);
const width = style.width;

this.stylesheet.setRule(
'th.dash-delete-header',
`width: ${width} !important; min-width: ${width} !important; max-width: ${width} !important;`
);
});
}
if (row_selectable) {
Array.from(subTable.querySelectorAll('tr:first-of-type td.dash-select-cell')).forEach(td => {
const style = getComputedStyle(td);
const width = style.width;

this.stylesheet.setRule(
'th.dash-select-header',
`width: ${width} !important; min-width: ${width} !important; max-width: ${width} !important;`
);
});
}
}

handleDropdown = () => {
const { r1c1 } = this.refs as { [key: string]: HTMLElement };

dropdownHelper(r1c1.querySelector('.Select-menu-outer'));
}

onScroll = (ev: any) => {
const { r0c1 } = this.refs as { [key: string]: HTMLElement };
const { r0c0, r0c1 } = this.refs as { [key: string]: HTMLElement };

Logger.trace(`ControlledTable fragment scrolled to (left,top)=(${ev.target.scrollLeft},${ev.target.scrollTop})`);
r0c1.style.marginLeft = `${-ev.target.scrollLeft}px`;

const margin = parseFloat(ev.target.scrollLeft) + parseFloat(r0c0.style.width);

r0c1.style.marginLeft = `${-margin}px`;

this.updateUiViewport();
this.handleDropdown();
Expand DownExpand Up@@ -952,6 +945,25 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
}
}

private setCellWidth(cell: HTMLElement, width: number) {
cell.style.width = `${width}px`;
cell.style.minWidth = `${width}px`;
cell.style.maxWidth = `${width}px`;
cell.style.boxSizing = 'border-box';

/**
* Some browsers handle `th` and `td` size inconsistently.
* Checking the size delta and adjusting for it (different handling of padding and borders)
* allows the table to make sure all sections are correctly aligned.
*/
const delta = cell.getBoundingClientRect().width - width;
if (delta) {
cell.style.width = `${width - delta}px`;
cell.style.minWidth = `${width - delta}px`;
cell.style.maxWidth = `${width - delta}px`;
}
}

private get showToggleColumns(): boolean {
const {
columns,
Expand Down
6 changes: 3 additions & 3 deletions src/dash-table/components/Filter/Column.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -8,7 +8,7 @@ import TableClipboardHelper from 'dash-table/utils/TableClipboardHelper';
type SetFilter = (ev: any) => void;

interface IColumnFilterProps {
classes: string;
className: string;
columnId: ColumnId;
isValid: boolean;
setFilter: SetFilter;
Expand DownExpand Up@@ -39,15 +39,15 @@ export default class ColumnFilter extends PureComponent<IColumnFilterProps, ISta

render() {
const {
classes,
className,
columnId,
isValid,
style,
value
} = this.props;

return (<th
className={classes + (isValid ? '' : ' invalid')}
className={className + (isValid ? '' : ' invalid')}

@Marc-Andre-RivetMarc-Andre-RivetMar 23, 2020

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Standardizing prop name across all components simplifies manipulation elsewhere.

data-dash-column={columnId}
style={style}
>
Expand Down
2 changes: 1 addition & 1 deletion src/dash-table/components/FilterFactory.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -50,7 +50,7 @@ export default class FilterFactory {

return (<ColumnFilter
key={`column-${index}`}
classes={`dash-filter column-${index}`}
className={`dash-filter column-${index}`}
columnId={column.id}
isValid={!ast || ast.isValid}
setFilter={this.onChange.bind(this, column, map, setFilter)}
Expand Down
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content

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

Issue 649 - Fix mismatched row height for fixed columns#722
 Merged

Marc-Andre-Rivet
merged 50 commits into

from

Apr 14, 2020
 Merged


Issue 649 - Fix mismatched row height for fixed columns
#722
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


50 commits


Select commit
Hold shift + click to select a range
a58d4eb

Add phantom cells to fixed/unfixed table fragments

Mar 17, 2020
329f357

Update tests to ignore phantom cells

Mar 17, 2020
ddf6079

update cell-x-x styling

Mar 17, 2020
a7bacbe

fix helper (last row cell selector)

Mar 17, 2020
02a851e

Remove problematic content from phantom cells

Mar 17, 2020
bdb8366

Update tests and helpers

Mar 19, 2020
30f6aaa

Fix table styling/size and cell alignment

Mar 19, 2020
c059545

Tweak Markdown percy tests

Mar 20, 2020
ca4ffb2

Table rendering and fragments alignment/sizing through iterative styling

Mar 20, 2020
7faf779

changelog

Mar 24, 2020
7b465c7

update tests

Mar 24, 2020
6f68a9d

Make table non-clickable while keeping td/th clickable

Mar 25, 2020
06f6062

Add visual tests for table with text wrapping (will fail)

Mar 27, 2020
31d3f8b

Make sure the fixed/unfixed tables are the same size for all scenarios

Mar 27, 2020
1a821fe

Prevent CellInput fragment components from attempting to gain keyboar…

Mar 27, 2020
caee5e2

Merge remote-tracking branch 'origin/dev' into 649-mismatched-row-hei…

Mar 27, 2020
c8a1ae1

undo CellInput / focus change

Mar 27, 2020
4928631

redo

Mar 27, 2020
907bca1

CellInput check before props check

Mar 27, 2020
83882f1

lint fix

Mar 27, 2020
9d6fb35

invert

Mar 27, 2020
31ac90a

re-undo

Mar 27, 2020
717bb09

generalize phantom-cell border override

Apr 3, 2020
3dd7b2d

Merge branch 'dev' into 649-mismatched-row-heights


Marc-Andre-Rivet Apr 3, 2020
61eb050

always hide borders for phantom cells, not just when there are fixed …

Apr 3, 2020
a5845ba

Merge branch '649-mismatched-row-heights' of github.com:plotly/dash-t…

Apr 3, 2020
b809fe1

height -> min-height

Apr 3, 2020
8d18401

firefox behaves incorrectly when height is set on td

Apr 3, 2020
78f8fd0

ff: both min-height and height

Apr 3, 2020
15327a4

clean up styling of phantom cells

Apr 3, 2020
621d66b

keep phantom cell right border in cell-0-1 and cell-1-1

Apr 3, 2020
f131359

force type

Apr 3, 2020
b9967ec

ignore phantom-cell

Apr 3, 2020
8523a76

not a phantom cell

Apr 3, 2020
988ae85

undo

Apr 3, 2020
37c5692

move markdown keyboard navigation tests to selenium

Apr 3, 2020
26e6908

beforeEach..

Apr 3, 2020
144a616

additional md visual tests with fixed rows/columns/both

Apr 3, 2020
5b5ca8c

add a row to md "table" visual test

Apr 3, 2020
f0bf0ea

only restyle the cell's table

Apr 3, 2020
f0d72aa

fixed w/ deletable

Apr 3, 2020
75bd7e6

row_deletable

Apr 3, 2020
9c043bd

Comment for cell width delta handling

Apr 4, 2020
104ff53

Update CHANGELOG.md


Marc-Andre-Rivet Apr 7, 2020
33db6f3

Fix Ramda usage

Apr 14, 2020
034db51

Merge branch '649-mismatched-row-heights' of github.com:plotly/dash-t…

Apr 14, 2020
3d0b8c8

refactor duplicated code block

Apr 14, 2020
59ff242

fix typing

Apr 14, 2020
207c90a

clean up exit condition for table fragments sizing

Apr 14, 2020
99136c4

fixed_rows horizontal alignment on scroll

Apr 14, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 1 addition & 1 deletion
.circleci/config.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@ version: 2
jobs:
 "server-test":
 docker:
 - image: circleci/python:3.7.5-node-browsers
 - image: circleci/python:3.7-node-browsers
 - image: cypress/base:10

 steps:
Expand Down

4 changes: 4 additions & 0 deletions
CHANGELOG.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,6 +2,10 @@
All notable changes to this project will be documented in this file.
This project adheres to [Semantic Versioning](http://semver.org/).

## [Unreleased]
### Fixed
- [#722](https://github.com/plotly/dash-table/pull/722) Fix a bug where row height is misaligned when using fixed_columns and/or fixed_rows

## [4.6.2] - 2020-04-01
### Changed
- [#713](https://github.com/plotly/dash-table/pull/713) Update from React 16.8.6 to 16.13.0
Expand Down

10 changes: 8 additions & 2 deletions
demo/data.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -176,9 +176,15 @@ export const generateMixedMarkdownMockData = (rows: number) => unpackIntoColumns
 name: ['Markdown'],
 type: ColumnType.Text,
 presentation: 'markdown',
 data: gendata(_ => [
 data: gendata(i => [
 '```javascript',
 'console.warn("this is a markdown cell")',
 ...(i % 2 === 0 ?
 ['console.warn("this is a markdown cell")'] :
 [
 'console.log("logging things")',
 'console.warn("this is a markdown cell")'
 ]
 ),
@Marc-Andre-RivetMarc-Andre-RivetMar 23, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

Changing the mock to have variable height Markdown rows
 '```'].join('\n'), rows)
 },
 {
Expand Down

4 changes: 2 additions & 2 deletions
src/dash-table/components/Cell/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -22,7 +22,7 @@ export default class Cell extends Component<ICellProps> {
 render() {
 const {
 attributes,
classes,
className,
 onClick,
 onDoubleClick,
 onMouseEnter,
Expand All@@ -35,7 +35,7 @@ export default class Cell extends Component<ICellProps> {
 ref='td'
 children={(this as any).props.children}
 tabIndex={-1}
 className={classes}
 className={className}
 onClick={onClick}
 onDoubleClick={onDoubleClick}
 onMouseEnter={onMouseEnter}
Expand Down

2 changes: 1 addition & 1 deletion
src/dash-table/components/Cell/props.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,7 +7,7 @@ interface IAttributes {
export interface ICellProps {
 active: boolean;
 attributes: IAttributes;
classes: string;
className: string;
 onClick: (e: MouseEvent) => void;
 onDoubleClick: (e: MouseEvent) => void;
 onMouseEnter: (e: MouseEvent) => void;
Expand Down

2 changes: 1 addition & 1 deletion
src/dash-table/components/CellDropdown/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -75,7 +75,7 @@ export default class CellDropdown extends PureComponent<IProps> {
 if (applyFocus && dropdown && document.activeElement !== dropdown) {
 // Limitation. If React >= 16 --> Use React.createRef instead to pass parent ref to child
 const tdParent = DOM.getFirstParentOfType(dropdown.wrapper, 'td');
 if (tdParent) {
 if (tdParent && tdParent.className.indexOf('phantom-cell') === -1) {
 tdParent.focus();
 }
 }
Expand Down

2 changes: 1 addition & 1 deletion
src/dash-table/components/CellMarkdown/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -62,7 +62,7 @@ export default class CellMarkdown extends PureComponent<IProps, {}> {
 if (applyFocus && el && document.activeElement !== el) {
 // Limitation. If React >= 16 --> Use React.createRef instead to pass parent ref to child
 const tdParent = DOM.getFirstParentOfType(el, 'td');
 if (tdParent) {
 if (tdParent && tdParent.className.indexOf('phantom-cell') !== -1) {
 tdParent.focus();
 }
 }
Expand Down

192 changes: 102 additions & 90 deletions
src/dash-table/components/ControlledTable/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -48,6 +48,9 @@ const INNER_STYLE = {
 minWidth: '100%'
};

const WIDTH_EPSILON = 0.5;
const MAX_WIDTH_ITERATIONS = 30;
@Marc-Andre-RivetMarc-Andre-RivetMar 23, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

30 is a very high number but most of the time it takes 2-6 iterations for the table's column width to settle.

export default class ControlledTable extends PureComponent<ControlledTableProps> {
 private readonly menuRef = React.createRef<HTMLDivElement>();
 private readonly stylesheet: Stylesheet = new Stylesheet(`#${this.props.id}`);
Expand DownExpand Up@@ -134,7 +137,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 setProps({ active_cell: selected_cells[0] });
 }

 this.applyStyle();
 this.updateUiViewport();
 this.handleResize();
 }

Expand All@@ -146,7 +149,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>

 componentDidUpdate() {
 this.updateStylesheet();
 this.applyStyle();
@Marc-Andre-RivetMarc-Andre-RivetMar 23, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

applyStyle is removed / replaced by new code to handle the fixed rows
 this.updateUiViewport();
 this.handleResize();
 this.handleDropdown();
 this.adjustTooltipPosition();
Expand DownExpand Up@@ -226,6 +229,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>

 handleResize = (force: boolean = false) => {
 const {
 fixed_columns,
 fixed_rows,
 forcedResizeOnly,
 setState
 } = this.props;
Expand All@@ -244,6 +249,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>

 const { r0c0, r0c1, r1c0, r1c1 } = this.refs as { [key: string]: HTMLElement };


 // Adjust [fixed columns/fixed rows combo] to fixed rows height
 let trs = r0c1.querySelectorAll('tr');
 Array.from(r0c0.querySelectorAll('tr')).forEach((tr, index) => {
Expand All@@ -261,12 +267,77 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 tr.style.height = getComputedStyle(tr2).height;
 });

 // Adjust fixed columns data to data height
 const contentTd = r1c1.querySelector('tr > td:first-of-type');
 if (contentTd) {
 const contentTr = contentTd.parentElement as HTMLElement;
 if (fixed_columns) {
 const r1c0Table = r1c0.querySelector('table') as HTMLElement;
 const r1c1Table = r1c0.querySelector('table') as HTMLElement;

 r1c0Table.style.width = getComputedStyle(r1c1Table).width;

 const lastVisibleTd = r1c0.querySelector(`tr:first-of-type > *:nth-of-type(${fixed_columns})`);

 let it = 0;
 let currentWidth = r1c0.getBoundingClientRect().width;
 let lastWidth = currentWidth;

 do {
 lastWidth = currentWidth

 // Force first column containers width to match visible portion of table
 if (lastVisibleTd) {
 const r1c0FragmentBounds = r1c0.getBoundingClientRect();
 const lastTdBounds = lastVisibleTd.getBoundingClientRect();
 currentWidth = lastTdBounds.right - r1c0FragmentBounds.left;

 const width = `${currentWidth}px`;

 r0c0.style.width = width;
 r1c0.style.width = width;
 }

 // Force second column containers width to match visible portion of table
 const firstVisibleTd = r1c1.querySelector(`tr:first-of-type > *:nth-of-type(${fixed_columns + 1})`);
 if (firstVisibleTd) {
 const r1c1FragmentBounds = r1c1.getBoundingClientRect();
 const firstTdBounds = firstVisibleTd.getBoundingClientRect();

 const width = firstTdBounds.left - r1c1FragmentBounds.left;
 r0c1.style.marginLeft = `-${width}px`;
 r0c1.style.marginRight = `${width}px`;
 r1c1.style.marginLeft = `-${width}px`;
 r1c1.style.marginRight = `${width}px`;
 }

 this.stylesheet.setRule('.dash-fixed-column tr', `height: ${getComputedStyle(contentTr).height};`);
 it++;
 } while (
 Math.abs(currentWidth - lastWidth) > WIDTH_EPSILON ||
 it < MAX_WIDTH_ITERATIONS
 )
 }

 if (fixed_columns || fixed_rows) {
 const r1c0CellWidths = Array.from(
 r1c0.querySelectorAll('table.cell-table > tbody > tr:first-of-type > *')
 ).map(c => c.getBoundingClientRect().width);

 const r1c1CellWidths = Array.from(
 r1c1.querySelectorAll('table.cell-table > tbody > tr:first-of-type > *')
 ).map(c => c.getBoundingClientRect().width);

 Array.from<HTMLElement>(
 r0c0.querySelectorAll('table.cell-table > tbody > tr:first-of-type > *')
 ).forEach((c, i) => this.setCellWidth(c, r1c0CellWidths[i]));

 Array.from<HTMLElement>(
 r0c0.querySelectorAll('table.cell-table > tbody > tr:last-of-type > *')
 ).forEach((c, i) => this.setCellWidth(c, r1c0CellWidths[i]));

 Array.from<HTMLElement>(
 r0c1.querySelectorAll('table.cell-table > tbody > tr:first-of-type > *')
 ).forEach((c, i) => this.setCellWidth(c, r1c1CellWidths[i]));

 Array.from<HTMLElement>(
 r0c1.querySelectorAll('table.cell-table > tbody > tr:last-of-type > *')
 ).forEach((c, i) => this.setCellWidth(c, r1c1CellWidths[i]));
@Marc-Andre-RivetMarc-Andre-RivetApr 4, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

All this replaces and adds to the previous applyStyle method
 }
 }

Expand DownExpand Up@@ -627,98 +698,20 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 ) || page_action === TableAction.Custom;
 }

 applyStyle = () => {
 const {
 fixed_columns,
 fixed_rows,
 row_deletable,
 row_selectable
 } = this.props;

 const { r1c0, r1c1 } = this.refs as { [key: string]: HTMLElement };

 this.updateUiViewport();

 if (row_deletable) {
 this.stylesheet.setRule(
 `.dash-spreadsheet-inner td.dash-delete-cell`,
 `width: 30px; max-width: 30px; min-width: 30px;`
 );
 }

 if (row_selectable) {
 this.stylesheet.setRule(
 `.dash-spreadsheet-inner td.dash-select-cell`,
 `width: 30px; max-width: 30px; min-width: 30px;`
 );
 }

 // Adjust the width of the fixed row header
 if (fixed_rows) {
 Array.from(r1c1.querySelectorAll('tr:first-of-type td.dash-cell, tr:first-of-type th.dash-header')).forEach(td => {
 const classname = td.className.split(' ')[1];
 const style = getComputedStyle(td);
 const width = style.width;

 this.stylesheet.setRule(
 `.dash-fixed-row:not(.dash-fixed-column) th.${classname}`,
 `width: ${width} !important; min-width: ${width} !important; max-width: ${width} !important;`
 );
 });
 }

 // Adjust the width of the fixed row / fixed columns header
 if (fixed_columns && fixed_rows) {
 Array.from(r1c0.querySelectorAll('tr:first-of-type td.dash-cell, tr:first-of-type th.dash-header')).forEach(td => {
 const classname = td.className.split(' ')[1];
 const style = getComputedStyle(td);
 const width = style.width;

 this.stylesheet.setRule(
 `.dash-fixed-column.dash-fixed-row th.${classname}`,
 `width: ${width} !important; min-width: ${width} !important; max-width: ${width} !important;`
 );
 });
 }

 // Adjust widths of row deletable/row selectable headers
 const subTable = fixed_rows && !fixed_columns ? r1c1 : r1c0;

 if (row_deletable) {
 Array.from(subTable.querySelectorAll('tr:first-of-type td.dash-delete-cell')).forEach(td => {
 const style = getComputedStyle(td);
 const width = style.width;

 this.stylesheet.setRule(
 'th.dash-delete-header',
 `width: ${width} !important; min-width: ${width} !important; max-width: ${width} !important;`
 );
 });
 }
 if (row_selectable) {
 Array.from(subTable.querySelectorAll('tr:first-of-type td.dash-select-cell')).forEach(td => {
 const style = getComputedStyle(td);
 const width = style.width;

 this.stylesheet.setRule(
 'th.dash-select-header',
 `width: ${width} !important; min-width: ${width} !important; max-width: ${width} !important;`
 );
 });
 }
 }

 handleDropdown = () => {
 const { r1c1 } = this.refs as { [key: string]: HTMLElement };

 dropdownHelper(r1c1.querySelector('.Select-menu-outer'));
 }

 onScroll = (ev: any) => {
 const { r0c1 } = this.refs as { [key: string]: HTMLElement };
 const { r0c0, r0c1 } = this.refs as { [key: string]: HTMLElement };

 Logger.trace(`ControlledTable fragment scrolled to (left,top)=(${ev.target.scrollLeft},${ev.target.scrollTop})`);
 r0c1.style.marginLeft = `${-ev.target.scrollLeft}px`;

 const margin = parseFloat(ev.target.scrollLeft) + parseFloat(r0c0.style.width);

 r0c1.style.marginLeft = `${-margin}px`;

 this.updateUiViewport();
 this.handleDropdown();
Expand DownExpand Up@@ -952,6 +945,25 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 }
 }

 private setCellWidth(cell: HTMLElement, width: number) {
 cell.style.width = `${width}px`;
 cell.style.minWidth = `${width}px`;
 cell.style.maxWidth = `${width}px`;
 cell.style.boxSizing = 'border-box';

 /**
 * Some browsers handle `th` and `td` size inconsistently.
 * Checking the size delta and adjusting for it (different handling of padding and borders)
 * allows the table to make sure all sections are correctly aligned.
 */
 const delta = cell.getBoundingClientRect().width - width;
 if (delta) {
 cell.style.width = `${width - delta}px`;
 cell.style.minWidth = `${width - delta}px`;
 cell.style.maxWidth = `${width - delta}px`;
 }
 }

 private get showToggleColumns(): boolean {
 const {
 columns,
Expand Down

6 changes: 3 additions & 3 deletions
src/dash-table/components/Filter/Column.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -8,7 +8,7 @@ import TableClipboardHelper from 'dash-table/utils/TableClipboardHelper';
type SetFilter = (ev: any) => void;

interface IColumnFilterProps {
classes: string;
className: string;
 columnId: ColumnId;
 isValid: boolean;
 setFilter: SetFilter;
Expand DownExpand Up@@ -39,15 +39,15 @@ export default class ColumnFilter extends PureComponent<IColumnFilterProps, ISta

 render() {
 const {
classes,
className,
 columnId,
 isValid,
 style,
 value
 } = this.props;

 return (<th
 className={classes + (isValid ? '' : ' invalid')}
 className={className + (isValid ? '' : ' invalid')}
@Marc-Andre-RivetMarc-Andre-RivetMar 23, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

Standardizing prop name across all components simplifies manipulation elsewhere.
 data-dash-column={columnId}
 style={style}
 >
Expand Down

2 changes: 1 addition & 1 deletion
src/dash-table/components/FilterFactory.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -50,7 +50,7 @@ export default class FilterFactory {

 return (<ColumnFilter
 key={`column-${index}`}
classes={`dash-filter column-${index}`}
className={`dash-filter column-${index}`}
 columnId={column.id}
 isValid={!ast || ast.isValid}
 setFilter={this.onChange.bind(this, column, map, setFilter)}
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content

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

Issue 649 - Fix mismatched row height for fixed columns#722
 Merged

Marc-Andre-Rivet
merged 50 commits into

from

Apr 14, 2020
 Merged


Issue 649 - Fix mismatched row height for fixed columns
#722
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


50 commits


Select commit
Hold shift + click to select a range
a58d4eb

Add phantom cells to fixed/unfixed table fragments

Mar 17, 2020
329f357

Update tests to ignore phantom cells

Mar 17, 2020
ddf6079

update cell-x-x styling

Mar 17, 2020
a7bacbe

fix helper (last row cell selector)

Mar 17, 2020
02a851e

Remove problematic content from phantom cells

Mar 17, 2020
bdb8366

Update tests and helpers

Mar 19, 2020
30f6aaa

Fix table styling/size and cell alignment

Mar 19, 2020
c059545

Tweak Markdown percy tests

Mar 20, 2020
ca4ffb2

Table rendering and fragments alignment/sizing through iterative styling

Mar 20, 2020
7faf779

changelog

Mar 24, 2020
7b465c7

update tests

Mar 24, 2020
6f68a9d

Make table non-clickable while keeping td/th clickable

Mar 25, 2020
06f6062

Add visual tests for table with text wrapping (will fail)

Mar 27, 2020
31d3f8b

Make sure the fixed/unfixed tables are the same size for all scenarios

Mar 27, 2020
1a821fe

Prevent CellInput fragment components from attempting to gain keyboar…

Mar 27, 2020
caee5e2

Merge remote-tracking branch 'origin/dev' into 649-mismatched-row-hei…

Mar 27, 2020
c8a1ae1

undo CellInput / focus change

Mar 27, 2020
4928631

redo

Mar 27, 2020
907bca1

CellInput check before props check

Mar 27, 2020
83882f1

lint fix

Mar 27, 2020
9d6fb35

invert

Mar 27, 2020
31ac90a

re-undo

Mar 27, 2020
717bb09

generalize phantom-cell border override

Apr 3, 2020
3dd7b2d

Merge branch 'dev' into 649-mismatched-row-heights


Marc-Andre-Rivet Apr 3, 2020
61eb050

always hide borders for phantom cells, not just when there are fixed …

Apr 3, 2020
a5845ba

Merge branch '649-mismatched-row-heights' of github.com:plotly/dash-t…

Apr 3, 2020
b809fe1

height -> min-height

Apr 3, 2020
8d18401

firefox behaves incorrectly when height is set on td

Apr 3, 2020
78f8fd0

ff: both min-height and height

Apr 3, 2020
15327a4

clean up styling of phantom cells

Apr 3, 2020
621d66b

keep phantom cell right border in cell-0-1 and cell-1-1

Apr 3, 2020
f131359

force type

Apr 3, 2020
b9967ec

ignore phantom-cell

Apr 3, 2020
8523a76

not a phantom cell

Apr 3, 2020
988ae85

undo

Apr 3, 2020
37c5692

move markdown keyboard navigation tests to selenium

Apr 3, 2020
26e6908

beforeEach..

Apr 3, 2020
144a616

additional md visual tests with fixed rows/columns/both

Apr 3, 2020
5b5ca8c

add a row to md "table" visual test

Apr 3, 2020
f0bf0ea

only restyle the cell's table

Apr 3, 2020
f0d72aa

fixed w/ deletable

Apr 3, 2020
75bd7e6

row_deletable

Apr 3, 2020
9c043bd

Comment for cell width delta handling

Apr 4, 2020
104ff53

Update CHANGELOG.md


Marc-Andre-Rivet Apr 7, 2020
33db6f3

Fix Ramda usage

Apr 14, 2020
034db51

Merge branch '649-mismatched-row-heights' of github.com:plotly/dash-t…

Apr 14, 2020
3d0b8c8

refactor duplicated code block

Apr 14, 2020
59ff242

fix typing

Apr 14, 2020
207c90a

clean up exit condition for table fragments sizing

Apr 14, 2020
99136c4

fixed_rows horizontal alignment on scroll

Apr 14, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 1 addition & 1 deletion
.circleci/config.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@ version: 2
jobs:
 "server-test":
 docker:
 - image: circleci/python:3.7.5-node-browsers
 - image: circleci/python:3.7-node-browsers
 - image: cypress/base:10

 steps:
Expand Down

4 changes: 4 additions & 0 deletions
CHANGELOG.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,6 +2,10 @@
All notable changes to this project will be documented in this file.
This project adheres to [Semantic Versioning](http://semver.org/).

## [Unreleased]
### Fixed
- [#722](https://github.com/plotly/dash-table/pull/722) Fix a bug where row height is misaligned when using fixed_columns and/or fixed_rows

## [4.6.2] - 2020-04-01
### Changed
- [#713](https://github.com/plotly/dash-table/pull/713) Update from React 16.8.6 to 16.13.0
Expand Down

10 changes: 8 additions & 2 deletions
demo/data.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -176,9 +176,15 @@ export const generateMixedMarkdownMockData = (rows: number) => unpackIntoColumns
 name: ['Markdown'],
 type: ColumnType.Text,
 presentation: 'markdown',
 data: gendata(_ => [
 data: gendata(i => [
 '```javascript',
 'console.warn("this is a markdown cell")',
 ...(i % 2 === 0 ?
 ['console.warn("this is a markdown cell")'] :
 [
 'console.log("logging things")',
 'console.warn("this is a markdown cell")'
 ]
 ),
@Marc-Andre-RivetMarc-Andre-RivetMar 23, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

Changing the mock to have variable height Markdown rows
 '```'].join('\n'), rows)
 },
 {
Expand Down

4 changes: 2 additions & 2 deletions
src/dash-table/components/Cell/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -22,7 +22,7 @@ export default class Cell extends Component<ICellProps> {
 render() {
 const {
 attributes,
classes,
className,
 onClick,
 onDoubleClick,
 onMouseEnter,
Expand All@@ -35,7 +35,7 @@ export default class Cell extends Component<ICellProps> {
 ref='td'
 children={(this as any).props.children}
 tabIndex={-1}
 className={classes}
 className={className}
 onClick={onClick}
 onDoubleClick={onDoubleClick}
 onMouseEnter={onMouseEnter}
Expand Down

2 changes: 1 addition & 1 deletion
src/dash-table/components/Cell/props.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,7 +7,7 @@ interface IAttributes {
export interface ICellProps {
 active: boolean;
 attributes: IAttributes;
classes: string;
className: string;
 onClick: (e: MouseEvent) => void;
 onDoubleClick: (e: MouseEvent) => void;
 onMouseEnter: (e: MouseEvent) => void;
Expand Down

2 changes: 1 addition & 1 deletion
src/dash-table/components/CellDropdown/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -75,7 +75,7 @@ export default class CellDropdown extends PureComponent<IProps> {
 if (applyFocus && dropdown && document.activeElement !== dropdown) {
 // Limitation. If React >= 16 --> Use React.createRef instead to pass parent ref to child
 const tdParent = DOM.getFirstParentOfType(dropdown.wrapper, 'td');
 if (tdParent) {
 if (tdParent && tdParent.className.indexOf('phantom-cell') === -1) {
 tdParent.focus();
 }
 }
Expand Down

2 changes: 1 addition & 1 deletion
src/dash-table/components/CellMarkdown/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -62,7 +62,7 @@ export default class CellMarkdown extends PureComponent<IProps, {}> {
 if (applyFocus && el && document.activeElement !== el) {
 // Limitation. If React >= 16 --> Use React.createRef instead to pass parent ref to child
 const tdParent = DOM.getFirstParentOfType(el, 'td');
 if (tdParent) {
 if (tdParent && tdParent.className.indexOf('phantom-cell') !== -1) {
 tdParent.focus();
 }
 }
Expand Down

192 changes: 102 additions & 90 deletions
src/dash-table/components/ControlledTable/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -48,6 +48,9 @@ const INNER_STYLE = {
 minWidth: '100%'
};

const WIDTH_EPSILON = 0.5;
const MAX_WIDTH_ITERATIONS = 30;
@Marc-Andre-RivetMarc-Andre-RivetMar 23, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

30 is a very high number but most of the time it takes 2-6 iterations for the table's column width to settle.

export default class ControlledTable extends PureComponent<ControlledTableProps> {
 private readonly menuRef = React.createRef<HTMLDivElement>();
 private readonly stylesheet: Stylesheet = new Stylesheet(`#${this.props.id}`);
Expand DownExpand Up@@ -134,7 +137,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 setProps({ active_cell: selected_cells[0] });
 }

 this.applyStyle();
 this.updateUiViewport();
 this.handleResize();
 }

Expand All@@ -146,7 +149,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>

 componentDidUpdate() {
 this.updateStylesheet();
 this.applyStyle();
@Marc-Andre-RivetMarc-Andre-RivetMar 23, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

applyStyle is removed / replaced by new code to handle the fixed rows
 this.updateUiViewport();
 this.handleResize();
 this.handleDropdown();
 this.adjustTooltipPosition();
Expand DownExpand Up@@ -226,6 +229,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>

 handleResize = (force: boolean = false) => {
 const {
 fixed_columns,
 fixed_rows,
 forcedResizeOnly,
 setState
 } = this.props;
Expand All@@ -244,6 +249,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>

 const { r0c0, r0c1, r1c0, r1c1 } = this.refs as { [key: string]: HTMLElement };


 // Adjust [fixed columns/fixed rows combo] to fixed rows height
 let trs = r0c1.querySelectorAll('tr');
 Array.from(r0c0.querySelectorAll('tr')).forEach((tr, index) => {
Expand All@@ -261,12 +267,77 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 tr.style.height = getComputedStyle(tr2).height;
 });

 // Adjust fixed columns data to data height
 const contentTd = r1c1.querySelector('tr > td:first-of-type');
 if (contentTd) {
 const contentTr = contentTd.parentElement as HTMLElement;
 if (fixed_columns) {
 const r1c0Table = r1c0.querySelector('table') as HTMLElement;
 const r1c1Table = r1c0.querySelector('table') as HTMLElement;

 r1c0Table.style.width = getComputedStyle(r1c1Table).width;

 const lastVisibleTd = r1c0.querySelector(`tr:first-of-type > *:nth-of-type(${fixed_columns})`);

 let it = 0;
 let currentWidth = r1c0.getBoundingClientRect().width;
 let lastWidth = currentWidth;

 do {
 lastWidth = currentWidth

 // Force first column containers width to match visible portion of table
 if (lastVisibleTd) {
 const r1c0FragmentBounds = r1c0.getBoundingClientRect();
 const lastTdBounds = lastVisibleTd.getBoundingClientRect();
 currentWidth = lastTdBounds.right - r1c0FragmentBounds.left;

 const width = `${currentWidth}px`;

 r0c0.style.width = width;
 r1c0.style.width = width;
 }

 // Force second column containers width to match visible portion of table
 const firstVisibleTd = r1c1.querySelector(`tr:first-of-type > *:nth-of-type(${fixed_columns + 1})`);
 if (firstVisibleTd) {
 const r1c1FragmentBounds = r1c1.getBoundingClientRect();
 const firstTdBounds = firstVisibleTd.getBoundingClientRect();

 const width = firstTdBounds.left - r1c1FragmentBounds.left;
 r0c1.style.marginLeft = `-${width}px`;
 r0c1.style.marginRight = `${width}px`;
 r1c1.style.marginLeft = `-${width}px`;
 r1c1.style.marginRight = `${width}px`;
 }

 this.stylesheet.setRule('.dash-fixed-column tr', `height: ${getComputedStyle(contentTr).height};`);
 it++;
 } while (
 Math.abs(currentWidth - lastWidth) > WIDTH_EPSILON ||
 it < MAX_WIDTH_ITERATIONS
 )
 }

 if (fixed_columns || fixed_rows) {
 const r1c0CellWidths = Array.from(
 r1c0.querySelectorAll('table.cell-table > tbody > tr:first-of-type > *')
 ).map(c => c.getBoundingClientRect().width);

 const r1c1CellWidths = Array.from(
 r1c1.querySelectorAll('table.cell-table > tbody > tr:first-of-type > *')
 ).map(c => c.getBoundingClientRect().width);

 Array.from<HTMLElement>(
 r0c0.querySelectorAll('table.cell-table > tbody > tr:first-of-type > *')
 ).forEach((c, i) => this.setCellWidth(c, r1c0CellWidths[i]));

 Array.from<HTMLElement>(
 r0c0.querySelectorAll('table.cell-table > tbody > tr:last-of-type > *')
 ).forEach((c, i) => this.setCellWidth(c, r1c0CellWidths[i]));

 Array.from<HTMLElement>(
 r0c1.querySelectorAll('table.cell-table > tbody > tr:first-of-type > *')
 ).forEach((c, i) => this.setCellWidth(c, r1c1CellWidths[i]));

 Array.from<HTMLElement>(
 r0c1.querySelectorAll('table.cell-table > tbody > tr:last-of-type > *')
 ).forEach((c, i) => this.setCellWidth(c, r1c1CellWidths[i]));
@Marc-Andre-RivetMarc-Andre-RivetApr 4, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

All this replaces and adds to the previous applyStyle method
 }
 }

Expand DownExpand Up@@ -627,98 +698,20 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 ) || page_action === TableAction.Custom;
 }

 applyStyle = () => {
 const {
 fixed_columns,
 fixed_rows,
 row_deletable,
 row_selectable
 } = this.props;

 const { r1c0, r1c1 } = this.refs as { [key: string]: HTMLElement };

 this.updateUiViewport();

 if (row_deletable) {
 this.stylesheet.setRule(
 `.dash-spreadsheet-inner td.dash-delete-cell`,
 `width: 30px; max-width: 30px; min-width: 30px;`
 );
 }

 if (row_selectable) {
 this.stylesheet.setRule(
 `.dash-spreadsheet-inner td.dash-select-cell`,
 `width: 30px; max-width: 30px; min-width: 30px;`
 );
 }

 // Adjust the width of the fixed row header
 if (fixed_rows) {
 Array.from(r1c1.querySelectorAll('tr:first-of-type td.dash-cell, tr:first-of-type th.dash-header')).forEach(td => {
 const classname = td.className.split(' ')[1];
 const style = getComputedStyle(td);
 const width = style.width;

 this.stylesheet.setRule(
 `.dash-fixed-row:not(.dash-fixed-column) th.${classname}`,
 `width: ${width} !important; min-width: ${width} !important; max-width: ${width} !important;`
 );
 });
 }

 // Adjust the width of the fixed row / fixed columns header
 if (fixed_columns && fixed_rows) {
 Array.from(r1c0.querySelectorAll('tr:first-of-type td.dash-cell, tr:first-of-type th.dash-header')).forEach(td => {
 const classname = td.className.split(' ')[1];
 const style = getComputedStyle(td);
 const width = style.width;

 this.stylesheet.setRule(
 `.dash-fixed-column.dash-fixed-row th.${classname}`,
 `width: ${width} !important; min-width: ${width} !important; max-width: ${width} !important;`
 );
 });
 }

 // Adjust widths of row deletable/row selectable headers
 const subTable = fixed_rows && !fixed_columns ? r1c1 : r1c0;

 if (row_deletable) {
 Array.from(subTable.querySelectorAll('tr:first-of-type td.dash-delete-cell')).forEach(td => {
 const style = getComputedStyle(td);
 const width = style.width;

 this.stylesheet.setRule(
 'th.dash-delete-header',
 `width: ${width} !important; min-width: ${width} !important; max-width: ${width} !important;`
 );
 });
 }
 if (row_selectable) {
 Array.from(subTable.querySelectorAll('tr:first-of-type td.dash-select-cell')).forEach(td => {
 const style = getComputedStyle(td);
 const width = style.width;

 this.stylesheet.setRule(
 'th.dash-select-header',
 `width: ${width} !important; min-width: ${width} !important; max-width: ${width} !important;`
 );
 });
 }
 }

 handleDropdown = () => {
 const { r1c1 } = this.refs as { [key: string]: HTMLElement };

 dropdownHelper(r1c1.querySelector('.Select-menu-outer'));
 }

 onScroll = (ev: any) => {
 const { r0c1 } = this.refs as { [key: string]: HTMLElement };
 const { r0c0, r0c1 } = this.refs as { [key: string]: HTMLElement };

 Logger.trace(`ControlledTable fragment scrolled to (left,top)=(${ev.target.scrollLeft},${ev.target.scrollTop})`);
 r0c1.style.marginLeft = `${-ev.target.scrollLeft}px`;

 const margin = parseFloat(ev.target.scrollLeft) + parseFloat(r0c0.style.width);

 r0c1.style.marginLeft = `${-margin}px`;

 this.updateUiViewport();
 this.handleDropdown();
Expand DownExpand Up@@ -952,6 +945,25 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 }
 }

 private setCellWidth(cell: HTMLElement, width: number) {
 cell.style.width = `${width}px`;
 cell.style.minWidth = `${width}px`;
 cell.style.maxWidth = `${width}px`;
 cell.style.boxSizing = 'border-box';

 /**
 * Some browsers handle `th` and `td` size inconsistently.
 * Checking the size delta and adjusting for it (different handling of padding and borders)
 * allows the table to make sure all sections are correctly aligned.
 */
 const delta = cell.getBoundingClientRect().width - width;
 if (delta) {
 cell.style.width = `${width - delta}px`;
 cell.style.minWidth = `${width - delta}px`;
 cell.style.maxWidth = `${width - delta}px`;
 }
 }

 private get showToggleColumns(): boolean {
 const {
 columns,
Expand Down

6 changes: 3 additions & 3 deletions
src/dash-table/components/Filter/Column.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -8,7 +8,7 @@ import TableClipboardHelper from 'dash-table/utils/TableClipboardHelper';
type SetFilter = (ev: any) => void;

interface IColumnFilterProps {
classes: string;
className: string;
 columnId: ColumnId;
 isValid: boolean;
 setFilter: SetFilter;
Expand DownExpand Up@@ -39,15 +39,15 @@ export default class ColumnFilter extends PureComponent<IColumnFilterProps, ISta

 render() {
 const {
classes,
className,
 columnId,
 isValid,
 style,
 value
 } = this.props;

 return (<th
 className={classes + (isValid ? '' : ' invalid')}
 className={className + (isValid ? '' : ' invalid')}
@Marc-Andre-RivetMarc-Andre-RivetMar 23, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

Standardizing prop name across all components simplifies manipulation elsewhere.
 data-dash-column={columnId}
 style={style}
 >
Expand Down

2 changes: 1 addition & 1 deletion
src/dash-table/components/FilterFactory.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -50,7 +50,7 @@ export default class FilterFactory {

 return (<ColumnFilter
 key={`column-${index}`}
classes={`dash-filter column-${index}`}
className={`dash-filter column-${index}`}
 columnId={column.id}
 isValid={!ast || ast.isValid}
 setFilter={this.onChange.bind(this, column, map, setFilter)}
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content

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

Issue 649 - Fix mismatched row height for fixed columns#722
 Merged

Marc-Andre-Rivet
merged 50 commits into

from

Apr 14, 2020
 Merged


Issue 649 - Fix mismatched row height for fixed columns
#722
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


50 commits


Select commit
Hold shift + click to select a range
a58d4eb

Add phantom cells to fixed/unfixed table fragments

Mar 17, 2020
329f357

Update tests to ignore phantom cells

Mar 17, 2020
ddf6079

update cell-x-x styling

Mar 17, 2020
a7bacbe

fix helper (last row cell selector)

Mar 17, 2020
02a851e

Remove problematic content from phantom cells

Mar 17, 2020
bdb8366

Update tests and helpers

Mar 19, 2020
30f6aaa

Fix table styling/size and cell alignment

Mar 19, 2020
c059545

Tweak Markdown percy tests

Mar 20, 2020
ca4ffb2

Table rendering and fragments alignment/sizing through iterative styling

Mar 20, 2020
7faf779

changelog

Mar 24, 2020
7b465c7

update tests

Mar 24, 2020
6f68a9d

Make table non-clickable while keeping td/th clickable

Mar 25, 2020
06f6062

Add visual tests for table with text wrapping (will fail)

Mar 27, 2020
31d3f8b

Make sure the fixed/unfixed tables are the same size for all scenarios

Mar 27, 2020
1a821fe

Prevent CellInput fragment components from attempting to gain keyboar…

Mar 27, 2020
caee5e2

Merge remote-tracking branch 'origin/dev' into 649-mismatched-row-hei…

Mar 27, 2020
c8a1ae1

undo CellInput / focus change

Mar 27, 2020
4928631

redo

Mar 27, 2020
907bca1

CellInput check before props check

Mar 27, 2020
83882f1

lint fix

Mar 27, 2020
9d6fb35

invert

Mar 27, 2020
31ac90a

re-undo

Mar 27, 2020
717bb09

generalize phantom-cell border override

Apr 3, 2020
3dd7b2d

Merge branch 'dev' into 649-mismatched-row-heights


Marc-Andre-Rivet Apr 3, 2020
61eb050

always hide borders for phantom cells, not just when there are fixed …

Apr 3, 2020
a5845ba

Merge branch '649-mismatched-row-heights' of github.com:plotly/dash-t…

Apr 3, 2020
b809fe1

height -> min-height

Apr 3, 2020
8d18401

firefox behaves incorrectly when height is set on td

Apr 3, 2020
78f8fd0

ff: both min-height and height

Apr 3, 2020
15327a4

clean up styling of phantom cells

Apr 3, 2020
621d66b

keep phantom cell right border in cell-0-1 and cell-1-1

Apr 3, 2020
f131359

force type

Apr 3, 2020
b9967ec

ignore phantom-cell

Apr 3, 2020
8523a76

not a phantom cell

Apr 3, 2020
988ae85

undo

Apr 3, 2020
37c5692

move markdown keyboard navigation tests to selenium

Apr 3, 2020
26e6908

beforeEach..

Apr 3, 2020
144a616

additional md visual tests with fixed rows/columns/both

Apr 3, 2020
5b5ca8c

add a row to md "table" visual test

Apr 3, 2020
f0bf0ea

only restyle the cell's table

Apr 3, 2020
f0d72aa

fixed w/ deletable

Apr 3, 2020
75bd7e6

row_deletable

Apr 3, 2020
9c043bd

Comment for cell width delta handling

Apr 4, 2020
104ff53

Update CHANGELOG.md


Marc-Andre-Rivet Apr 7, 2020
33db6f3

Fix Ramda usage

Apr 14, 2020
034db51

Merge branch '649-mismatched-row-heights' of github.com:plotly/dash-t…

Apr 14, 2020
3d0b8c8

refactor duplicated code block

Apr 14, 2020
59ff242

fix typing

Apr 14, 2020
207c90a

clean up exit condition for table fragments sizing

Apr 14, 2020
99136c4

fixed_rows horizontal alignment on scroll

Apr 14, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 1 addition & 1 deletion
.circleci/config.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@ version: 2
jobs:
 "server-test":
 docker:
 - image: circleci/python:3.7.5-node-browsers
 - image: circleci/python:3.7-node-browsers
 - image: cypress/base:10

 steps:
Expand Down

4 changes: 4 additions & 0 deletions
CHANGELOG.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,6 +2,10 @@
All notable changes to this project will be documented in this file.
This project adheres to [Semantic Versioning](http://semver.org/).

## [Unreleased]
### Fixed
- [#722](https://github.com/plotly/dash-table/pull/722) Fix a bug where row height is misaligned when using fixed_columns and/or fixed_rows

## [4.6.2] - 2020-04-01
### Changed
- [#713](https://github.com/plotly/dash-table/pull/713) Update from React 16.8.6 to 16.13.0
Expand Down

10 changes: 8 additions & 2 deletions
demo/data.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -176,9 +176,15 @@ export const generateMixedMarkdownMockData = (rows: number) => unpackIntoColumns
 name: ['Markdown'],
 type: ColumnType.Text,
 presentation: 'markdown',
 data: gendata(_ => [
 data: gendata(i => [
 '```javascript',
 'console.warn("this is a markdown cell")',
 ...(i % 2 === 0 ?
 ['console.warn("this is a markdown cell")'] :
 [
 'console.log("logging things")',
 'console.warn("this is a markdown cell")'
 ]
 ),
@Marc-Andre-RivetMarc-Andre-RivetMar 23, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

Changing the mock to have variable height Markdown rows
 '```'].join('\n'), rows)
 },
 {
Expand Down

4 changes: 2 additions & 2 deletions
src/dash-table/components/Cell/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -22,7 +22,7 @@ export default class Cell extends Component<ICellProps> {
 render() {
 const {
 attributes,
classes,
className,
 onClick,
 onDoubleClick,
 onMouseEnter,
Expand All@@ -35,7 +35,7 @@ export default class Cell extends Component<ICellProps> {
 ref='td'
 children={(this as any).props.children}
 tabIndex={-1}
 className={classes}
 className={className}
 onClick={onClick}
 onDoubleClick={onDoubleClick}
 onMouseEnter={onMouseEnter}
Expand Down

2 changes: 1 addition & 1 deletion
src/dash-table/components/Cell/props.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,7 +7,7 @@ interface IAttributes {
export interface ICellProps {
 active: boolean;
 attributes: IAttributes;
classes: string;
className: string;
 onClick: (e: MouseEvent) => void;
 onDoubleClick: (e: MouseEvent) => void;
 onMouseEnter: (e: MouseEvent) => void;
Expand Down

2 changes: 1 addition & 1 deletion
src/dash-table/components/CellDropdown/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -75,7 +75,7 @@ export default class CellDropdown extends PureComponent<IProps> {
 if (applyFocus && dropdown && document.activeElement !== dropdown) {
 // Limitation. If React >= 16 --> Use React.createRef instead to pass parent ref to child
 const tdParent = DOM.getFirstParentOfType(dropdown.wrapper, 'td');
 if (tdParent) {
 if (tdParent && tdParent.className.indexOf('phantom-cell') === -1) {
 tdParent.focus();
 }
 }
Expand Down

2 changes: 1 addition & 1 deletion
src/dash-table/components/CellMarkdown/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -62,7 +62,7 @@ export default class CellMarkdown extends PureComponent<IProps, {}> {
 if (applyFocus && el && document.activeElement !== el) {
 // Limitation. If React >= 16 --> Use React.createRef instead to pass parent ref to child
 const tdParent = DOM.getFirstParentOfType(el, 'td');
 if (tdParent) {
 if (tdParent && tdParent.className.indexOf('phantom-cell') !== -1) {
 tdParent.focus();
 }
 }
Expand Down

192 changes: 102 additions & 90 deletions
src/dash-table/components/ControlledTable/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -48,6 +48,9 @@ const INNER_STYLE = {
 minWidth: '100%'
};

const WIDTH_EPSILON = 0.5;
const MAX_WIDTH_ITERATIONS = 30;
@Marc-Andre-RivetMarc-Andre-RivetMar 23, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

30 is a very high number but most of the time it takes 2-6 iterations for the table's column width to settle.

export default class ControlledTable extends PureComponent<ControlledTableProps> {
 private readonly menuRef = React.createRef<HTMLDivElement>();
 private readonly stylesheet: Stylesheet = new Stylesheet(`#${this.props.id}`);
Expand DownExpand Up@@ -134,7 +137,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 setProps({ active_cell: selected_cells[0] });
 }

 this.applyStyle();
 this.updateUiViewport();
 this.handleResize();
 }

Expand All@@ -146,7 +149,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>

 componentDidUpdate() {
 this.updateStylesheet();
 this.applyStyle();
@Marc-Andre-RivetMarc-Andre-RivetMar 23, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

applyStyle is removed / replaced by new code to handle the fixed rows
 this.updateUiViewport();
 this.handleResize();
 this.handleDropdown();
 this.adjustTooltipPosition();
Expand DownExpand Up@@ -226,6 +229,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>

 handleResize = (force: boolean = false) => {
 const {
 fixed_columns,
 fixed_rows,
 forcedResizeOnly,
 setState
 } = this.props;
Expand All@@ -244,6 +249,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>

 const { r0c0, r0c1, r1c0, r1c1 } = this.refs as { [key: string]: HTMLElement };


 // Adjust [fixed columns/fixed rows combo] to fixed rows height
 let trs = r0c1.querySelectorAll('tr');
 Array.from(r0c0.querySelectorAll('tr')).forEach((tr, index) => {
Expand All@@ -261,12 +267,77 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 tr.style.height = getComputedStyle(tr2).height;
 });

 // Adjust fixed columns data to data height
 const contentTd = r1c1.querySelector('tr > td:first-of-type');
 if (contentTd) {
 const contentTr = contentTd.parentElement as HTMLElement;
 if (fixed_columns) {
 const r1c0Table = r1c0.querySelector('table') as HTMLElement;
 const r1c1Table = r1c0.querySelector('table') as HTMLElement;

 r1c0Table.style.width = getComputedStyle(r1c1Table).width;

 const lastVisibleTd = r1c0.querySelector(`tr:first-of-type > *:nth-of-type(${fixed_columns})`);

 let it = 0;
 let currentWidth = r1c0.getBoundingClientRect().width;
 let lastWidth = currentWidth;

 do {
 lastWidth = currentWidth

 // Force first column containers width to match visible portion of table
 if (lastVisibleTd) {
 const r1c0FragmentBounds = r1c0.getBoundingClientRect();
 const lastTdBounds = lastVisibleTd.getBoundingClientRect();
 currentWidth = lastTdBounds.right - r1c0FragmentBounds.left;

 const width = `${currentWidth}px`;

 r0c0.style.width = width;
 r1c0.style.width = width;
 }

 // Force second column containers width to match visible portion of table
 const firstVisibleTd = r1c1.querySelector(`tr:first-of-type > *:nth-of-type(${fixed_columns + 1})`);
 if (firstVisibleTd) {
 const r1c1FragmentBounds = r1c1.getBoundingClientRect();
 const firstTdBounds = firstVisibleTd.getBoundingClientRect();

 const width = firstTdBounds.left - r1c1FragmentBounds.left;
 r0c1.style.marginLeft = `-${width}px`;
 r0c1.style.marginRight = `${width}px`;
 r1c1.style.marginLeft = `-${width}px`;
 r1c1.style.marginRight = `${width}px`;
 }

 this.stylesheet.setRule('.dash-fixed-column tr', `height: ${getComputedStyle(contentTr).height};`);
 it++;
 } while (
 Math.abs(currentWidth - lastWidth) > WIDTH_EPSILON ||
 it < MAX_WIDTH_ITERATIONS
 )
 }

 if (fixed_columns || fixed_rows) {
 const r1c0CellWidths = Array.from(
 r1c0.querySelectorAll('table.cell-table > tbody > tr:first-of-type > *')
 ).map(c => c.getBoundingClientRect().width);

 const r1c1CellWidths = Array.from(
 r1c1.querySelectorAll('table.cell-table > tbody > tr:first-of-type > *')
 ).map(c => c.getBoundingClientRect().width);

 Array.from<HTMLElement>(
 r0c0.querySelectorAll('table.cell-table > tbody > tr:first-of-type > *')
 ).forEach((c, i) => this.setCellWidth(c, r1c0CellWidths[i]));

 Array.from<HTMLElement>(
 r0c0.querySelectorAll('table.cell-table > tbody > tr:last-of-type > *')
 ).forEach((c, i) => this.setCellWidth(c, r1c0CellWidths[i]));

 Array.from<HTMLElement>(
 r0c1.querySelectorAll('table.cell-table > tbody > tr:first-of-type > *')
 ).forEach((c, i) => this.setCellWidth(c, r1c1CellWidths[i]));

 Array.from<HTMLElement>(
 r0c1.querySelectorAll('table.cell-table > tbody > tr:last-of-type > *')
 ).forEach((c, i) => this.setCellWidth(c, r1c1CellWidths[i]));
@Marc-Andre-RivetMarc-Andre-RivetApr 4, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

All this replaces and adds to the previous applyStyle method
 }
 }

Expand DownExpand Up@@ -627,98 +698,20 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 ) || page_action === TableAction.Custom;
 }

 applyStyle = () => {
 const {
 fixed_columns,
 fixed_rows,
 row_deletable,
 row_selectable
 } = this.props;

 const { r1c0, r1c1 } = this.refs as { [key: string]: HTMLElement };

 this.updateUiViewport();

 if (row_deletable) {
 this.stylesheet.setRule(
 `.dash-spreadsheet-inner td.dash-delete-cell`,
 `width: 30px; max-width: 30px; min-width: 30px;`
 );
 }

 if (row_selectable) {
 this.stylesheet.setRule(
 `.dash-spreadsheet-inner td.dash-select-cell`,
 `width: 30px; max-width: 30px; min-width: 30px;`
 );
 }

 // Adjust the width of the fixed row header
 if (fixed_rows) {
 Array.from(r1c1.querySelectorAll('tr:first-of-type td.dash-cell, tr:first-of-type th.dash-header')).forEach(td => {
 const classname = td.className.split(' ')[1];
 const style = getComputedStyle(td);
 const width = style.width;

 this.stylesheet.setRule(
 `.dash-fixed-row:not(.dash-fixed-column) th.${classname}`,
 `width: ${width} !important; min-width: ${width} !important; max-width: ${width} !important;`
 );
 });
 }

 // Adjust the width of the fixed row / fixed columns header
 if (fixed_columns && fixed_rows) {
 Array.from(r1c0.querySelectorAll('tr:first-of-type td.dash-cell, tr:first-of-type th.dash-header')).forEach(td => {
 const classname = td.className.split(' ')[1];
 const style = getComputedStyle(td);
 const width = style.width;

 this.stylesheet.setRule(
 `.dash-fixed-column.dash-fixed-row th.${classname}`,
 `width: ${width} !important; min-width: ${width} !important; max-width: ${width} !important;`
 );
 });
 }

 // Adjust widths of row deletable/row selectable headers
 const subTable = fixed_rows && !fixed_columns ? r1c1 : r1c0;

 if (row_deletable) {
 Array.from(subTable.querySelectorAll('tr:first-of-type td.dash-delete-cell')).forEach(td => {
 const style = getComputedStyle(td);
 const width = style.width;

 this.stylesheet.setRule(
 'th.dash-delete-header',
 `width: ${width} !important; min-width: ${width} !important; max-width: ${width} !important;`
 );
 });
 }
 if (row_selectable) {
 Array.from(subTable.querySelectorAll('tr:first-of-type td.dash-select-cell')).forEach(td => {
 const style = getComputedStyle(td);
 const width = style.width;

 this.stylesheet.setRule(
 'th.dash-select-header',
 `width: ${width} !important; min-width: ${width} !important; max-width: ${width} !important;`
 );
 });
 }
 }

 handleDropdown = () => {
 const { r1c1 } = this.refs as { [key: string]: HTMLElement };

 dropdownHelper(r1c1.querySelector('.Select-menu-outer'));
 }

 onScroll = (ev: any) => {
 const { r0c1 } = this.refs as { [key: string]: HTMLElement };
 const { r0c0, r0c1 } = this.refs as { [key: string]: HTMLElement };

 Logger.trace(`ControlledTable fragment scrolled to (left,top)=(${ev.target.scrollLeft},${ev.target.scrollTop})`);
 r0c1.style.marginLeft = `${-ev.target.scrollLeft}px`;

 const margin = parseFloat(ev.target.scrollLeft) + parseFloat(r0c0.style.width);

 r0c1.style.marginLeft = `${-margin}px`;

 this.updateUiViewport();
 this.handleDropdown();
Expand DownExpand Up@@ -952,6 +945,25 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 }
 }

 private setCellWidth(cell: HTMLElement, width: number) {
 cell.style.width = `${width}px`;
 cell.style.minWidth = `${width}px`;
 cell.style.maxWidth = `${width}px`;
 cell.style.boxSizing = 'border-box';

 /**
 * Some browsers handle `th` and `td` size inconsistently.
 * Checking the size delta and adjusting for it (different handling of padding and borders)
 * allows the table to make sure all sections are correctly aligned.
 */
 const delta = cell.getBoundingClientRect().width - width;
 if (delta) {
 cell.style.width = `${width - delta}px`;
 cell.style.minWidth = `${width - delta}px`;
 cell.style.maxWidth = `${width - delta}px`;
 }
 }

 private get showToggleColumns(): boolean {
 const {
 columns,
Expand Down

6 changes: 3 additions & 3 deletions
src/dash-table/components/Filter/Column.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -8,7 +8,7 @@ import TableClipboardHelper from 'dash-table/utils/TableClipboardHelper';
type SetFilter = (ev: any) => void;

interface IColumnFilterProps {
classes: string;
className: string;
 columnId: ColumnId;
 isValid: boolean;
 setFilter: SetFilter;
Expand DownExpand Up@@ -39,15 +39,15 @@ export default class ColumnFilter extends PureComponent<IColumnFilterProps, ISta

 render() {
 const {
classes,
className,
 columnId,
 isValid,
 style,
 value
 } = this.props;

 return (<th
 className={classes + (isValid ? '' : ' invalid')}
 className={className + (isValid ? '' : ' invalid')}
@Marc-Andre-RivetMarc-Andre-RivetMar 23, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

Standardizing prop name across all components simplifies manipulation elsewhere.
 data-dash-column={columnId}
 style={style}
 >
Expand Down

2 changes: 1 addition & 1 deletion
src/dash-table/components/FilterFactory.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -50,7 +50,7 @@ export default class FilterFactory {

 return (<ColumnFilter
 key={`column-${index}`}
classes={`dash-filter column-${index}`}
className={`dash-filter column-${index}`}
 columnId={column.id}
 isValid={!ast || ast.isValid}
 setFilter={this.onChange.bind(this, column, map, setFilter)}
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content

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

Issue 649 - Fix mismatched row height for fixed columns#722
 Merged

Marc-Andre-Rivet
merged 50 commits into

from

Apr 14, 2020
 Merged


Issue 649 - Fix mismatched row height for fixed columns
#722
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


50 commits


Select commit
Hold shift + click to select a range
a58d4eb

Add phantom cells to fixed/unfixed table fragments

Mar 17, 2020
329f357

Update tests to ignore phantom cells

Mar 17, 2020
ddf6079

update cell-x-x styling

Mar 17, 2020
a7bacbe

fix helper (last row cell selector)

Mar 17, 2020
02a851e

Remove problematic content from phantom cells

Mar 17, 2020
bdb8366

Update tests and helpers

Mar 19, 2020
30f6aaa

Fix table styling/size and cell alignment

Mar 19, 2020
c059545

Tweak Markdown percy tests

Mar 20, 2020
ca4ffb2

Table rendering and fragments alignment/sizing through iterative styling

Mar 20, 2020
7faf779

changelog

Mar 24, 2020
7b465c7

update tests

Mar 24, 2020
6f68a9d

Make table non-clickable while keeping td/th clickable

Mar 25, 2020
06f6062

Add visual tests for table with text wrapping (will fail)

Mar 27, 2020
31d3f8b

Make sure the fixed/unfixed tables are the same size for all scenarios

Mar 27, 2020
1a821fe

Prevent CellInput fragment components from attempting to gain keyboar…

Mar 27, 2020
caee5e2

Merge remote-tracking branch 'origin/dev' into 649-mismatched-row-hei…

Mar 27, 2020
c8a1ae1

undo CellInput / focus change

Mar 27, 2020
4928631

redo

Mar 27, 2020
907bca1

CellInput check before props check

Mar 27, 2020
83882f1

lint fix

Mar 27, 2020
9d6fb35

invert

Mar 27, 2020
31ac90a

re-undo

Mar 27, 2020
717bb09

generalize phantom-cell border override

Apr 3, 2020
3dd7b2d

Merge branch 'dev' into 649-mismatched-row-heights


Marc-Andre-Rivet Apr 3, 2020
61eb050

always hide borders for phantom cells, not just when there are fixed …

Apr 3, 2020
a5845ba

Merge branch '649-mismatched-row-heights' of github.com:plotly/dash-t…

Apr 3, 2020
b809fe1

height -> min-height

Apr 3, 2020
8d18401

firefox behaves incorrectly when height is set on td

Apr 3, 2020
78f8fd0

ff: both min-height and height

Apr 3, 2020
15327a4

clean up styling of phantom cells

Apr 3, 2020
621d66b

keep phantom cell right border in cell-0-1 and cell-1-1

Apr 3, 2020
f131359

force type

Apr 3, 2020
b9967ec

ignore phantom-cell

Apr 3, 2020
8523a76

not a phantom cell

Apr 3, 2020
988ae85

undo

Apr 3, 2020
37c5692

move markdown keyboard navigation tests to selenium

Apr 3, 2020
26e6908

beforeEach..

Apr 3, 2020
144a616

additional md visual tests with fixed rows/columns/both

Apr 3, 2020
5b5ca8c

add a row to md "table" visual test

Apr 3, 2020
f0bf0ea

only restyle the cell's table

Apr 3, 2020
f0d72aa

fixed w/ deletable

Apr 3, 2020
75bd7e6

row_deletable

Apr 3, 2020
9c043bd

Comment for cell width delta handling

Apr 4, 2020
104ff53

Update CHANGELOG.md


Marc-Andre-Rivet Apr 7, 2020
33db6f3

Fix Ramda usage

Apr 14, 2020
034db51

Merge branch '649-mismatched-row-heights' of github.com:plotly/dash-t…

Apr 14, 2020
3d0b8c8

refactor duplicated code block

Apr 14, 2020
59ff242

fix typing

Apr 14, 2020
207c90a

clean up exit condition for table fragments sizing

Apr 14, 2020
99136c4

fixed_rows horizontal alignment on scroll

Apr 14, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 1 addition & 1 deletion
.circleci/config.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@ version: 2
jobs:
 "server-test":
 docker:
 - image: circleci/python:3.7.5-node-browsers
 - image: circleci/python:3.7-node-browsers
 - image: cypress/base:10

 steps:
Expand Down

4 changes: 4 additions & 0 deletions
CHANGELOG.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,6 +2,10 @@
All notable changes to this project will be documented in this file.
This project adheres to [Semantic Versioning](http://semver.org/).

## [Unreleased]
### Fixed
- [#722](https://github.com/plotly/dash-table/pull/722) Fix a bug where row height is misaligned when using fixed_columns and/or fixed_rows

## [4.6.2] - 2020-04-01
### Changed
- [#713](https://github.com/plotly/dash-table/pull/713) Update from React 16.8.6 to 16.13.0
Expand Down

10 changes: 8 additions & 2 deletions
demo/data.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -176,9 +176,15 @@ export const generateMixedMarkdownMockData = (rows: number) => unpackIntoColumns
 name: ['Markdown'],
 type: ColumnType.Text,
 presentation: 'markdown',
 data: gendata(_ => [
 data: gendata(i => [
 '```javascript',
 'console.warn("this is a markdown cell")',
 ...(i % 2 === 0 ?
 ['console.warn("this is a markdown cell")'] :
 [
 'console.log("logging things")',
 'console.warn("this is a markdown cell")'
 ]
 ),
@Marc-Andre-RivetMarc-Andre-RivetMar 23, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

Changing the mock to have variable height Markdown rows
 '```'].join('\n'), rows)
 },
 {
Expand Down

4 changes: 2 additions & 2 deletions
src/dash-table/components/Cell/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -22,7 +22,7 @@ export default class Cell extends Component<ICellProps> {
 render() {
 const {
 attributes,
classes,
className,
 onClick,
 onDoubleClick,
 onMouseEnter,
Expand All@@ -35,7 +35,7 @@ export default class Cell extends Component<ICellProps> {
 ref='td'
 children={(this as any).props.children}
 tabIndex={-1}
 className={classes}
 className={className}
 onClick={onClick}
 onDoubleClick={onDoubleClick}
 onMouseEnter={onMouseEnter}
Expand Down

2 changes: 1 addition & 1 deletion
src/dash-table/components/Cell/props.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,7 +7,7 @@ interface IAttributes {
export interface ICellProps {
 active: boolean;
 attributes: IAttributes;
classes: string;
className: string;
 onClick: (e: MouseEvent) => void;
 onDoubleClick: (e: MouseEvent) => void;
 onMouseEnter: (e: MouseEvent) => void;
Expand Down

2 changes: 1 addition & 1 deletion
src/dash-table/components/CellDropdown/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -75,7 +75,7 @@ export default class CellDropdown extends PureComponent<IProps> {
 if (applyFocus && dropdown && document.activeElement !== dropdown) {
 // Limitation. If React >= 16 --> Use React.createRef instead to pass parent ref to child
 const tdParent = DOM.getFirstParentOfType(dropdown.wrapper, 'td');
 if (tdParent) {
 if (tdParent && tdParent.className.indexOf('phantom-cell') === -1) {
 tdParent.focus();
 }
 }
Expand Down

2 changes: 1 addition & 1 deletion
src/dash-table/components/CellMarkdown/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -62,7 +62,7 @@ export default class CellMarkdown extends PureComponent<IProps, {}> {
 if (applyFocus && el && document.activeElement !== el) {
 // Limitation. If React >= 16 --> Use React.createRef instead to pass parent ref to child
 const tdParent = DOM.getFirstParentOfType(el, 'td');
 if (tdParent) {
 if (tdParent && tdParent.className.indexOf('phantom-cell') !== -1) {
 tdParent.focus();
 }
 }
Expand Down

192 changes: 102 additions & 90 deletions
src/dash-table/components/ControlledTable/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -48,6 +48,9 @@ const INNER_STYLE = {
 minWidth: '100%'
};

const WIDTH_EPSILON = 0.5;
const MAX_WIDTH_ITERATIONS = 30;
@Marc-Andre-RivetMarc-Andre-RivetMar 23, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

30 is a very high number but most of the time it takes 2-6 iterations for the table's column width to settle.

export default class ControlledTable extends PureComponent<ControlledTableProps> {
 private readonly menuRef = React.createRef<HTMLDivElement>();
 private readonly stylesheet: Stylesheet = new Stylesheet(`#${this.props.id}`);
Expand DownExpand Up@@ -134,7 +137,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 setProps({ active_cell: selected_cells[0] });
 }

 this.applyStyle();
 this.updateUiViewport();
 this.handleResize();
 }

Expand All@@ -146,7 +149,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>

 componentDidUpdate() {
 this.updateStylesheet();
 this.applyStyle();
@Marc-Andre-RivetMarc-Andre-RivetMar 23, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

applyStyle is removed / replaced by new code to handle the fixed rows
 this.updateUiViewport();
 this.handleResize();
 this.handleDropdown();
 this.adjustTooltipPosition();
Expand DownExpand Up@@ -226,6 +229,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>

 handleResize = (force: boolean = false) => {
 const {
 fixed_columns,
 fixed_rows,
 forcedResizeOnly,
 setState
 } = this.props;
Expand All@@ -244,6 +249,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>

 const { r0c0, r0c1, r1c0, r1c1 } = this.refs as { [key: string]: HTMLElement };


 // Adjust [fixed columns/fixed rows combo] to fixed rows height
 let trs = r0c1.querySelectorAll('tr');
 Array.from(r0c0.querySelectorAll('tr')).forEach((tr, index) => {
Expand All@@ -261,12 +267,77 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 tr.style.height = getComputedStyle(tr2).height;
 });

 // Adjust fixed columns data to data height
 const contentTd = r1c1.querySelector('tr > td:first-of-type');
 if (contentTd) {
 const contentTr = contentTd.parentElement as HTMLElement;
 if (fixed_columns) {
 const r1c0Table = r1c0.querySelector('table') as HTMLElement;
 const r1c1Table = r1c0.querySelector('table') as HTMLElement;

 r1c0Table.style.width = getComputedStyle(r1c1Table).width;

 const lastVisibleTd = r1c0.querySelector(`tr:first-of-type > *:nth-of-type(${fixed_columns})`);

 let it = 0;
 let currentWidth = r1c0.getBoundingClientRect().width;
 let lastWidth = currentWidth;

 do {
 lastWidth = currentWidth

 // Force first column containers width to match visible portion of table
 if (lastVisibleTd) {
 const r1c0FragmentBounds = r1c0.getBoundingClientRect();
 const lastTdBounds = lastVisibleTd.getBoundingClientRect();
 currentWidth = lastTdBounds.right - r1c0FragmentBounds.left;

 const width = `${currentWidth}px`;

 r0c0.style.width = width;
 r1c0.style.width = width;
 }

 // Force second column containers width to match visible portion of table
 const firstVisibleTd = r1c1.querySelector(`tr:first-of-type > *:nth-of-type(${fixed_columns + 1})`);
 if (firstVisibleTd) {
 const r1c1FragmentBounds = r1c1.getBoundingClientRect();
 const firstTdBounds = firstVisibleTd.getBoundingClientRect();

 const width = firstTdBounds.left - r1c1FragmentBounds.left;
 r0c1.style.marginLeft = `-${width}px`;
 r0c1.style.marginRight = `${width}px`;
 r1c1.style.marginLeft = `-${width}px`;
 r1c1.style.marginRight = `${width}px`;
 }

 this.stylesheet.setRule('.dash-fixed-column tr', `height: ${getComputedStyle(contentTr).height};`);
 it++;
 } while (
 Math.abs(currentWidth - lastWidth) > WIDTH_EPSILON ||
 it < MAX_WIDTH_ITERATIONS
 )
 }

 if (fixed_columns || fixed_rows) {
 const r1c0CellWidths = Array.from(
 r1c0.querySelectorAll('table.cell-table > tbody > tr:first-of-type > *')
 ).map(c => c.getBoundingClientRect().width);

 const r1c1CellWidths = Array.from(
 r1c1.querySelectorAll('table.cell-table > tbody > tr:first-of-type > *')
 ).map(c => c.getBoundingClientRect().width);

 Array.from<HTMLElement>(
 r0c0.querySelectorAll('table.cell-table > tbody > tr:first-of-type > *')
 ).forEach((c, i) => this.setCellWidth(c, r1c0CellWidths[i]));

 Array.from<HTMLElement>(
 r0c0.querySelectorAll('table.cell-table > tbody > tr:last-of-type > *')
 ).forEach((c, i) => this.setCellWidth(c, r1c0CellWidths[i]));

 Array.from<HTMLElement>(
 r0c1.querySelectorAll('table.cell-table > tbody > tr:first-of-type > *')
 ).forEach((c, i) => this.setCellWidth(c, r1c1CellWidths[i]));

 Array.from<HTMLElement>(
 r0c1.querySelectorAll('table.cell-table > tbody > tr:last-of-type > *')
 ).forEach((c, i) => this.setCellWidth(c, r1c1CellWidths[i]));
@Marc-Andre-RivetMarc-Andre-RivetApr 4, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

All this replaces and adds to the previous applyStyle method
 }
 }

Expand DownExpand Up@@ -627,98 +698,20 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 ) || page_action === TableAction.Custom;
 }

 applyStyle = () => {
 const {
 fixed_columns,
 fixed_rows,
 row_deletable,
 row_selectable
 } = this.props;

 const { r1c0, r1c1 } = this.refs as { [key: string]: HTMLElement };

 this.updateUiViewport();

 if (row_deletable) {
 this.stylesheet.setRule(
 `.dash-spreadsheet-inner td.dash-delete-cell`,
 `width: 30px; max-width: 30px; min-width: 30px;`
 );
 }

 if (row_selectable) {
 this.stylesheet.setRule(
 `.dash-spreadsheet-inner td.dash-select-cell`,
 `width: 30px; max-width: 30px; min-width: 30px;`
 );
 }

 // Adjust the width of the fixed row header
 if (fixed_rows) {
 Array.from(r1c1.querySelectorAll('tr:first-of-type td.dash-cell, tr:first-of-type th.dash-header')).forEach(td => {
 const classname = td.className.split(' ')[1];
 const style = getComputedStyle(td);
 const width = style.width;

 this.stylesheet.setRule(
 `.dash-fixed-row:not(.dash-fixed-column) th.${classname}`,
 `width: ${width} !important; min-width: ${width} !important; max-width: ${width} !important;`
 );
 });
 }

 // Adjust the width of the fixed row / fixed columns header
 if (fixed_columns && fixed_rows) {
 Array.from(r1c0.querySelectorAll('tr:first-of-type td.dash-cell, tr:first-of-type th.dash-header')).forEach(td => {
 const classname = td.className.split(' ')[1];
 const style = getComputedStyle(td);
 const width = style.width;

 this.stylesheet.setRule(
 `.dash-fixed-column.dash-fixed-row th.${classname}`,
 `width: ${width} !important; min-width: ${width} !important; max-width: ${width} !important;`
 );
 });
 }

 // Adjust widths of row deletable/row selectable headers
 const subTable = fixed_rows && !fixed_columns ? r1c1 : r1c0;

 if (row_deletable) {
 Array.from(subTable.querySelectorAll('tr:first-of-type td.dash-delete-cell')).forEach(td => {
 const style = getComputedStyle(td);
 const width = style.width;

 this.stylesheet.setRule(
 'th.dash-delete-header',
 `width: ${width} !important; min-width: ${width} !important; max-width: ${width} !important;`
 );
 });
 }
 if (row_selectable) {
 Array.from(subTable.querySelectorAll('tr:first-of-type td.dash-select-cell')).forEach(td => {
 const style = getComputedStyle(td);
 const width = style.width;

 this.stylesheet.setRule(
 'th.dash-select-header',
 `width: ${width} !important; min-width: ${width} !important; max-width: ${width} !important;`
 );
 });
 }
 }

 handleDropdown = () => {
 const { r1c1 } = this.refs as { [key: string]: HTMLElement };

 dropdownHelper(r1c1.querySelector('.Select-menu-outer'));
 }

 onScroll = (ev: any) => {
 const { r0c1 } = this.refs as { [key: string]: HTMLElement };
 const { r0c0, r0c1 } = this.refs as { [key: string]: HTMLElement };

 Logger.trace(`ControlledTable fragment scrolled to (left,top)=(${ev.target.scrollLeft},${ev.target.scrollTop})`);
 r0c1.style.marginLeft = `${-ev.target.scrollLeft}px`;

 const margin = parseFloat(ev.target.scrollLeft) + parseFloat(r0c0.style.width);

 r0c1.style.marginLeft = `${-margin}px`;

 this.updateUiViewport();
 this.handleDropdown();
Expand DownExpand Up@@ -952,6 +945,25 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 }
 }

 private setCellWidth(cell: HTMLElement, width: number) {
 cell.style.width = `${width}px`;
 cell.style.minWidth = `${width}px`;
 cell.style.maxWidth = `${width}px`;
 cell.style.boxSizing = 'border-box';

 /**
 * Some browsers handle `th` and `td` size inconsistently.
 * Checking the size delta and adjusting for it (different handling of padding and borders)
 * allows the table to make sure all sections are correctly aligned.
 */
 const delta = cell.getBoundingClientRect().width - width;
 if (delta) {
 cell.style.width = `${width - delta}px`;
 cell.style.minWidth = `${width - delta}px`;
 cell.style.maxWidth = `${width - delta}px`;
 }
 }

 private get showToggleColumns(): boolean {
 const {
 columns,
Expand Down

6 changes: 3 additions & 3 deletions
src/dash-table/components/Filter/Column.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -8,7 +8,7 @@ import TableClipboardHelper from 'dash-table/utils/TableClipboardHelper';
type SetFilter = (ev: any) => void;

interface IColumnFilterProps {
classes: string;
className: string;
 columnId: ColumnId;
 isValid: boolean;
 setFilter: SetFilter;
Expand DownExpand Up@@ -39,15 +39,15 @@ export default class ColumnFilter extends PureComponent<IColumnFilterProps, ISta

 render() {
 const {
classes,
className,
 columnId,
 isValid,
 style,
 value
 } = this.props;

 return (<th
 className={classes + (isValid ? '' : ' invalid')}
 className={className + (isValid ? '' : ' invalid')}
@Marc-Andre-RivetMarc-Andre-RivetMar 23, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

Standardizing prop name across all components simplifies manipulation elsewhere.
 data-dash-column={columnId}
 style={style}
 >
Expand Down

2 changes: 1 addition & 1 deletion
src/dash-table/components/FilterFactory.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -50,7 +50,7 @@ export default class FilterFactory {

 return (<ColumnFilter
 key={`column-${index}`}
classes={`dash-filter column-${index}`}
className={`dash-filter column-${index}`}
 columnId={column.id}
 isValid={!ast || ast.isValid}
 setFilter={this.onChange.bind(this, column, map, setFilter)}
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content

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

Issue 649 - Fix mismatched row height for fixed columns#722
 Merged

Marc-Andre-Rivet
merged 50 commits into

from

Apr 14, 2020
 Merged


Issue 649 - Fix mismatched row height for fixed columns
#722
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


50 commits


Select commit
Hold shift + click to select a range
a58d4eb

Add phantom cells to fixed/unfixed table fragments

Mar 17, 2020
329f357

Update tests to ignore phantom cells

Mar 17, 2020
ddf6079

update cell-x-x styling

Mar 17, 2020
a7bacbe

fix helper (last row cell selector)

Mar 17, 2020
02a851e

Remove problematic content from phantom cells

Mar 17, 2020
bdb8366

Update tests and helpers

Mar 19, 2020
30f6aaa

Fix table styling/size and cell alignment

Mar 19, 2020
c059545

Tweak Markdown percy tests

Mar 20, 2020
ca4ffb2

Table rendering and fragments alignment/sizing through iterative styling

Mar 20, 2020
7faf779

changelog

Mar 24, 2020
7b465c7

update tests

Mar 24, 2020
6f68a9d

Make table non-clickable while keeping td/th clickable

Mar 25, 2020
06f6062

Add visual tests for table with text wrapping (will fail)

Mar 27, 2020
31d3f8b

Make sure the fixed/unfixed tables are the same size for all scenarios

Mar 27, 2020
1a821fe

Prevent CellInput fragment components from attempting to gain keyboar…

Mar 27, 2020
caee5e2

Merge remote-tracking branch 'origin/dev' into 649-mismatched-row-hei…

Mar 27, 2020
c8a1ae1

undo CellInput / focus change

Mar 27, 2020
4928631

redo

Mar 27, 2020
907bca1

CellInput check before props check

Mar 27, 2020
83882f1

lint fix

Mar 27, 2020
9d6fb35

invert

Mar 27, 2020
31ac90a

re-undo

Mar 27, 2020
717bb09

generalize phantom-cell border override

Apr 3, 2020
3dd7b2d

Merge branch 'dev' into 649-mismatched-row-heights


Marc-Andre-Rivet Apr 3, 2020
61eb050

always hide borders for phantom cells, not just when there are fixed …

Apr 3, 2020
a5845ba

Merge branch '649-mismatched-row-heights' of github.com:plotly/dash-t…

Apr 3, 2020
b809fe1

height -> min-height

Apr 3, 2020
8d18401

firefox behaves incorrectly when height is set on td

Apr 3, 2020
78f8fd0

ff: both min-height and height

Apr 3, 2020
15327a4

clean up styling of phantom cells

Apr 3, 2020
621d66b

keep phantom cell right border in cell-0-1 and cell-1-1

Apr 3, 2020
f131359

force type

Apr 3, 2020
b9967ec

ignore phantom-cell

Apr 3, 2020
8523a76

not a phantom cell

Apr 3, 2020
988ae85

undo

Apr 3, 2020
37c5692

move markdown keyboard navigation tests to selenium

Apr 3, 2020
26e6908

beforeEach..

Apr 3, 2020
144a616

additional md visual tests with fixed rows/columns/both

Apr 3, 2020
5b5ca8c

add a row to md "table" visual test

Apr 3, 2020
f0bf0ea

only restyle the cell's table

Apr 3, 2020
f0d72aa

fixed w/ deletable

Apr 3, 2020
75bd7e6

row_deletable

Apr 3, 2020
9c043bd

Comment for cell width delta handling

Apr 4, 2020
104ff53

Update CHANGELOG.md


Marc-Andre-Rivet Apr 7, 2020
33db6f3

Fix Ramda usage

Apr 14, 2020
034db51

Merge branch '649-mismatched-row-heights' of github.com:plotly/dash-t…

Apr 14, 2020
3d0b8c8

refactor duplicated code block

Apr 14, 2020
59ff242

fix typing

Apr 14, 2020
207c90a

clean up exit condition for table fragments sizing

Apr 14, 2020
99136c4

fixed_rows horizontal alignment on scroll

Apr 14, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 1 addition & 1 deletion
.circleci/config.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@ version: 2
jobs:
 "server-test":
 docker:
 - image: circleci/python:3.7.5-node-browsers
 - image: circleci/python:3.7-node-browsers
 - image: cypress/base:10

 steps:
Expand Down

4 changes: 4 additions & 0 deletions
CHANGELOG.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,6 +2,10 @@
All notable changes to this project will be documented in this file.
This project adheres to [Semantic Versioning](http://semver.org/).

## [Unreleased]
### Fixed
- [#722](https://github.com/plotly/dash-table/pull/722) Fix a bug where row height is misaligned when using fixed_columns and/or fixed_rows

## [4.6.2] - 2020-04-01
### Changed
- [#713](https://github.com/plotly/dash-table/pull/713) Update from React 16.8.6 to 16.13.0
Expand Down

10 changes: 8 additions & 2 deletions
demo/data.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -176,9 +176,15 @@ export const generateMixedMarkdownMockData = (rows: number) => unpackIntoColumns
 name: ['Markdown'],
 type: ColumnType.Text,
 presentation: 'markdown',
 data: gendata(_ => [
 data: gendata(i => [
 '```javascript',
 'console.warn("this is a markdown cell")',
 ...(i % 2 === 0 ?
 ['console.warn("this is a markdown cell")'] :
 [
 'console.log("logging things")',
 'console.warn("this is a markdown cell")'
 ]
 ),
@Marc-Andre-RivetMarc-Andre-RivetMar 23, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

Changing the mock to have variable height Markdown rows
 '```'].join('\n'), rows)
 },
 {
Expand Down

4 changes: 2 additions & 2 deletions
src/dash-table/components/Cell/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -22,7 +22,7 @@ export default class Cell extends Component<ICellProps> {
 render() {
 const {
 attributes,
classes,
className,
 onClick,
 onDoubleClick,
 onMouseEnter,
Expand All@@ -35,7 +35,7 @@ export default class Cell extends Component<ICellProps> {
 ref='td'
 children={(this as any).props.children}
 tabIndex={-1}
 className={classes}
 className={className}
 onClick={onClick}
 onDoubleClick={onDoubleClick}
 onMouseEnter={onMouseEnter}
Expand Down

2 changes: 1 addition & 1 deletion
src/dash-table/components/Cell/props.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,7 +7,7 @@ interface IAttributes {
export interface ICellProps {
 active: boolean;
 attributes: IAttributes;
classes: string;
className: string;
 onClick: (e: MouseEvent) => void;
 onDoubleClick: (e: MouseEvent) => void;
 onMouseEnter: (e: MouseEvent) => void;
Expand Down

2 changes: 1 addition & 1 deletion
src/dash-table/components/CellDropdown/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -75,7 +75,7 @@ export default class CellDropdown extends PureComponent<IProps> {
 if (applyFocus && dropdown && document.activeElement !== dropdown) {
 // Limitation. If React >= 16 --> Use React.createRef instead to pass parent ref to child
 const tdParent = DOM.getFirstParentOfType(dropdown.wrapper, 'td');
 if (tdParent) {
 if (tdParent && tdParent.className.indexOf('phantom-cell') === -1) {
 tdParent.focus();
 }
 }
Expand Down

2 changes: 1 addition & 1 deletion
src/dash-table/components/CellMarkdown/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -62,7 +62,7 @@ export default class CellMarkdown extends PureComponent<IProps, {}> {
 if (applyFocus && el && document.activeElement !== el) {
 // Limitation. If React >= 16 --> Use React.createRef instead to pass parent ref to child
 const tdParent = DOM.getFirstParentOfType(el, 'td');
 if (tdParent) {
 if (tdParent && tdParent.className.indexOf('phantom-cell') !== -1) {
 tdParent.focus();
 }
 }
Expand Down

192 changes: 102 additions & 90 deletions
src/dash-table/components/ControlledTable/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -48,6 +48,9 @@ const INNER_STYLE = {
 minWidth: '100%'
};

const WIDTH_EPSILON = 0.5;
const MAX_WIDTH_ITERATIONS = 30;
@Marc-Andre-RivetMarc-Andre-RivetMar 23, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

30 is a very high number but most of the time it takes 2-6 iterations for the table's column width to settle.

export default class ControlledTable extends PureComponent<ControlledTableProps> {
 private readonly menuRef = React.createRef<HTMLDivElement>();
 private readonly stylesheet: Stylesheet = new Stylesheet(`#${this.props.id}`);
Expand DownExpand Up@@ -134,7 +137,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 setProps({ active_cell: selected_cells[0] });
 }

 this.applyStyle();
 this.updateUiViewport();
 this.handleResize();
 }

Expand All@@ -146,7 +149,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>

 componentDidUpdate() {
 this.updateStylesheet();
 this.applyStyle();
@Marc-Andre-RivetMarc-Andre-RivetMar 23, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

applyStyle is removed / replaced by new code to handle the fixed rows
 this.updateUiViewport();
 this.handleResize();
 this.handleDropdown();
 this.adjustTooltipPosition();
Expand DownExpand Up@@ -226,6 +229,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>

 handleResize = (force: boolean = false) => {
 const {
 fixed_columns,
 fixed_rows,
 forcedResizeOnly,
 setState
 } = this.props;
Expand All@@ -244,6 +249,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>

 const { r0c0, r0c1, r1c0, r1c1 } = this.refs as { [key: string]: HTMLElement };


 // Adjust [fixed columns/fixed rows combo] to fixed rows height
 let trs = r0c1.querySelectorAll('tr');
 Array.from(r0c0.querySelectorAll('tr')).forEach((tr, index) => {
Expand All@@ -261,12 +267,77 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 tr.style.height = getComputedStyle(tr2).height;
 });

 // Adjust fixed columns data to data height
 const contentTd = r1c1.querySelector('tr > td:first-of-type');
 if (contentTd) {
 const contentTr = contentTd.parentElement as HTMLElement;
 if (fixed_columns) {
 const r1c0Table = r1c0.querySelector('table') as HTMLElement;
 const r1c1Table = r1c0.querySelector('table') as HTMLElement;

 r1c0Table.style.width = getComputedStyle(r1c1Table).width;

 const lastVisibleTd = r1c0.querySelector(`tr:first-of-type > *:nth-of-type(${fixed_columns})`);

 let it = 0;
 let currentWidth = r1c0.getBoundingClientRect().width;
 let lastWidth = currentWidth;

 do {
 lastWidth = currentWidth

 // Force first column containers width to match visible portion of table
 if (lastVisibleTd) {
 const r1c0FragmentBounds = r1c0.getBoundingClientRect();
 const lastTdBounds = lastVisibleTd.getBoundingClientRect();
 currentWidth = lastTdBounds.right - r1c0FragmentBounds.left;

 const width = `${currentWidth}px`;

 r0c0.style.width = width;
 r1c0.style.width = width;
 }

 // Force second column containers width to match visible portion of table
 const firstVisibleTd = r1c1.querySelector(`tr:first-of-type > *:nth-of-type(${fixed_columns + 1})`);
 if (firstVisibleTd) {
 const r1c1FragmentBounds = r1c1.getBoundingClientRect();
 const firstTdBounds = firstVisibleTd.getBoundingClientRect();

 const width = firstTdBounds.left - r1c1FragmentBounds.left;
 r0c1.style.marginLeft = `-${width}px`;
 r0c1.style.marginRight = `${width}px`;
 r1c1.style.marginLeft = `-${width}px`;
 r1c1.style.marginRight = `${width}px`;
 }

 this.stylesheet.setRule('.dash-fixed-column tr', `height: ${getComputedStyle(contentTr).height};`);
 it++;
 } while (
 Math.abs(currentWidth - lastWidth) > WIDTH_EPSILON ||
 it < MAX_WIDTH_ITERATIONS
 )
 }

 if (fixed_columns || fixed_rows) {
 const r1c0CellWidths = Array.from(
 r1c0.querySelectorAll('table.cell-table > tbody > tr:first-of-type > *')
 ).map(c => c.getBoundingClientRect().width);

 const r1c1CellWidths = Array.from(
 r1c1.querySelectorAll('table.cell-table > tbody > tr:first-of-type > *')
 ).map(c => c.getBoundingClientRect().width);

 Array.from<HTMLElement>(
 r0c0.querySelectorAll('table.cell-table > tbody > tr:first-of-type > *')
 ).forEach((c, i) => this.setCellWidth(c, r1c0CellWidths[i]));

 Array.from<HTMLElement>(
 r0c0.querySelectorAll('table.cell-table > tbody > tr:last-of-type > *')
 ).forEach((c, i) => this.setCellWidth(c, r1c0CellWidths[i]));

 Array.from<HTMLElement>(
 r0c1.querySelectorAll('table.cell-table > tbody > tr:first-of-type > *')
 ).forEach((c, i) => this.setCellWidth(c, r1c1CellWidths[i]));

 Array.from<HTMLElement>(
 r0c1.querySelectorAll('table.cell-table > tbody > tr:last-of-type > *')
 ).forEach((c, i) => this.setCellWidth(c, r1c1CellWidths[i]));
@Marc-Andre-RivetMarc-Andre-RivetApr 4, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

All this replaces and adds to the previous applyStyle method
 }
 }

Expand DownExpand Up@@ -627,98 +698,20 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 ) || page_action === TableAction.Custom;
 }

 applyStyle = () => {
 const {
 fixed_columns,
 fixed_rows,
 row_deletable,
 row_selectable
 } = this.props;

 const { r1c0, r1c1 } = this.refs as { [key: string]: HTMLElement };

 this.updateUiViewport();

 if (row_deletable) {
 this.stylesheet.setRule(
 `.dash-spreadsheet-inner td.dash-delete-cell`,
 `width: 30px; max-width: 30px; min-width: 30px;`
 );
 }

 if (row_selectable) {
 this.stylesheet.setRule(
 `.dash-spreadsheet-inner td.dash-select-cell`,
 `width: 30px; max-width: 30px; min-width: 30px;`
 );
 }

 // Adjust the width of the fixed row header
 if (fixed_rows) {
 Array.from(r1c1.querySelectorAll('tr:first-of-type td.dash-cell, tr:first-of-type th.dash-header')).forEach(td => {
 const classname = td.className.split(' ')[1];
 const style = getComputedStyle(td);
 const width = style.width;

 this.stylesheet.setRule(
 `.dash-fixed-row:not(.dash-fixed-column) th.${classname}`,
 `width: ${width} !important; min-width: ${width} !important; max-width: ${width} !important;`
 );
 });
 }

 // Adjust the width of the fixed row / fixed columns header
 if (fixed_columns && fixed_rows) {
 Array.from(r1c0.querySelectorAll('tr:first-of-type td.dash-cell, tr:first-of-type th.dash-header')).forEach(td => {
 const classname = td.className.split(' ')[1];
 const style = getComputedStyle(td);
 const width = style.width;

 this.stylesheet.setRule(
 `.dash-fixed-column.dash-fixed-row th.${classname}`,
 `width: ${width} !important; min-width: ${width} !important; max-width: ${width} !important;`
 );
 });
 }

 // Adjust widths of row deletable/row selectable headers
 const subTable = fixed_rows && !fixed_columns ? r1c1 : r1c0;

 if (row_deletable) {
 Array.from(subTable.querySelectorAll('tr:first-of-type td.dash-delete-cell')).forEach(td => {
 const style = getComputedStyle(td);
 const width = style.width;

 this.stylesheet.setRule(
 'th.dash-delete-header',
 `width: ${width} !important; min-width: ${width} !important; max-width: ${width} !important;`
 );
 });
 }
 if (row_selectable) {
 Array.from(subTable.querySelectorAll('tr:first-of-type td.dash-select-cell')).forEach(td => {
 const style = getComputedStyle(td);
 const width = style.width;

 this.stylesheet.setRule(
 'th.dash-select-header',
 `width: ${width} !important; min-width: ${width} !important; max-width: ${width} !important;`
 );
 });
 }
 }

 handleDropdown = () => {
 const { r1c1 } = this.refs as { [key: string]: HTMLElement };

 dropdownHelper(r1c1.querySelector('.Select-menu-outer'));
 }

 onScroll = (ev: any) => {
 const { r0c1 } = this.refs as { [key: string]: HTMLElement };
 const { r0c0, r0c1 } = this.refs as { [key: string]: HTMLElement };

 Logger.trace(`ControlledTable fragment scrolled to (left,top)=(${ev.target.scrollLeft},${ev.target.scrollTop})`);
 r0c1.style.marginLeft = `${-ev.target.scrollLeft}px`;

 const margin = parseFloat(ev.target.scrollLeft) + parseFloat(r0c0.style.width);

 r0c1.style.marginLeft = `${-margin}px`;

 this.updateUiViewport();
 this.handleDropdown();
Expand DownExpand Up@@ -952,6 +945,25 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 }
 }

 private setCellWidth(cell: HTMLElement, width: number) {
 cell.style.width = `${width}px`;
 cell.style.minWidth = `${width}px`;
 cell.style.maxWidth = `${width}px`;
 cell.style.boxSizing = 'border-box';

 /**
 * Some browsers handle `th` and `td` size inconsistently.
 * Checking the size delta and adjusting for it (different handling of padding and borders)
 * allows the table to make sure all sections are correctly aligned.
 */
 const delta = cell.getBoundingClientRect().width - width;
 if (delta) {
 cell.style.width = `${width - delta}px`;
 cell.style.minWidth = `${width - delta}px`;
 cell.style.maxWidth = `${width - delta}px`;
 }
 }

 private get showToggleColumns(): boolean {
 const {
 columns,
Expand Down

6 changes: 3 additions & 3 deletions
src/dash-table/components/Filter/Column.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -8,7 +8,7 @@ import TableClipboardHelper from 'dash-table/utils/TableClipboardHelper';
type SetFilter = (ev: any) => void;

interface IColumnFilterProps {
classes: string;
className: string;
 columnId: ColumnId;
 isValid: boolean;
 setFilter: SetFilter;
Expand DownExpand Up@@ -39,15 +39,15 @@ export default class ColumnFilter extends PureComponent<IColumnFilterProps, ISta

 render() {
 const {
classes,
className,
 columnId,
 isValid,
 style,
 value
 } = this.props;

 return (<th
 className={classes + (isValid ? '' : ' invalid')}
 className={className + (isValid ? '' : ' invalid')}
@Marc-Andre-RivetMarc-Andre-RivetMar 23, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

Standardizing prop name across all components simplifies manipulation elsewhere.
 data-dash-column={columnId}
 style={style}
 >
Expand Down

2 changes: 1 addition & 1 deletion
src/dash-table/components/FilterFactory.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -50,7 +50,7 @@ export default class FilterFactory {

 return (<ColumnFilter
 key={`column-${index}`}
classes={`dash-filter column-${index}`}
className={`dash-filter column-${index}`}
 columnId={column.id}
 isValid={!ast || ast.isValid}
 setFilter={this.onChange.bind(this, column, map, setFilter)}
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content

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

Issue 649 - Fix mismatched row height for fixed columns#722
 Merged

Marc-Andre-Rivet
merged 50 commits into

from

Apr 14, 2020
 Merged


Issue 649 - Fix mismatched row height for fixed columns
#722
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


50 commits


Select commit
Hold shift + click to select a range
a58d4eb

Add phantom cells to fixed/unfixed table fragments

Mar 17, 2020
329f357

Update tests to ignore phantom cells

Mar 17, 2020
ddf6079

update cell-x-x styling

Mar 17, 2020
a7bacbe

fix helper (last row cell selector)

Mar 17, 2020
02a851e

Remove problematic content from phantom cells

Mar 17, 2020
bdb8366

Update tests and helpers

Mar 19, 2020
30f6aaa

Fix table styling/size and cell alignment

Mar 19, 2020
c059545

Tweak Markdown percy tests

Mar 20, 2020
ca4ffb2

Table rendering and fragments alignment/sizing through iterative styling

Mar 20, 2020
7faf779

changelog

Mar 24, 2020
7b465c7

update tests

Mar 24, 2020
6f68a9d

Make table non-clickable while keeping td/th clickable

Mar 25, 2020
06f6062

Add visual tests for table with text wrapping (will fail)

Mar 27, 2020
31d3f8b

Make sure the fixed/unfixed tables are the same size for all scenarios

Mar 27, 2020
1a821fe

Prevent CellInput fragment components from attempting to gain keyboar…

Mar 27, 2020
caee5e2

Merge remote-tracking branch 'origin/dev' into 649-mismatched-row-hei…

Mar 27, 2020
c8a1ae1

undo CellInput / focus change

Mar 27, 2020
4928631

redo

Mar 27, 2020
907bca1

CellInput check before props check

Mar 27, 2020
83882f1

lint fix

Mar 27, 2020
9d6fb35

invert

Mar 27, 2020
31ac90a

re-undo

Mar 27, 2020
717bb09

generalize phantom-cell border override

Apr 3, 2020
3dd7b2d

Merge branch 'dev' into 649-mismatched-row-heights


Marc-Andre-Rivet Apr 3, 2020
61eb050

always hide borders for phantom cells, not just when there are fixed …

Apr 3, 2020
a5845ba

Merge branch '649-mismatched-row-heights' of github.com:plotly/dash-t…

Apr 3, 2020
b809fe1

height -> min-height

Apr 3, 2020
8d18401

firefox behaves incorrectly when height is set on td

Apr 3, 2020
78f8fd0

ff: both min-height and height

Apr 3, 2020
15327a4

clean up styling of phantom cells

Apr 3, 2020
621d66b

keep phantom cell right border in cell-0-1 and cell-1-1

Apr 3, 2020
f131359

force type

Apr 3, 2020
b9967ec

ignore phantom-cell

Apr 3, 2020
8523a76

not a phantom cell

Apr 3, 2020
988ae85

undo

Apr 3, 2020
37c5692

move markdown keyboard navigation tests to selenium

Apr 3, 2020
26e6908

beforeEach..

Apr 3, 2020
144a616

additional md visual tests with fixed rows/columns/both

Apr 3, 2020
5b5ca8c

add a row to md "table" visual test

Apr 3, 2020
f0bf0ea

only restyle the cell's table

Apr 3, 2020
f0d72aa

fixed w/ deletable

Apr 3, 2020
75bd7e6

row_deletable

Apr 3, 2020
9c043bd

Comment for cell width delta handling

Apr 4, 2020
104ff53

Update CHANGELOG.md


Marc-Andre-Rivet Apr 7, 2020
33db6f3

Fix Ramda usage

Apr 14, 2020
034db51

Merge branch '649-mismatched-row-heights' of github.com:plotly/dash-t…

Apr 14, 2020
3d0b8c8

refactor duplicated code block

Apr 14, 2020
59ff242

fix typing

Apr 14, 2020
207c90a

clean up exit condition for table fragments sizing

Apr 14, 2020
99136c4

fixed_rows horizontal alignment on scroll

Apr 14, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 1 addition & 1 deletion
.circleci/config.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@ version: 2
jobs:
 "server-test":
 docker:
 - image: circleci/python:3.7.5-node-browsers
 - image: circleci/python:3.7-node-browsers
 - image: cypress/base:10

 steps:
Expand Down

4 changes: 4 additions & 0 deletions
CHANGELOG.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,6 +2,10 @@
All notable changes to this project will be documented in this file.
This project adheres to [Semantic Versioning](http://semver.org/).

## [Unreleased]
### Fixed
- [#722](https://github.com/plotly/dash-table/pull/722) Fix a bug where row height is misaligned when using fixed_columns and/or fixed_rows

## [4.6.2] - 2020-04-01
### Changed
- [#713](https://github.com/plotly/dash-table/pull/713) Update from React 16.8.6 to 16.13.0
Expand Down

10 changes: 8 additions & 2 deletions
demo/data.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -176,9 +176,15 @@ export const generateMixedMarkdownMockData = (rows: number) => unpackIntoColumns
 name: ['Markdown'],
 type: ColumnType.Text,
 presentation: 'markdown',
 data: gendata(_ => [
 data: gendata(i => [
 '```javascript',
 'console.warn("this is a markdown cell")',
 ...(i % 2 === 0 ?
 ['console.warn("this is a markdown cell")'] :
 [
 'console.log("logging things")',
 'console.warn("this is a markdown cell")'
 ]
 ),
@Marc-Andre-RivetMarc-Andre-RivetMar 23, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

Changing the mock to have variable height Markdown rows
 '```'].join('\n'), rows)
 },
 {
Expand Down

4 changes: 2 additions & 2 deletions
src/dash-table/components/Cell/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -22,7 +22,7 @@ export default class Cell extends Component<ICellProps> {
 render() {
 const {
 attributes,
classes,
className,
 onClick,
 onDoubleClick,
 onMouseEnter,
Expand All@@ -35,7 +35,7 @@ export default class Cell extends Component<ICellProps> {
 ref='td'
 children={(this as any).props.children}
 tabIndex={-1}
 className={classes}
 className={className}
 onClick={onClick}
 onDoubleClick={onDoubleClick}
 onMouseEnter={onMouseEnter}
Expand Down

2 changes: 1 addition & 1 deletion
src/dash-table/components/Cell/props.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,7 +7,7 @@ interface IAttributes {
export interface ICellProps {
 active: boolean;
 attributes: IAttributes;
classes: string;
className: string;
 onClick: (e: MouseEvent) => void;
 onDoubleClick: (e: MouseEvent) => void;
 onMouseEnter: (e: MouseEvent) => void;
Expand Down

2 changes: 1 addition & 1 deletion
src/dash-table/components/CellDropdown/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -75,7 +75,7 @@ export default class CellDropdown extends PureComponent<IProps> {
 if (applyFocus && dropdown && document.activeElement !== dropdown) {
 // Limitation. If React >= 16 --> Use React.createRef instead to pass parent ref to child
 const tdParent = DOM.getFirstParentOfType(dropdown.wrapper, 'td');
 if (tdParent) {
 if (tdParent && tdParent.className.indexOf('phantom-cell') === -1) {
 tdParent.focus();
 }
 }
Expand Down

2 changes: 1 addition & 1 deletion
src/dash-table/components/CellMarkdown/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -62,7 +62,7 @@ export default class CellMarkdown extends PureComponent<IProps, {}> {
 if (applyFocus && el && document.activeElement !== el) {
 // Limitation. If React >= 16 --> Use React.createRef instead to pass parent ref to child
 const tdParent = DOM.getFirstParentOfType(el, 'td');
 if (tdParent) {
 if (tdParent && tdParent.className.indexOf('phantom-cell') !== -1) {
 tdParent.focus();
 }
 }
Expand Down

192 changes: 102 additions & 90 deletions
src/dash-table/components/ControlledTable/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -48,6 +48,9 @@ const INNER_STYLE = {
 minWidth: '100%'
};

const WIDTH_EPSILON = 0.5;
const MAX_WIDTH_ITERATIONS = 30;
@Marc-Andre-RivetMarc-Andre-RivetMar 23, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

30 is a very high number but most of the time it takes 2-6 iterations for the table's column width to settle.

export default class ControlledTable extends PureComponent<ControlledTableProps> {
 private readonly menuRef = React.createRef<HTMLDivElement>();
 private readonly stylesheet: Stylesheet = new Stylesheet(`#${this.props.id}`);
Expand DownExpand Up@@ -134,7 +137,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 setProps({ active_cell: selected_cells[0] });
 }

 this.applyStyle();
 this.updateUiViewport();
 this.handleResize();
 }

Expand All@@ -146,7 +149,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>

 componentDidUpdate() {
 this.updateStylesheet();
 this.applyStyle();
@Marc-Andre-RivetMarc-Andre-RivetMar 23, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

applyStyle is removed / replaced by new code to handle the fixed rows
 this.updateUiViewport();
 this.handleResize();
 this.handleDropdown();
 this.adjustTooltipPosition();
Expand DownExpand Up@@ -226,6 +229,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>

 handleResize = (force: boolean = false) => {
 const {
 fixed_columns,
 fixed_rows,
 forcedResizeOnly,
 setState
 } = this.props;
Expand All@@ -244,6 +249,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>

 const { r0c0, r0c1, r1c0, r1c1 } = this.refs as { [key: string]: HTMLElement };


 // Adjust [fixed columns/fixed rows combo] to fixed rows height
 let trs = r0c1.querySelectorAll('tr');
 Array.from(r0c0.querySelectorAll('tr')).forEach((tr, index) => {
Expand All@@ -261,12 +267,77 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 tr.style.height = getComputedStyle(tr2).height;
 });

 // Adjust fixed columns data to data height
 const contentTd = r1c1.querySelector('tr > td:first-of-type');
 if (contentTd) {
 const contentTr = contentTd.parentElement as HTMLElement;
 if (fixed_columns) {
 const r1c0Table = r1c0.querySelector('table') as HTMLElement;
 const r1c1Table = r1c0.querySelector('table') as HTMLElement;

 r1c0Table.style.width = getComputedStyle(r1c1Table).width;

 const lastVisibleTd = r1c0.querySelector(`tr:first-of-type > *:nth-of-type(${fixed_columns})`);

 let it = 0;
 let currentWidth = r1c0.getBoundingClientRect().width;
 let lastWidth = currentWidth;

 do {
 lastWidth = currentWidth

 // Force first column containers width to match visible portion of table
 if (lastVisibleTd) {
 const r1c0FragmentBounds = r1c0.getBoundingClientRect();
 const lastTdBounds = lastVisibleTd.getBoundingClientRect();
 currentWidth = lastTdBounds.right - r1c0FragmentBounds.left;

 const width = `${currentWidth}px`;

 r0c0.style.width = width;
 r1c0.style.width = width;
 }

 // Force second column containers width to match visible portion of table
 const firstVisibleTd = r1c1.querySelector(`tr:first-of-type > *:nth-of-type(${fixed_columns + 1})`);
 if (firstVisibleTd) {
 const r1c1FragmentBounds = r1c1.getBoundingClientRect();
 const firstTdBounds = firstVisibleTd.getBoundingClientRect();

 const width = firstTdBounds.left - r1c1FragmentBounds.left;
 r0c1.style.marginLeft = `-${width}px`;
 r0c1.style.marginRight = `${width}px`;
 r1c1.style.marginLeft = `-${width}px`;
 r1c1.style.marginRight = `${width}px`;
 }

 this.stylesheet.setRule('.dash-fixed-column tr', `height: ${getComputedStyle(contentTr).height};`);
 it++;
 } while (
 Math.abs(currentWidth - lastWidth) > WIDTH_EPSILON ||
 it < MAX_WIDTH_ITERATIONS
 )
 }

 if (fixed_columns || fixed_rows) {
 const r1c0CellWidths = Array.from(
 r1c0.querySelectorAll('table.cell-table > tbody > tr:first-of-type > *')
 ).map(c => c.getBoundingClientRect().width);

 const r1c1CellWidths = Array.from(
 r1c1.querySelectorAll('table.cell-table > tbody > tr:first-of-type > *')
 ).map(c => c.getBoundingClientRect().width);

 Array.from<HTMLElement>(
 r0c0.querySelectorAll('table.cell-table > tbody > tr:first-of-type > *')
 ).forEach((c, i) => this.setCellWidth(c, r1c0CellWidths[i]));

 Array.from<HTMLElement>(
 r0c0.querySelectorAll('table.cell-table > tbody > tr:last-of-type > *')
 ).forEach((c, i) => this.setCellWidth(c, r1c0CellWidths[i]));

 Array.from<HTMLElement>(
 r0c1.querySelectorAll('table.cell-table > tbody > tr:first-of-type > *')
 ).forEach((c, i) => this.setCellWidth(c, r1c1CellWidths[i]));

 Array.from<HTMLElement>(
 r0c1.querySelectorAll('table.cell-table > tbody > tr:last-of-type > *')
 ).forEach((c, i) => this.setCellWidth(c, r1c1CellWidths[i]));
@Marc-Andre-RivetMarc-Andre-RivetApr 4, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

All this replaces and adds to the previous applyStyle method
 }
 }

Expand DownExpand Up@@ -627,98 +698,20 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 ) || page_action === TableAction.Custom;
 }

 applyStyle = () => {
 const {
 fixed_columns,
 fixed_rows,
 row_deletable,
 row_selectable
 } = this.props;

 const { r1c0, r1c1 } = this.refs as { [key: string]: HTMLElement };

 this.updateUiViewport();

 if (row_deletable) {
 this.stylesheet.setRule(
 `.dash-spreadsheet-inner td.dash-delete-cell`,
 `width: 30px; max-width: 30px; min-width: 30px;`
 );
 }

 if (row_selectable) {
 this.stylesheet.setRule(
 `.dash-spreadsheet-inner td.dash-select-cell`,
 `width: 30px; max-width: 30px; min-width: 30px;`
 );
 }

 // Adjust the width of the fixed row header
 if (fixed_rows) {
 Array.from(r1c1.querySelectorAll('tr:first-of-type td.dash-cell, tr:first-of-type th.dash-header')).forEach(td => {
 const classname = td.className.split(' ')[1];
 const style = getComputedStyle(td);
 const width = style.width;

 this.stylesheet.setRule(
 `.dash-fixed-row:not(.dash-fixed-column) th.${classname}`,
 `width: ${width} !important; min-width: ${width} !important; max-width: ${width} !important;`
 );
 });
 }

 // Adjust the width of the fixed row / fixed columns header
 if (fixed_columns && fixed_rows) {
 Array.from(r1c0.querySelectorAll('tr:first-of-type td.dash-cell, tr:first-of-type th.dash-header')).forEach(td => {
 const classname = td.className.split(' ')[1];
 const style = getComputedStyle(td);
 const width = style.width;

 this.stylesheet.setRule(
 `.dash-fixed-column.dash-fixed-row th.${classname}`,
 `width: ${width} !important; min-width: ${width} !important; max-width: ${width} !important;`
 );
 });
 }

 // Adjust widths of row deletable/row selectable headers
 const subTable = fixed_rows && !fixed_columns ? r1c1 : r1c0;

 if (row_deletable) {
 Array.from(subTable.querySelectorAll('tr:first-of-type td.dash-delete-cell')).forEach(td => {
 const style = getComputedStyle(td);
 const width = style.width;

 this.stylesheet.setRule(
 'th.dash-delete-header',
 `width: ${width} !important; min-width: ${width} !important; max-width: ${width} !important;`
 );
 });
 }
 if (row_selectable) {
 Array.from(subTable.querySelectorAll('tr:first-of-type td.dash-select-cell')).forEach(td => {
 const style = getComputedStyle(td);
 const width = style.width;

 this.stylesheet.setRule(
 'th.dash-select-header',
 `width: ${width} !important; min-width: ${width} !important; max-width: ${width} !important;`
 );
 });
 }
 }

 handleDropdown = () => {
 const { r1c1 } = this.refs as { [key: string]: HTMLElement };

 dropdownHelper(r1c1.querySelector('.Select-menu-outer'));
 }

 onScroll = (ev: any) => {
 const { r0c1 } = this.refs as { [key: string]: HTMLElement };
 const { r0c0, r0c1 } = this.refs as { [key: string]: HTMLElement };

 Logger.trace(`ControlledTable fragment scrolled to (left,top)=(${ev.target.scrollLeft},${ev.target.scrollTop})`);
 r0c1.style.marginLeft = `${-ev.target.scrollLeft}px`;

 const margin = parseFloat(ev.target.scrollLeft) + parseFloat(r0c0.style.width);

 r0c1.style.marginLeft = `${-margin}px`;

 this.updateUiViewport();
 this.handleDropdown();
Expand DownExpand Up@@ -952,6 +945,25 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 }
 }

 private setCellWidth(cell: HTMLElement, width: number) {
 cell.style.width = `${width}px`;
 cell.style.minWidth = `${width}px`;
 cell.style.maxWidth = `${width}px`;
 cell.style.boxSizing = 'border-box';

 /**
 * Some browsers handle `th` and `td` size inconsistently.
 * Checking the size delta and adjusting for it (different handling of padding and borders)
 * allows the table to make sure all sections are correctly aligned.
 */
 const delta = cell.getBoundingClientRect().width - width;
 if (delta) {
 cell.style.width = `${width - delta}px`;
 cell.style.minWidth = `${width - delta}px`;
 cell.style.maxWidth = `${width - delta}px`;
 }
 }

 private get showToggleColumns(): boolean {
 const {
 columns,
Expand Down

6 changes: 3 additions & 3 deletions
src/dash-table/components/Filter/Column.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -8,7 +8,7 @@ import TableClipboardHelper from 'dash-table/utils/TableClipboardHelper';
type SetFilter = (ev: any) => void;

interface IColumnFilterProps {
classes: string;
className: string;
 columnId: ColumnId;
 isValid: boolean;
 setFilter: SetFilter;
Expand DownExpand Up@@ -39,15 +39,15 @@ export default class ColumnFilter extends PureComponent<IColumnFilterProps, ISta

 render() {
 const {
classes,
className,
 columnId,
 isValid,
 style,
 value
 } = this.props;

 return (<th
 className={classes + (isValid ? '' : ' invalid')}
 className={className + (isValid ? '' : ' invalid')}
@Marc-Andre-RivetMarc-Andre-RivetMar 23, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

Standardizing prop name across all components simplifies manipulation elsewhere.
 data-dash-column={columnId}
 style={style}
 >
Expand Down

2 changes: 1 addition & 1 deletion
src/dash-table/components/FilterFactory.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -50,7 +50,7 @@ export default class FilterFactory {

 return (<ColumnFilter
 key={`column-${index}`}
classes={`dash-filter column-${index}`}
className={`dash-filter column-${index}`}
 columnId={column.id}
 isValid={!ast || ast.isValid}
 setFilter={this.onChange.bind(this, column, map, setFilter)}
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content

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

Issue 649 - Fix mismatched row height for fixed columns#722
 Merged

Marc-Andre-Rivet
merged 50 commits into

from

Apr 14, 2020
 Merged


Issue 649 - Fix mismatched row height for fixed columns
#722
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


50 commits


Select commit
Hold shift + click to select a range
a58d4eb

Add phantom cells to fixed/unfixed table fragments

Mar 17, 2020
329f357

Update tests to ignore phantom cells

Mar 17, 2020
ddf6079

update cell-x-x styling

Mar 17, 2020
a7bacbe

fix helper (last row cell selector)

Mar 17, 2020
02a851e

Remove problematic content from phantom cells

Mar 17, 2020
bdb8366

Update tests and helpers

Mar 19, 2020
30f6aaa

Fix table styling/size and cell alignment

Mar 19, 2020
c059545

Tweak Markdown percy tests

Mar 20, 2020
ca4ffb2

Table rendering and fragments alignment/sizing through iterative styling

Mar 20, 2020
7faf779

changelog

Mar 24, 2020
7b465c7

update tests

Mar 24, 2020
6f68a9d

Make table non-clickable while keeping td/th clickable

Mar 25, 2020
06f6062

Add visual tests for table with text wrapping (will fail)

Mar 27, 2020
31d3f8b

Make sure the fixed/unfixed tables are the same size for all scenarios

Mar 27, 2020
1a821fe

Prevent CellInput fragment components from attempting to gain keyboar…

Mar 27, 2020
caee5e2

Merge remote-tracking branch 'origin/dev' into 649-mismatched-row-hei…

Mar 27, 2020
c8a1ae1

undo CellInput / focus change

Mar 27, 2020
4928631

redo

Mar 27, 2020
907bca1

CellInput check before props check

Mar 27, 2020
83882f1

lint fix

Mar 27, 2020
9d6fb35

invert

Mar 27, 2020
31ac90a

re-undo

Mar 27, 2020
717bb09

generalize phantom-cell border override

Apr 3, 2020
3dd7b2d

Merge branch 'dev' into 649-mismatched-row-heights


Marc-Andre-Rivet Apr 3, 2020
61eb050

always hide borders for phantom cells, not just when there are fixed …

Apr 3, 2020
a5845ba

Merge branch '649-mismatched-row-heights' of github.com:plotly/dash-t…

Apr 3, 2020
b809fe1

height -> min-height

Apr 3, 2020
8d18401

firefox behaves incorrectly when height is set on td

Apr 3, 2020
78f8fd0

ff: both min-height and height

Apr 3, 2020
15327a4

clean up styling of phantom cells

Apr 3, 2020
621d66b

keep phantom cell right border in cell-0-1 and cell-1-1

Apr 3, 2020
f131359

force type

Apr 3, 2020
b9967ec

ignore phantom-cell

Apr 3, 2020
8523a76

not a phantom cell

Apr 3, 2020
988ae85

undo

Apr 3, 2020
37c5692

move markdown keyboard navigation tests to selenium

Apr 3, 2020
26e6908

beforeEach..

Apr 3, 2020
144a616

additional md visual tests with fixed rows/columns/both

Apr 3, 2020
5b5ca8c

add a row to md "table" visual test

Apr 3, 2020
f0bf0ea

only restyle the cell's table

Apr 3, 2020
f0d72aa

fixed w/ deletable

Apr 3, 2020
75bd7e6

row_deletable

Apr 3, 2020
9c043bd

Comment for cell width delta handling

Apr 4, 2020
104ff53

Update CHANGELOG.md


Marc-Andre-Rivet Apr 7, 2020
33db6f3

Fix Ramda usage

Apr 14, 2020
034db51

Merge branch '649-mismatched-row-heights' of github.com:plotly/dash-t…

Apr 14, 2020
3d0b8c8

refactor duplicated code block

Apr 14, 2020
59ff242

fix typing

Apr 14, 2020
207c90a

clean up exit condition for table fragments sizing

Apr 14, 2020
99136c4

fixed_rows horizontal alignment on scroll

Apr 14, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 1 addition & 1 deletion
.circleci/config.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@ version: 2
jobs:
 "server-test":
 docker:
 - image: circleci/python:3.7.5-node-browsers
 - image: circleci/python:3.7-node-browsers
 - image: cypress/base:10

 steps:
Expand Down

4 changes: 4 additions & 0 deletions
CHANGELOG.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,6 +2,10 @@
All notable changes to this project will be documented in this file.
This project adheres to [Semantic Versioning](http://semver.org/).

## [Unreleased]
### Fixed
- [#722](https://github.com/plotly/dash-table/pull/722) Fix a bug where row height is misaligned when using fixed_columns and/or fixed_rows

## [4.6.2] - 2020-04-01
### Changed
- [#713](https://github.com/plotly/dash-table/pull/713) Update from React 16.8.6 to 16.13.0
Expand Down

10 changes: 8 additions & 2 deletions
demo/data.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -176,9 +176,15 @@ export const generateMixedMarkdownMockData = (rows: number) => unpackIntoColumns
 name: ['Markdown'],
 type: ColumnType.Text,
 presentation: 'markdown',
 data: gendata(_ => [
 data: gendata(i => [
 '```javascript',
 'console.warn("this is a markdown cell")',
 ...(i % 2 === 0 ?
 ['console.warn("this is a markdown cell")'] :
 [
 'console.log("logging things")',
 'console.warn("this is a markdown cell")'
 ]
 ),
@Marc-Andre-RivetMarc-Andre-RivetMar 23, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

Changing the mock to have variable height Markdown rows
 '```'].join('\n'), rows)
 },
 {
Expand Down

4 changes: 2 additions & 2 deletions
src/dash-table/components/Cell/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -22,7 +22,7 @@ export default class Cell extends Component<ICellProps> {
 render() {
 const {
 attributes,
classes,
className,
 onClick,
 onDoubleClick,
 onMouseEnter,
Expand All@@ -35,7 +35,7 @@ export default class Cell extends Component<ICellProps> {
 ref='td'
 children={(this as any).props.children}
 tabIndex={-1}
 className={classes}
 className={className}
 onClick={onClick}
 onDoubleClick={onDoubleClick}
 onMouseEnter={onMouseEnter}
Expand Down

2 changes: 1 addition & 1 deletion
src/dash-table/components/Cell/props.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,7 +7,7 @@ interface IAttributes {
export interface ICellProps {
 active: boolean;
 attributes: IAttributes;
classes: string;
className: string;
 onClick: (e: MouseEvent) => void;
 onDoubleClick: (e: MouseEvent) => void;
 onMouseEnter: (e: MouseEvent) => void;
Expand Down

2 changes: 1 addition & 1 deletion
src/dash-table/components/CellDropdown/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -75,7 +75,7 @@ export default class CellDropdown extends PureComponent<IProps> {
 if (applyFocus && dropdown && document.activeElement !== dropdown) {
 // Limitation. If React >= 16 --> Use React.createRef instead to pass parent ref to child
 const tdParent = DOM.getFirstParentOfType(dropdown.wrapper, 'td');
 if (tdParent) {
 if (tdParent && tdParent.className.indexOf('phantom-cell') === -1) {
 tdParent.focus();
 }
 }
Expand Down

2 changes: 1 addition & 1 deletion
src/dash-table/components/CellMarkdown/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -62,7 +62,7 @@ export default class CellMarkdown extends PureComponent<IProps, {}> {
 if (applyFocus && el && document.activeElement !== el) {
 // Limitation. If React >= 16 --> Use React.createRef instead to pass parent ref to child
 const tdParent = DOM.getFirstParentOfType(el, 'td');
 if (tdParent) {
 if (tdParent && tdParent.className.indexOf('phantom-cell') !== -1) {
 tdParent.focus();
 }
 }
Expand Down

192 changes: 102 additions & 90 deletions
src/dash-table/components/ControlledTable/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -48,6 +48,9 @@ const INNER_STYLE = {
 minWidth: '100%'
};

const WIDTH_EPSILON = 0.5;
const MAX_WIDTH_ITERATIONS = 30;
@Marc-Andre-RivetMarc-Andre-RivetMar 23, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

30 is a very high number but most of the time it takes 2-6 iterations for the table's column width to settle.

export default class ControlledTable extends PureComponent<ControlledTableProps> {
 private readonly menuRef = React.createRef<HTMLDivElement>();
 private readonly stylesheet: Stylesheet = new Stylesheet(`#${this.props.id}`);
Expand DownExpand Up@@ -134,7 +137,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 setProps({ active_cell: selected_cells[0] });
 }

 this.applyStyle();
 this.updateUiViewport();
 this.handleResize();
 }

Expand All@@ -146,7 +149,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>

 componentDidUpdate() {
 this.updateStylesheet();
 this.applyStyle();
@Marc-Andre-RivetMarc-Andre-RivetMar 23, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

applyStyle is removed / replaced by new code to handle the fixed rows
 this.updateUiViewport();
 this.handleResize();
 this.handleDropdown();
 this.adjustTooltipPosition();
Expand DownExpand Up@@ -226,6 +229,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>

 handleResize = (force: boolean = false) => {
 const {
 fixed_columns,
 fixed_rows,
 forcedResizeOnly,
 setState
 } = this.props;
Expand All@@ -244,6 +249,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>

 const { r0c0, r0c1, r1c0, r1c1 } = this.refs as { [key: string]: HTMLElement };


 // Adjust [fixed columns/fixed rows combo] to fixed rows height
 let trs = r0c1.querySelectorAll('tr');
 Array.from(r0c0.querySelectorAll('tr')).forEach((tr, index) => {
Expand All@@ -261,12 +267,77 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 tr.style.height = getComputedStyle(tr2).height;
 });

 // Adjust fixed columns data to data height
 const contentTd = r1c1.querySelector('tr > td:first-of-type');
 if (contentTd) {
 const contentTr = contentTd.parentElement as HTMLElement;
 if (fixed_columns) {
 const r1c0Table = r1c0.querySelector('table') as HTMLElement;
 const r1c1Table = r1c0.querySelector('table') as HTMLElement;

 r1c0Table.style.width = getComputedStyle(r1c1Table).width;

 const lastVisibleTd = r1c0.querySelector(`tr:first-of-type > *:nth-of-type(${fixed_columns})`);

 let it = 0;
 let currentWidth = r1c0.getBoundingClientRect().width;
 let lastWidth = currentWidth;

 do {
 lastWidth = currentWidth

 // Force first column containers width to match visible portion of table
 if (lastVisibleTd) {
 const r1c0FragmentBounds = r1c0.getBoundingClientRect();
 const lastTdBounds = lastVisibleTd.getBoundingClientRect();
 currentWidth = lastTdBounds.right - r1c0FragmentBounds.left;

 const width = `${currentWidth}px`;

 r0c0.style.width = width;
 r1c0.style.width = width;
 }

 // Force second column containers width to match visible portion of table
 const firstVisibleTd = r1c1.querySelector(`tr:first-of-type > *:nth-of-type(${fixed_columns + 1})`);
 if (firstVisibleTd) {
 const r1c1FragmentBounds = r1c1.getBoundingClientRect();
 const firstTdBounds = firstVisibleTd.getBoundingClientRect();

 const width = firstTdBounds.left - r1c1FragmentBounds.left;
 r0c1.style.marginLeft = `-${width}px`;
 r0c1.style.marginRight = `${width}px`;
 r1c1.style.marginLeft = `-${width}px`;
 r1c1.style.marginRight = `${width}px`;
 }

 this.stylesheet.setRule('.dash-fixed-column tr', `height: ${getComputedStyle(contentTr).height};`);
 it++;
 } while (
 Math.abs(currentWidth - lastWidth) > WIDTH_EPSILON ||
 it < MAX_WIDTH_ITERATIONS
 )
 }

 if (fixed_columns || fixed_rows) {
 const r1c0CellWidths = Array.from(
 r1c0.querySelectorAll('table.cell-table > tbody > tr:first-of-type > *')
 ).map(c => c.getBoundingClientRect().width);

 const r1c1CellWidths = Array.from(
 r1c1.querySelectorAll('table.cell-table > tbody > tr:first-of-type > *')
 ).map(c => c.getBoundingClientRect().width);

 Array.from<HTMLElement>(
 r0c0.querySelectorAll('table.cell-table > tbody > tr:first-of-type > *')
 ).forEach((c, i) => this.setCellWidth(c, r1c0CellWidths[i]));

 Array.from<HTMLElement>(
 r0c0.querySelectorAll('table.cell-table > tbody > tr:last-of-type > *')
 ).forEach((c, i) => this.setCellWidth(c, r1c0CellWidths[i]));

 Array.from<HTMLElement>(
 r0c1.querySelectorAll('table.cell-table > tbody > tr:first-of-type > *')
 ).forEach((c, i) => this.setCellWidth(c, r1c1CellWidths[i]));

 Array.from<HTMLElement>(
 r0c1.querySelectorAll('table.cell-table > tbody > tr:last-of-type > *')
 ).forEach((c, i) => this.setCellWidth(c, r1c1CellWidths[i]));
@Marc-Andre-RivetMarc-Andre-RivetApr 4, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

All this replaces and adds to the previous applyStyle method
 }
 }

Expand DownExpand Up@@ -627,98 +698,20 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 ) || page_action === TableAction.Custom;
 }

 applyStyle = () => {
 const {
 fixed_columns,
 fixed_rows,
 row_deletable,
 row_selectable
 } = this.props;

 const { r1c0, r1c1 } = this.refs as { [key: string]: HTMLElement };

 this.updateUiViewport();

 if (row_deletable) {
 this.stylesheet.setRule(
 `.dash-spreadsheet-inner td.dash-delete-cell`,
 `width: 30px; max-width: 30px; min-width: 30px;`
 );
 }

 if (row_selectable) {
 this.stylesheet.setRule(
 `.dash-spreadsheet-inner td.dash-select-cell`,
 `width: 30px; max-width: 30px; min-width: 30px;`
 );
 }

 // Adjust the width of the fixed row header
 if (fixed_rows) {
 Array.from(r1c1.querySelectorAll('tr:first-of-type td.dash-cell, tr:first-of-type th.dash-header')).forEach(td => {
 const classname = td.className.split(' ')[1];
 const style = getComputedStyle(td);
 const width = style.width;

 this.stylesheet.setRule(
 `.dash-fixed-row:not(.dash-fixed-column) th.${classname}`,
 `width: ${width} !important; min-width: ${width} !important; max-width: ${width} !important;`
 );
 });
 }

 // Adjust the width of the fixed row / fixed columns header
 if (fixed_columns && fixed_rows) {
 Array.from(r1c0.querySelectorAll('tr:first-of-type td.dash-cell, tr:first-of-type th.dash-header')).forEach(td => {
 const classname = td.className.split(' ')[1];
 const style = getComputedStyle(td);
 const width = style.width;

 this.stylesheet.setRule(
 `.dash-fixed-column.dash-fixed-row th.${classname}`,
 `width: ${width} !important; min-width: ${width} !important; max-width: ${width} !important;`
 );
 });
 }

 // Adjust widths of row deletable/row selectable headers
 const subTable = fixed_rows && !fixed_columns ? r1c1 : r1c0;

 if (row_deletable) {
 Array.from(subTable.querySelectorAll('tr:first-of-type td.dash-delete-cell')).forEach(td => {
 const style = getComputedStyle(td);
 const width = style.width;

 this.stylesheet.setRule(
 'th.dash-delete-header',
 `width: ${width} !important; min-width: ${width} !important; max-width: ${width} !important;`
 );
 });
 }
 if (row_selectable) {
 Array.from(subTable.querySelectorAll('tr:first-of-type td.dash-select-cell')).forEach(td => {
 const style = getComputedStyle(td);
 const width = style.width;

 this.stylesheet.setRule(
 'th.dash-select-header',
 `width: ${width} !important; min-width: ${width} !important; max-width: ${width} !important;`
 );
 });
 }
 }

 handleDropdown = () => {
 const { r1c1 } = this.refs as { [key: string]: HTMLElement };

 dropdownHelper(r1c1.querySelector('.Select-menu-outer'));
 }

 onScroll = (ev: any) => {
 const { r0c1 } = this.refs as { [key: string]: HTMLElement };
 const { r0c0, r0c1 } = this.refs as { [key: string]: HTMLElement };

 Logger.trace(`ControlledTable fragment scrolled to (left,top)=(${ev.target.scrollLeft},${ev.target.scrollTop})`);
 r0c1.style.marginLeft = `${-ev.target.scrollLeft}px`;

 const margin = parseFloat(ev.target.scrollLeft) + parseFloat(r0c0.style.width);

 r0c1.style.marginLeft = `${-margin}px`;

 this.updateUiViewport();
 this.handleDropdown();
Expand DownExpand Up@@ -952,6 +945,25 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 }
 }

 private setCellWidth(cell: HTMLElement, width: number) {
 cell.style.width = `${width}px`;
 cell.style.minWidth = `${width}px`;
 cell.style.maxWidth = `${width}px`;
 cell.style.boxSizing = 'border-box';

 /**
 * Some browsers handle `th` and `td` size inconsistently.
 * Checking the size delta and adjusting for it (different handling of padding and borders)
 * allows the table to make sure all sections are correctly aligned.
 */
 const delta = cell.getBoundingClientRect().width - width;
 if (delta) {
 cell.style.width = `${width - delta}px`;
 cell.style.minWidth = `${width - delta}px`;
 cell.style.maxWidth = `${width - delta}px`;
 }
 }

 private get showToggleColumns(): boolean {
 const {
 columns,
Expand Down

6 changes: 3 additions & 3 deletions
src/dash-table/components/Filter/Column.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -8,7 +8,7 @@ import TableClipboardHelper from 'dash-table/utils/TableClipboardHelper';
type SetFilter = (ev: any) => void;

interface IColumnFilterProps {
classes: string;
className: string;
 columnId: ColumnId;
 isValid: boolean;
 setFilter: SetFilter;
Expand DownExpand Up@@ -39,15 +39,15 @@ export default class ColumnFilter extends PureComponent<IColumnFilterProps, ISta

 render() {
 const {
classes,
className,
 columnId,
 isValid,
 style,
 value
 } = this.props;

 return (<th
 className={classes + (isValid ? '' : ' invalid')}
 className={className + (isValid ? '' : ' invalid')}
@Marc-Andre-RivetMarc-Andre-RivetMar 23, 2020

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

Standardizing prop name across all components simplifies manipulation elsewhere.
 data-dash-column={columnId}
 style={style}
 >
Expand Down

2 changes: 1 addition & 1 deletion
src/dash-table/components/FilterFactory.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -50,7 +50,7 @@ export default class FilterFactory {

 return (<ColumnFilter
 key={`column-${index}`}
classes={`dash-filter column-${index}`}
className={`dash-filter column-${index}`}
 columnId={column.id}
 isValid={!ast || ast.isValid}
 setFilter={this.onChange.bind(this, column, map, setFilter)}
Expand Down
Loading