A Case Study of Complex Table Design • Hacker News Board

Re: A Case Study of Complex Table Design

#21

Post by capableweb » Fri, May 08, 2020, 11:34 AM UTC

divbzero wrote: post #18

sixQuarks wrote: post #2

I 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?

This sounds tough. A common solution, which qualifies as “janky”, is to render sticky rows in a element, completely separate from the itself. If I remember correctly, DataTables [1] takes this approach for its sticky headers. React Table [2] takes a similar approach, and actually abandons altogether by using elements for table body, rows, and cells. [1]: https://www.datatables.net [2]: https://react-table.js.org I ha…

The implementation here would decide if this is "janky" or not as in web-dev circles, "janky" specifically refers to stuttering, lag, juddering and such, not in general something that is "hacky" (poor or ad-hoc solution).

So if it's performant, it's not "janky" (again, in web-dev circles) but it could still be a "hacky" implementation, even without any jank. It's also different from "robust", so something can be not-janky but also not-robust.

Re: A Case Study of Complex Table Design

#22

Post by sjc01234 » Fri, May 08, 2020, 12:09 PM UTC

See the words "case study" - "complex" - "Table" ... Start to read the blog post and realize this is just a bunch of front-end stuff about fonts and animations. >.> Misleading! >.>

Re: A Case Study of Complex Table Design

#23

Post by sjc01234 » Fri, May 08, 2020, 12:09 PM UTC

Scarbutt wrote: post #7

Probably should add HTML to the title. Though it was about SQL.

+10,000% !!!

Re: A Case Study of Complex Table Design

#24

Post by chadlavi » Fri, May 08, 2020, 12:30 PM UTC

Always remember to see what your blog looks like in a browser with content blockers turned on. I was very confused why this guy would use Times New Roman, turns out it's just a google font.

Also define backups!

Re: A Case Study of Complex Table Design

#25

Post by DHPersonal » Fri, May 08, 2020, 1:17 PM UTC

> Since the budget table is static in the new design, each row is rendered how you would expect: each row is inside a div.

I know it's probably petty of me, but I would disagree: I expect the contents of a table to be placed within .

Re: A Case Study of Complex Table Design

#26

Post by sixQuarks » Mon, May 11, 2020, 1:53 PM UTC

SirWart wrote: post #8

sixQuarks wrote: post #2

I 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.

I figured it out without using JavaScript. The trick is to use a on the first child of each tr, which becomes the sticky left column. Position sticky works on th’s.

It’s not ideal, but this works on about 95% of all browsers.