A Case Study of Complex Table Design
jlongster.com
A Case Study of Complex Table Design
1–10 of 26 posts
Re: A Case Study of Complex Table Design
#2I recently tried to design a table that had a sticky header row AND a sticky first column. I couldn't figure out a way that worked well on both desktop and mobile. All the solutions I found were janky in one form or another.
Anyone have good tips for this?
Re: A Case Study of Complex Table Design
#3Very good example of "kill your darlings" when it comes to removing slick animations in favor of straightforward, no non-sense, zero latency feedback for the user. I suppose there is some deep down desire to implement these things that first must be realized, only to be quelled before it's shipped.
Re: A Case Study of Complex Table Design
#4The images are so small it's hard to even tell what he is writing about. If you're going to write 1,200 words on your new table design that is only subtlety different to your old table design, maybe show said design at 100% of the size when you click on one of the images.
Re: A Case Study of Complex Table Design
#5The images are so small it's hard to even tell what he is writing about. If you're going to write 1,200 words on your new table design that is only subtlety different to your old table design, maybe show said design at 100% of the size when you click on one of the images.
Ironically, if you make the window smaller, the images get bigger.
Re: A Case Study of Complex Table Design
#6I recently tried to design a table that had a sticky header row AND a sticky first column. I couldn't figure out a way that worked well on both desktop and mobile. All the solutions I found were janky in one form or another. Anyone have good tips for this?
I'm afraid I have no tip to offer, but I can empathise because we've run into the same problem and we too are still looking for a good solution.
I think tables just don't sit well in HTML. We are trying to force a 2D structure where useful operations might be based on either dimension into a flattened hierarchical structure where one dimension must take priority, and that is awkward. The attempt to work around this by introducing colgroup and col elements never really went anywhere either.
So for now, we resort to tricks like artificial DOM structures and pretend margins/padding and manual positioning, the same kind of hackery that we used to use for page layouts until tools like flexbox and grid were introduced. What we really need, IMHO, is a similarly comprehensive set of dedicated table selectors and styling options in CSS. There have been proposals like the nth-col pseudo-class and the || column combinator, which look like useful ideas, but again these haven't really gone anywhere so far. There might be some value in allowing tables to be styled as row-major or column-major (a similar idea to flex-direction) and then basing other styling around the major and minor axes rather than relying on rows/children and columns specifically.
Re: A Case Study of Complex Table Design
#7Probably should add HTML to the title. Though it was about SQL.
Re: A Case Study of Complex Table Design
#8I recently tried to design a table that had a sticky header row AND a sticky first column. I couldn't figure out a way that worked well on both desktop and mobile. All the solutions I found were janky in one form or another. Anyone have good tips for this?
The most successful I’ve been at this is clever uses of position: sticky. You have to fall back to absolute positioning and scrolling the fixed headers in JS on browsers that aren’t as advanced in their position: sticky support though.
Re: A Case Study of Complex Table Design
#9Another option for showing the trsnsition would be a very brief change in contrast in the table (bg a little darker or text a little lighter). Your eyes can still focus a spot, but you get the visual feedback of a change.
In my mind the bigger issue is being able to cancel or merge transitions if scrolling quickly. Otherwise you end up like excel's animated cursor which literally is slower now than before it was animated. Nobody likes scrolling through molasses
Re: A Case Study of Complex Table Design
#10I recently tried to design a table that had a sticky header row AND a sticky first column. I couldn't figure out a way that worked well on both desktop and mobile. All the solutions I found were janky in one form or another. Anyone have good tips for this?
Maybe see how the library from https://www.ag-grid.com/ does it or just use their library. If you check how many open bugs most JS grid/table projects have, it's clear implementing a robust grid with many features is really hard. I've used ag-grid for projects before and can recommend it (works with all major UI frameworks).