Skip to content

TableView: Sort icon not adjacent to column header when align="end" is set #9244

@FentPams

Description

@FentPams

Provide a general summary of the issue here

The Issue:
We're using Spectrum 2's official align prop on both Column and Cell components
When align="end" is set, the header text moves right but the sort icon stays left
This creates a large visual gap between the sort icon and the text it controls

Image

Expected Behavior:
The sort icon should remain adjacent to the column header text regardless of alignment direction.

Implementation

// Column definition
<Column
  key="pageviews"
  id="pageviews"
  align="end"          // Right-align header
  allowsSorting={true}
>
  Pageviews
</Column>

// Cell implementation
<Cell align="end">     // Right-align cell content
  {formatNumber(value)}
</Cell>

🤔 Expected Behavior?

The sort icon should remain adjacent to the column header text regardless of alignment direction.

😯 Current Behavior

When align="end" is set, the header text moves right but the sort icon stays left
This creates a large visual gap between the sort icon and the text it controls

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

Could you directly DM me ? I am not sure if I could directly put in here. Thanks

Version

2

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS

🧢 Your Company/Team

Adobe/AEM Sites

🕷 Tracking Issue

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    S2bugSomething isn't working

    Type

    Projects

    Status

    🩺 To Triage

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions