Up our table layout game

[mazameli]

I think the core team was all pretty keen on this article, and it made a few obvious suggestions that I think we should implement in our tables. Namely:

• Numerical data should be right-aligned (!!!!)
• Textual data should be left-aligned
• Headers should be aligned with their data (i.e., headings for numerical fields should be right-aligned)
• 3½. Don’t use center alignment.

I think we'll want to make exceptions for category fields that happen to be numerical — e.g., I don't think a phone number or ZIP code should be right-aligned.

It seems our typeface has pretty good, even spacing for numbers, so I think we're okay there but would be good to take another look to make sure things like decimal points and commas line up as they should.

[tlrobinson]

For a second I thought you wanted us to port our HTML markup to use <table> for layout...

[mazameli]

Well, it would improve cross-browser consistency… :trollface:

[mazameli]

I also think we could experiment with getting rid of our vertical borders, slightly tightening the spacing in between rows, and slightly decreasing the font sizing. One wrinkle with this would be figuring out a way to indicate in the UI that you can resize the width of columns.

[salsakran]

really like it visually. additionally, remember that table headings will have actions once #4496 is merged.

[tlrobinson]

@mazameli how might pivoted tables look?

[mazameli]

Yeah, as far as table heading actions, I think we can make the headings go blue on hover. (As an aside we'll have to figure out if sort-by-this-column is an action within the other actions menu, or if it's its own thing. I'm thinking the former right now.)

Pivot tables (i.e., 1 metric 2 dimension pivot tables) could look like this:

[kdoh]

Generally 👍 . Only thing that could get a bit odd in the case of the pivot example you posted is the alignment of the "x axis" pivoted field label and the right aligned labels for the different values. In the screenshot it's alignment with Apple is almost but not quite and it's wigging me out :P

[mazameli]

Yeah, I waffled back and forth a bunch on where to align that label (Filling in the mock). Maybe we make it have the same alignment as the first heading in the x-axis, like so:

[tlrobinson]

Cool.

There was also the summary column/row in the new query builder design. I imagine they'd just look like the other rows/columns, with a slightly different bg color, and maybe fixed so they're always visible without scrolling?

[mazameli]

Haven't thought that far TBH. In this issue I was trying to just propose CSS changes, and I see the subtotal/total cells as being a new feature. Good question though.

[tlrobinson]

Resolved by #4977

[mazameli]

I'll open a separate issue about stripping down the extraneous grid lines.

[EvaSchreyer]

Hi, I use metabase v0.25 and the alignment of colums is still not great:

As you can see I concat some of the numbers to add the "EUR" as there is currently no way to a) change the decimal dot to comma and b) to add a currency sign. Therefore the data is a string and is not aligned like the numbers in the other columns.

[EvaSchreyer]

Hi again, in case you still define the adjustments for the change it would be great if the user/the admin could decide if a column is right or left aligned.

The proposal:
Numerical data should be right-aligned (!!!!)
Textual data should be left-aligned

doesn´t really work when you still need concat syntax to add currency signs to your data - as then the number is turned into a string.

[cqcn1991]

If the alignment problem is solved? Seems still not.

[flamber]

@cqcn1991 Which version of Metabase? Can you provide a screenshot of your problem or more details?

[Dcushing57]

Hi,

It does not appear the the pivot table headers do not use right alignment when value's data type is Number. I am also using 3 category data types, 2 in the column, 1 in the row. Neither header is right aligned.

I received a complaint that the pivot table is hard to read as it almost looks like things are misaligned due to the left alignment on both headers and right alignment on number.

I am using a pivot table with the following details. I'm sorry, I cannot provide screenshot due to PHI. I will try to describe details as close as I can.

Summarization:

Sum(Number data type) by Category 1, Category 2, Category 3

Rows:
Category 1

Columns:
Category 2
Category 3

Values:
Sum(Number)

[flamber]

@Dcushing57 This issue is closed and several years old. You are seeing this issue: #16752