UI - Sub task for aligning table header with respect to content same as design.

[ankitguptaindia]

Part of #2828

Discussed here : #2853 (comment)

Technically the cell content are right aligned. There's some extra padding for the buttons within the table header (8px) which makes it look not aligned. I suggest we create a new issue and check with designs whether we need to align the table cell content.

In the design, all titles and corresponding values are right-aligned.

Design Followed: https://www.figma.com/design/fqR0EHi63lWahRcVTKCcba/Google-Listings-%26-Ads-v2.x?node-id=10866-63040&t=UAZY05dsxzVwJuu2-0

Current Status:

[joemcgill]

@asvinb have we applied any custom style here or is this just the default alignment that comes with the dataviews package?

[asvinb]

@joemcgill We have applied some custom styles for the cells to be right aligned, except for the cells in the first 2 columns (Product and Change Effectiveness). The misalignment is coming from the button padding in the table header (Regular Price, Avg. Price on Google, ...). In order to fix it, we'll need to add the same padding to the right aligned cell content. Unless we just have everything left aligned. What do you think @michaeleleder ?

[michaeleleder]

@asvinb @joemcgill I’ve used right alignment as that’s common for numeric values, but if DataViews doesn’t support it, we can use left alignment everywhere. I can apply the change in Figma as well.

[asvinb]

@michaeleleder This is how the table looks like with the default alignment:

Let me know what you think or if it's better we keep the numeric values to be aligned right.

[michaeleleder]

@asvinb Looks great, thanks! However, the right columns should always be aligned to the right, especially the ‘action’ one. I was under the impression that this one is always right-aligned, even in DataViews?

[joemcgill]

Usually the actions column in dataviews is automatically right aligned and has a dataviews-view-table__actions-column class applied. Asvin, could this be due to us using a custom column rather than the normal dataviews actions column for the change price button?

[asvinb]

That's correct @joemcgill . We can add the dataviews-view-table__actions-column class name to the Actions column and have it right aligned. In that case, all table cells will be left aligned except the action one which will be right aligned 👍