datatable column headers should honor align even when sortable, sort icon placement should adjust based on alignment

[danielm-hpe]

Making datatable sortable alters the behavior of the column headers such that the headers are always begin/left aligned, and the sorting icon appears to the right of the column header text. In the absence of sorting, the column headers respect the alignment for the column.

Consistent with UX best practices for tables, we would like for the column header to always respect the column's alignment, and adjust the positioning of the sort icon based on the alignment so that it doesn't interfere with the alignment. For example, with end alignment the sort icon should be to the left of the column header.

There has been some previous discussion on this topic here #5965

Expected Behavior

Column headers should respect the column's alignment. Here's an example of a numeric column with end alignment. when sorting is disabled.

When this becomes sortable, I'm expecting for the alignment to remain the same, but for these end aligned column headers for the sort icon to now be to the left of the column header instead of always on the right.

@gregfuruiye shared these two resources showing expected behavior and discussing the issue:
https://finviz.com/screener.ashx
https://www.pencilandpaper.io/articles/ux-pattern-analysis-enterprise-data-tables#sorting-filtering-and-searching

Summarizing- "The sort chevron shouldn’t interfere with the alignment of the heading relative to the column’s content."

Actual Behavior

Sortable table example with the column header now left aligned

URL, screen shot, or Codepen exhibiting the issue

Here's an example of a table that "looks bad" because of a mix of alignments and sorting enabled

Steps to Reproduce

1. create a datatable with a right/end aligned column
2. make the content of the column longer than the label to make it more apparent how the column header is aligned
3. make the datatable sortable

Your Environment

• Grommet version: 2.36.1
• Browser Name and version: chrome
• Operating System and version (desktop or mobile): windows 10