Table Design Update

[lottiecoxon]

Is your feature request related to a problem?

First brought to me by Joe, the issue is that tables are too difficult to gather information from.

This is from a multitude of reasons:

• the header columns and rows disappear when scrolling down or right
• there is no way to check axis labels when looking at the data
• there is no check all button on side selection
• the columns aren't separated by lines.

Overall it's confusing and hard to engage with.

Describe the solution you'd like

The solution I would like to propose contains a few key changes that I believe will really improve the users experience:

• The introduction of fixed legends on the top and the left hand side. Doing so will allow the user to clearly see what data they are looking at without getting lost in the data maze.

• With the new fixed legends allowing the user to scroll vertically and horizontally, with the data being seen to move under the fixed legends - emphasised by the use of shadows

• Introducing a select all button for the selecting options below it
• As well as a scrollable side panel that still allows the user to see the titles above the side labels - also emphasised by shadows when labels are hidden via scrolling

• The introduction of a blue highlight when hovering over data boxes, this would allow users to clearly identify the data they want to see, while also being shown the legends that directly correlate to it.

Describe alternatives you've considered

Other avenues I have gone down:

Introducing scroll bars. After discussion with Chris these were taken out due to lack of necessity as well as difficulty with implementation across different browsers.

• Partial Blue highlight

• Colour blocking instead of shadows - not very visible and also not consistent with branding

Additional context

Figma file to see workings and comments from the team

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

[mariusandra]

Great suggestions! The only thing I need to add more context on is this:

Introducing scroll bars

Unfortunately, it's not a choice that's up to us.

Not everyone has an amazing macbook touchpad, which lets them easily swipe left, right, up and down. If you use a mouse, you usually just have one scroll wheel, which goes up and down. There's no way to swipe left/right, except with a scrollbar.

This is also me every time I sit behind a dock, where I have a keyboard and a mouse. I must always scroll to the bottom of the page to see the table's horizional scrollbar, use it, scroll to the top to check which columns I'm at, and then scroll back to the relevant part in the middle of the table that I wanted to look at.

...

As for the implementation, all of the above is actually really hard to do 😅. Natively the web just supports simple tables. All this scrolling has to be handled by us. The complexity is in keeping the widths/heights of columns in sync between all the independently scrolling or fixed parts.

There are libraries that can do most of the work for us though. I recently found this library, which seems rather amazing. Unfortunately, they seem to expect your table to be of fixed size and in one place on the page, not as part of a scrolling page. (I didn't find floating headers for example). This requires research.

[clarkus]

I think we're somewhat at the mercy of browsers, operating systems, and input devices when it comes to scrolling. We can try to balance things here, but I'm not sure the value is there. The rest of the changes specified here should be achievable, though. Using position:sticky on specific elements in the table should achieve most of the result above. Hovering and highlighting might be tricky across thead tbody element containers, but I think we can realized the sticky position elements unless our table markup is really complicated. It's a very simple example, but this demo shows the CSS that would get us most of the way to sticky headers and columns. https://codepen.io/chriscoyier/pen/yLVNErX

[mariusandra]

My point is that there is no way to not have scrollbars on windows. There is, but then you can't scroll. Ideally the scrollbars on the page itself will handle the scrolling, but that breaks down for horizontal scrolling which is the worst then you don't have an expensive mac touchbar :/

[clarkus]

I don't think the scrollbar changes above are critical to the solution. It's mostly about having that fixed header / primary dimension fixed so that they can be compared with other cells that are not adjacent to the header/first column. Is that not feasible?

[mariusandra]

We need a horizontal scrollbar somewhere (and it will be hidden on mac automatically), otherwise a large section of our users will only see a partial table. It can be at the bottom of the table, but it's not possible to not have it if you're using windows or mac with a mouse.

[mariusandra]

Totally fine to not put it in the design, but be aware that it will show up in the implementation.

[kappa90]

Tagging myself in this so that I can take a look at it and do some experimentations.

[lottiecoxon]

Trying (desperately) to revive this.

I am very keen to get this shipped and put into the app. The scroll bar is not the key component to this design change and therefore I am more than happy to leave it as is (aka we currently have the scrolling up/down +sideways coded in the app right now).

What I would love to see implemented is the floating fixed legends - @mariusandra when focusing on those changes how easy would it be to update? Please let me know what I can do to help this along :)

[mariusandra]

Well... someone needs to take about 1-5 days and redo the way LemonTable renders tables. Probably by using some headless react table abstraction to do the heavy lifting. It's not a quick fix, and we don't know how it can go wrong and delay things, hence the liberal 1-5 day range.

Work of this magnitude unfortunately will only get done if it's someone's priority for a sprint. Thus the next step is to find someone who actually wants to and has capacity to build it 🙃. The next sprint planning is on Wednesday...

[mariusandra]

To add, it's not a hard problem to solve, and I think we absolutely need these floating columns. Our tables are horrible without them. This has come up earlier as well, but nobody has had the capacity to take this on.

[kappa90]

I'll take care of this and add it to my todo list 🙆‍♂️

[kappa90]

I have a solution in the making, but need some clarifications:

1. What happens if a table has expandable rows?
2. If there are grouped columns, I expect both the parent and children headers to be sticky, correct?

[lottiecoxon]

For transparency (as this was a conversation held on Slack):

Emanuele Capparelli
9:15 AM
Yes, I think these are the cases that are not clear:

• Expandable rows with lots of content inside, if the first columns are fixed, is the content not fixed or?
• Grouped columns: should we allow to stack an entire group of columns?
• Bonus: tables within tables, no idea how to stick legends on the sub table, it's basically the same problem as expandable rows

Lottie
9:24 AM
I think it would be a case of layering (if that is even possible):

• the base layer would be the horizontal legend grouped with the data below it, this information would scroll
• the second layer would be just the horizontal legend that would stay in position and only scroll side to side to match the data column below it.
• the third layer on top would be the fixed vertical legend this would only scroll up and down alongside the data in the layer below

Would this help with creating it? (due to my lack of code knowledge I understand if this doesn't work) - I would be keen for a chat to help work out a solution that is code possible while still fixes the design problems we are facing

Emanuele Capparelli
9:26 AM
I'll send you a gif of what I've done asap, I'm out to get a coffee. I think it's easier if we visualize it :D

[posthog-bot]

This issue hasn't seen activity in two years! If you want to keep it open, post a comment or remove the stale label – otherwise this will be closed in two weeks.

[posthog-bot]

This issue was closed due to lack of activity. Feel free to reopen if it's still relevant.