How should DataTable headers be aligned for numerical/currency data?

[grahamharper]

How should DataTable column headers be aligned when the column contains a numerical/currency value (assuming the data follows formatting best practice by being set to align-right)?

As-Is example:

I would have expected (and a quick web search confirms) that the column header should be aligned with the data, so in the case of numerical/currency values, the column header should be right aligned.

E.g.

If the Carbon team agrees with this, then should I open a github issue requesting support for right-alignment in column headers, and specifically sortable column headers.

[thyhmdo]

@grahamharper that follows the rtl logic that we offer through Text direction. Just need to confirm with a dev if we already support this. @tw15egan @tay1orjones

[grahamharper]

Thanks. For RTL the reversing of the order of the icon and heading label is automatic based on the text direction mode with flexbox being used here.

What we need is the ability to specify certain columns to align in this manner. In theory I guess we could set dir='rtl' on the column header but that doesn't seem correct, and more of a hack.

[tw15egan]

Yeah, I think this makes sense because even in RTL languages I can imagine they may want left-aligned currency. Could see an isCurrencyColumn prop, or maybe something more agnostic? Are there other use cases besides currency (that we would want to allow?)

[thyhmdo]

I see. So that could only applies to a certain column. Can this prop be more general so people can turn it on if they want? I'm not sure what others use cases are to have this different direction.

[grahamharper]

Something like isNumeric on the column might better as it's not just currency values, could be numbers representing a count of something, like population size in table of countries.

Alignment Matters
3½ simple rules to follow:

1. Numerical data is right-aligned
2. Textual data is left-aligned
3. Headers are aligned with their data
   3½. Don’t use center alignment.

Numerical data is read right-to-left; that is, we compare numbers by first looking at their ones digit, then their tens, then their hundreds, and so on. This is also how most people learn arithmetic — start on the right and move left, carrying digits as you go[1]. Therefore, tables should keep numerical data right-aligned.

https://medium.com/mission-log/design-better-data-tables-430a30a00d8c

Best to get a visual designer to weigh in here on usage and prop naming if you want to imply correct usage.