Table cell width not recalculating on vertical scroll until redraw #231
Description
Bug Report
Description:
When scrolling vertically, the table works correctly until a cell with a wider-than-normal width appears. At that point, the horizontal scrollbar fails to appear, preventing access to overflowing content.
Steps to Reproduce:
- Scroll down until the long TD appears
- Try to scroll to the right. The horizontal scrollbar is not available.
- Click on "Click to redraw" button (that calls the regular-table draw function)
- Now I can see the horizontal scrollbar and go to the last column
Example:
Expected Result:
The horizontal scrollbar should appear when a cell wider than the viewport is rendered, allowing users to scroll horizontally to view all content.
Actual Result:
Upon the appearance of a wider cell during vertical scrolling, the horizontal scrollbar is not displayed, until regular-table draw function is called.
Current approach:
I want to subscribe to the "scroll" event on the regular-table so that I can manually call the draw function. To prevent excessive function calls during rapid scrolling, I want to use a debounce mechanism.
Is this the correct approach, or should I not subscribe to the event at all?
Environment:
The issue occurs in both Firefox and Google Chrome.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/regular-table"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/regular-table/dist/css/material.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/regular-table/dist/css/sub-cell-scrolling.css"/>
</head>
<body>
<div style="width: 1200px;">
<div style="width: 100%; height: 500px; position: relative;">
<regular-table style="width: 100%; height: 400px;"></regular-table>
</div>
<button onclick="handleClick()">Click to redraw</button>
<h3>Steps to reproduce:</h3>
<ul>
<li>Scroll down until the long TD appears ⬇️</li>
<li>Try to scroll to the right ➡️. The horizontal scroll bar is not available. ❌👀</li>
<li>Click on "Click to redraw" button</li>
<li>Now I can see the horizontal scroll bar and go to the last column👀</li>
</ul>
</div>
<script>
function getRegularTable() {
return document.getElementsByTagName("regular-table")[0];
}
async function handleClick() {
const table = getRegularTable();
await table.draw();
}
const NUM_ROWS = 200;
const DATA_COLUMN_NAMES = ['position', 'normal-td-1', 'normal-td-2', 'long-td-in-row-100', 'normal-td-3', 'normal-td-4', 'normal-td-5', 'last-normal-td-6'];
function createPositionColumn() {
const column = [];
for (let i = 0; i < NUM_ROWS; i++) {
column.push(i + 1)
}
return column;
}
function createRegularColumn(text) {
const column = [];
for (let i = 0; i < NUM_ROWS; i++) {
column.push(text)
}
return column;
}
function createColumnWithOneLongString(text) {
const column = [];
for (let i = 0; i < NUM_ROWS; i++) {
if (i === 99) {
column.push('Very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong string');
continue;
}
column.push(text)
}
return column;
}
const DATA = [
createPositionColumn(),
createRegularColumn('Text'),
createColumnWithOneLongString('Some regular text to fill the TD'),
createRegularColumn('Regular text'),
createRegularColumn('Some regular text to fill the TD'),
createRegularColumn('Some regular text'),
createRegularColumn('Some text'),
createRegularColumn('short'),
]
function dataListener(x0, y0, x1, y1) {
if (x0 === 0 && y0 === 0 && x1 === 0 && y1 === 0) {
return {
num_rows: DATA[0].length,
num_columns: DATA_COLUMN_NAMES.length,
column_headers: DATA_COLUMN_NAMES.slice(x0, x1).map(x => [x])
};
}
return {
num_rows: DATA[0].length,
num_columns: DATA.length,
column_headers: DATA_COLUMN_NAMES.slice(x0, x1).map(x => [x]),
data: DATA.slice(x0, x1).map(col => col.slice(y0, y1))
};
}
window.addEventListener("load", () => {
const table = getRegularTable();
table.setDataListener(dataListener);
table.draw();
});
</script>
</body>
</html>