How to right-align the header of a editable table column

[srp-tom]

I am right-aligning the headers of columns containing numerical data within the table.

However, when I make that column editable, the layout breaks due to the edit icon. Is there a solution?

Example:

[jperals]

Hi,

How are you right-aligning it, and why do you need to do this?

Although the header attribute of the column definitions can return a React Node, we haven't really seen a case where such a customization would be needed.

[srp-tom]

Hi,

I'm creating a custom header component using the Box component and applying right alignment.

When displaying quantitative numerical data within a table, we align both body cells and header cells to the right to provide visual comfort to users.

[jperals]

Thank you for the extra details. Our guideline is to keep all column headers left-aligned (or better said, start-aligned, i.e, left-aligned when the page direction is set to left-to-right and right-aligned when it is right-to-left), even if the column content is showing end-aligned (i.e, right-aligned in left-to-right) content.

Here is an example: https://cloudscape.design/examples/react/table-select-filter.html