Thanks for this blog,
I might actually write one in the future too from what Ive learned from making tables.
I've never usually thought writing a blog about making tables would be a good idea
A Case Study of Complex Table Design
11–20 of 26 posts
Re: A Case Study of Complex Table Design
#12The partial animation of the rows and columns sure makes things confusing; until operations complete, the table is presenting inaccurate information.
Re: A Case Study of Complex Table Design
#13Can you work on a replacement for Xero instead? Please, take my money.
Re: A Case Study of Complex Table Design
#14The 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.
Reading on mobile was just fine
Re: A Case Study of Complex Table Design
#15The font change seems like a wash to me. Notice how the decimal points and thousands separators for the balance column don't line up in either of the screenshots? A change that would actually improve readability would be to use tabular numbers, supported by both San Francisco and Inter.
Re: A Case Study of Complex Table Design
#16The font change seems like a wash to me. Notice how the decimal points and thousands separators for the balance column don't line up in either of the screenshots? A change that would actually improve readability would be to use tabular numbers , supported by both San Francisco and Inter.
+1 on tabular figures [1] but it appears to me that OP is already using them? It’s hard to tell for sure but the 1 and 2 in 1,000.00 and 2,000.00 seem to be aligned. The misalignment in decimals and thousands separators could instead by caused by normal vs. bold font weight.
[1]: https://practicaltypography.com/alternate-figures.html#tabul...
Re: A Case Study of Complex Table Design
#17The font change seems like a wash to me. Notice how the decimal points and thousands separators for the balance column don't line up in either of the screenshots? A change that would actually improve readability would be to use tabular numbers , supported by both San Francisco and Inter.
Agreed that the font change seems like a wash. At first I thought OP was trolling the reader with two identical screenshots :)
I suppose the real benefit is having a font available across all platforms. Inter appears to be a high quality typeface, and I appreciate its author for releasing it under an open license. [1] [2]
Re: A Case Study of Complex Table Design
#18I 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 haven’t seen many solutions for sticky columns, but the least bad solution might also be a “janky” separate .
Re: A Case Study of Complex Table Design
#19Nice job overall. My only nitpick is that there are no affordances to know that you can drag/drop elements. I've often started dragging things by accident only to find out that it's the default behaviour of links. Probably so you can drag them to the toolbar/desktop etc. If I didn't know about the dd behaviour of this table, I would probably never use it. Otherwise it's pretty nice!
Re: A Case Study of Complex Table Design
#20"Since the budget table is static in the new design, each row is rendered how you would expect..." It would be nice to have one more "structure of the DOM" image like the ones above for the new design. I tried to check with dom explorer but there was a lot of divs...