fixed table header chevron layout shift

[kwongz]

Description

First page is new datatable, second page is old datatable
https://www.loom.com/share/5608209a1dfe479f89c7dbb3475de4f1?sid=37b1a37f-9c53-4c2b-9c68-18f4da575669

Checklist

• For UI or styling changes, I have added a screenshot or gif showing before & after
• I have added a changeset
• I have added to the docs where applicable
• I have added to the VS Code extension where applicable

[changeset-bot]

🦋 Changeset detected

Latest commit: dfc035a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 7 packages

Name	Type
@evidence-dev/core-components	Patch
my-evidence-project	Patch
e2e-prerender	Patch
e2e-spa	Patch
e2e-themes	Patch
@evidence-dev/components	Patch
evidence-test-environment	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[hughess]

The layout shift looks a lot better, but unfortunately we'll need to make sure the column title and the values in the column are aligned - for example in a numeric column they should both be right aligned, so any gap you're applying to the column title should also be applied to the individual cells in the column.

That might work well if we also reduce the left/right padding in the cells, and let the new gutter use that space

[kwongz]

Agreed i think this will look much better

[kwongz]

Aligned table cell content with table header, removed the existing padding and used the "gutter" for spacing between columns

[hughess]

This looks good in general, but there's a few cases where I think we need to adjust.

Before sending over those, just a quick clarifying question - is wrapTitles applied in this table? https://docs-i8kx0rshh-evidence.vercel.app/components/data-table/#column-groups

[kwongz]

Column Groups example i removed wraptitles from the code example. I see I forgot to remove it from the code block.

It seems not necessary since we have wraptitle example just below

[hughess]

Here's a few scenarios that look a bit off:

1. Not enough padding on left side of cells
   

2. Unclear which column the sort icon applies to
   
   

3. Too much padding on right side of cells - is more apparent when conditional formatting is used
   

I think the solution is some combo of:

• Increase padding on left side of cells
• Reduce space between title and left side of chevron icon
• (possibly) reduce size of chevron icon
• (possibly) reduce space on right of chevron

[kwongz]

Sounds good ill get these out right now

[kwongz]

Hey @hughess made some of your changes, sorry couldn't finish these last night, wanted to clean up some things before showing it to you

• cleaned up spacing between cells
• reduced size of chevron
• added this idea of a gradient background to highlight the sorted column + indicate asc or desc sort
• added margin left to chev, I thought it gets too close to header when datatable have many columns

without the current margin left, chev will stick next to header text with many columns

Table cell padding-right was 19px, reduced to 12px
table cell spacing

other datatables

table cell centered text

[hughess]

Ah, I think because we don't have lines around cells, the shading implementation ends up looking out of place. I think we'll need to stick with just the icon to avoid highlighting the visual difference between the title cell and the row cells.

What happened to the alignment behaviour on column titles? Looks like when align=center, the column title is staying on the left. Looks like it's the same when align=right, so I assume the alignment just isn't taking effect on the title cell at all atm

[kwongz]

ah i c, to fix the wrapped titles I wrapped them in a flex box structure to get the chevron to behave properly.

ill fix

• Align center header text
• remove linear gradient
• Do we want the chev to always be on the right in the "gutter" or do we want it to be right next to header text?

[kwongz]

• Fixed the alignment issue
  

• more spacing left of chevron then right (compared to right adjacent table header text)
  

---

-Something I dislike is alignment center, the chev is staying on the right, when the datatable has a lot of space the chev feels unconnected to that table. We Could allow alignment center chevs to be centered as well

alignment= center: columns country ID chev feels disconnected

Solutions: center chev when alignment is center

I think this is the case even when text is default aligned: left, if the column has a large width, there s a lot of empty white space in between text and chev. Maybe the chev should follow the text alignment?

Current: align=left

_Proposal: chev follows alignment rule

[kwongz]

fixes #2711

[hughess]

Getting close!

• When the column is right-aligned now, the title has extra padding that's not present in the cells:
  

• The chevron looks a bit far from the text in the title:
  

• When columns are close together, it's too hard to tell which column the chevron belongs too - need reduced padding/margin on left side of chevron
  

Removing the extra space from my first bullet might solve the other 2

[kwongz]

conflicts resolved in #2830