Feature request: Horizontal scrolling for breakdown charts

[joethreepwood]

Is your feature request related to a problem?

Currently I'm trying to look at a pageview spike because we had a suspicious 70k spike in the space of one hour. I want to drill into it via a URL breakdown to see where the traffic is focusing on. It's a big-ish table!

Unfortunately, that initial view above doesn't show me the part of the table I need to see. I want to focus on a particular hour of the chart. So, I need to scroll along horizontally.

But the scroll bar is at the bottom.

But now I can't see the table headers when I scroll, so I don't know what part of the table I'm looking at.

As a result, I end up yo-yoing between the two views above. Scroll a bit. Did I scroll to the right bit? No. Scroll a bit more. Right bit? Shit, I went past it. Scroll back.

All of this on a massive 4K screen!

Describe the solution you'd like

It would be nice to either have a sticky top row or a horizontal scroll bar in big breakdown charts on trend insights.

Describe alternatives you've considered

I could just export the table and look at it in Excel. But that's laaaaame.

Additional context

This feels like a UI issue, so tagging @lottiecoxon and @clarkus

Thank you for your feature request – we love each and every one!

[lottiecoxon]

So a few ideas

• making the table headers fixed in position, allowing the user to see the correct placement and not getting lost.
• to allow the user to know that there is more space to scroll either up, down or sideways I vote we add a slight linear fade on the sections of the table that have been 'hidden'.
• I am debating how helpful it would be to have a colourful hover tool that shows both of the correct axis' - this would allow the user to not get lost
• I also vote that if the user selects a block in the table it should stay selected until it is unselected or if another block is clicked? this way you could compare data?

[clarkus]

Excellent work, @lottiecoxon! I think you're on the right track here but I wanted to re-summarize the solutions you described so I could add feedback on specific ideas. The biggest thing to communicate is that this solution should be specific to data tables, not every table. We have some conditional usage based on the dynamic nature of the table, the number of rows shown, etc. Said another way, some tables are really just succinct structured lists that don't change much... they wouldn't benefit from this as much as the data tables shown in insights and other features like live events, insights, etc.

making the table headers fixed in position, allowing the user to see the correct placement and not getting lost.

💯 I think this is the core solution, so totally agree.

to allow the user to know that there is more space to scroll either up, down or sideways I vote we add a slight linear fade on the sections of the table that have been 'hidden'.

We have something like this now, but it's an inner shadow. It's meant to indicate that there's more beyond the edge of the table. Depending on the user's browser / operating system, they could also see affordance for scrolling (scrollbars).

I am debating how helpful it would be to have a colourful hover tool that shows both of the correct axis' - this would allow the user to not get lost

Row / column / cell highlighting could be valuable for associating a cell with it's corresponding header and the table dimension it describes.

I also vote that if the user selects a block in the table it should stay selected until it is unselected or if another block is clicked? this way you could compare data?

This is a cool idea. Are you thinking that the highlighted cell would make it easier to scan and get back to that previous cell that you wanted to compare?

[clarkus]

@lottiecoxon ,I think it'd be worth developing this solution a bit more with some higher fidelity concepts. There are some table patterns at https://www.figma.com/file/Y9G24U4r04nEjIDGIEGuKI/PostHog-Design-System-One?node-id=2454%3A16644 that could be updated to include this highlighting and fixed header concept.