Jumpy scroll in a Dash DataTable

[Coding-with-Adam]

When scrolling the DataTable on a mobile phone, the DataTable is jumpy.

Issue first reported on Forum

The community member created this sample app to replicated the problem. They also shared the code for the app on GitHub.

[timofeymukha]

I'm the one, who reported the issue on the forum, feel free to ping if I can be of any help.

[timofeymukha]

Hello! Is there a chance someone will take a look at this in the foreseeable future :-)?

[alexcjohnson]

Thanks @timofeymukha - in fact I see jumpy scrolling in your onrender example even in a wide window, but it gets substantially worse as the window gets narrower.

It's going to be a little while before anyone here is able to work on it, but I can provide some pointers into the code in case someone wants to try and contribute a fix. The key issue is that as we have it right now, virtualized tables assume all rows are the same height and calculate how many rows to drop at the beginning based on this. And to a certain extent we NEED to guess at the row heights, because it's crucial for performance that we not render every row above the ones we're looking at.

The height is measured here:

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

Lines 199 to 209 in a834e5a

	const contentTd = r1c1.querySelector('tr > td:first-of-type');
	if (!contentTd) {
	return;
	}
	const contentThs = r1c1.querySelectorAll('tr th:first-of-type');
	setState({
	uiCell: {
	height: contentTd.clientHeight

and used to calculate how many rows to drop here:

dash/components/dash-table/src/dash-table/derived/data/virtualized.ts

Line 44 in a834e5a

let start = Math.floor(scrollTop / uiCell.height);

and to calculate the marginTop for how much scroll space to leave above the visible cells here:

dash/components/dash-table/src/dash-table/derived/table/fragmentStyles.ts

Lines 27 to 35 in a834e5a

	const virtualizedHeight =
	(Math.floor(uiViewport.scrollTop / uiCell.height) - rowPadding.before) *
	uiCell.height;
	const headersHeight = R.sum(R.map(h => h.height, uiHeaders || []));
	const marginTop =
	virtualization && uiViewport && uiCell
	? Math.max(virtualizedHeight - headersHeight, 0)
	: 0;

So when you scroll and we add or remove rows at the top and we modify marginTop, I think the thing to do will be to alter scrollTop as well based on how different the actual heights of these rows are from what we were expecting.

Exactly how to do this I'm not 100% sure - but first guess is we should stash the actual vertical positions and row numbers of the first and last rendered rows somewhere - maybe in uiViewport state? Or perhaps we need a new state variable so we don't rerender unnecessarily... And then either the first or last rendered row will be available post-scroll and can be used to adjust scrollTop.

After that, we can expect the scrollbar position to be a little bit jumpy, but the contents should be smooth.

[gvwilson]

Hi - we are tidying up stale issues and PRs in Plotly's public repositories so that we can focus on things that are most important to our community. If this issue is still a concern, please add a comment letting us know what recent version of our software you've checked it with so that I can reopen it and add it to our backlog. (Please note that we will give priority to reports that include a short reproducible example.) If you'd like to submit a PR, we'd be happy to prioritize a review, and if it's a request for tech support, please post in our community forum. Thank you - @gvwilson