Header > Row vertical misalignment when enabling sort in 'data-table'

[kuatroka]

Current Behavior

Reopening as the original shadcn does align the header with the row when sort is enabled.

Current Behavior

Header > Row vertical misalignment when enabling sort in 'data-table'

CIK - sort disabled

CIK - sort enabled

Expected Behavior

It should be aligned as minimum to the left and as maximum to have an option (left or right)

Here is the original shadcn

Steps To Reproduce

enable/disable sort in the data-table component

Link to Reproduction / Stackblitz (reproduction template)

No response

More Information

No response

[kuatroka]

I checked and the shadcn version of a table where a column doesn't have an icon, is indeed not aligned.

shadcn-svlete only repeats it, so sure please close it if you think it's right. But I think that if the original shadcn does something wrong, maybe shadcn-svelte could improve on it. Thanks

[ollema]

shadcn-svelte only repeats it, so sure please close it if you think it's right. But I think that if the original shadcn does something wrong, maybe shadcn-svelte could improve on it. Thanks

I can't answer for what Hunter thinks about this particular issue.

but what I have done in the past when I discovered an issue that was present in both shadcn/ui and shadcn-svelte is that I opened a ticket for it upstream in shadcn/ui.

then when it was fixed upstream in shadcn/ui it made even more sense to also fix it here in shadcn-svelte

see:
shadcn-ui/ui#1627
which I fixed in:
shadcn-ui/ui#1628

and then the same fix was merged in shadcn-svelte as well:
#326

[kuatroka]

Thanks @ollema. You are one of those lucky ones that know both Svelte and React. I don't, I'm very new to both Svelte and web dev, so I felt it wouldn't be fair to raise an issue in the original shadcn based only on a screenshot from their docs and not something I can actually check myself.

In any case, I created the issue there too

[ollema]

Thanks @ollema. You are one of those lucky ones that know both Svelte and React. I don't, I'm very new to both Svelte and web dev, so I felt it wouldn't be fair to raise an issue in the original shadcn based only on a screenshot from their docs and not something I can actually check myself.

In any case, I created the issue there too

I have never written a line of React in my life 😅 the issue I fixed (maybe this issue as well) was a CSS/tailwind issue so no knowledge of React was needed.

if you are interested in contributing, I encourage you to give it a shot! you could start with shadcn-svelte since you are more familiar with Svelte. clone this repo, run for example pnpm run dev, open up the documentation in your browser and do some trial and error to find what CSS/tailwind classes might be causing this misalignment.

if you find a fix for shadcn-svelte it should be fairly straightforward to port it to shadcn/ui since it's probably just a matter of updating a string somewhere.

but if that sounds like a lot of work I understand fully

[kuatroka]

Thanks, I'll try to do what you suggest in the 2nd paragraph

[huntabyte]

Closing this issue for now. Feel free to reopen if this is addressed in the original.