User properties table malformed

[corywatilo]

There seems to be an issue with some nesting when viewing a user's properties.

Here's the example shown below

[mariusandra]

It's "correct" in that all "key" columns are horizontally left-aligned & vertically middle-aligned. The fix is to top-align all the columns.

It's also not a CSS oneliner (vertical-align: top) since there will be some spacing inconsistencies when you compare properties that are tables or properties that are values.

Should definitely be fixed :)

[clarkus]

Is there any reason we wouldn't use nested tables for this scenario? In other similar scenarios, we use a table within a table to ensure that headers are shown and that each value is clearly labeled and understandable. As an example, data management does this for showing properties seen with an event.

[mariusandra]

The columns are always key and value, so sub-tables might look very repetitive. I might give it a try as part of support later, but I'm afraid it's going to look visually messy... 🤔

[clarkus]

OK let me know if you want support on that. I was looking at this a bit yesterday and the vertical alignment will help a ton, but I also feel like the table row borders are a factor. This isn't a case handled in the lemon table components we have now, so I'm happy to draw some ideas for that if you think it's a good use of time.

[mariusandra]

Here are some attempts at improving these tables without a lot of changes to the markup:

@clarkus are any of those worth implementing?

0. How it is now
   

1. Borders around tables
   

2. Borders around tables, header on subtables
   

3. Borders and header on tables
   

I tried vertically top-aligning keys columns, but not sure if that improves anything:

5. Top aligned headerful table
   

6. Top aligned headerless table
   

[clarkus]

@mariusandra I think top-aligning the property key is worth trying. The other thing that makes this harder to scan is that amount of horizontal space between the key and the value. I've been working through some similar patterns for other more compact views. I did a quick redraw to illustrate what I'm trying to describe.

Generally what I'm proposing is:

• Size the key column to be just wide enough to contain the largest string value in this column.
• That will give most of the space in the table to the values, and in the case of nested key:value pairs, lots of space to show all that detail
• Top-align the key to line up with the first value, or the first nested key:value sets.
• I've also been using monospace fonts for the nested sets

https://www.figma.com/file/rnaKSVMfWTcpX4cmDbvWsi/Data-Management-%26-Live-Events?node-id=13%3A1947

Thoughts?

[Twixes]

Seems like this can be improved mostly just by setting the horizontal padding for leftmost/rightmost columns to zero in those embedded tables.

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