How to create sticky table headers in a Nuxt UI Table Component?
I am trying to create "sticky table headers" so that way when the user scrolls a long list of table data rows, the headers stick to the top and visible in the viewport and keep the user informed of what the columns are.
I am using [NuxtUI Table component][1] in Nuxt3 and can not figure out how to get the headers to stick to the top. I tried doing the following:
But, that did not work.
Here's my reproduction link: https://stackblitz.com/edit/nuxt-ui-hg5dsj?file=app.vue
Anyone got a solution?
[1]: https://ui.nuxt.com/components/table
StackBlitz
Nuxt UI - Playground (forked) - StackBlitz
Playground of Nuxt UI, a UI library powered by Headless UI and Tailwind CSS for Nuxt.
4 Replies
it works when the overflow is removed from this div.
![No description](https://cdn.answeroverflow.com/1250896149758345336/image.png)
@localhostess has a good point.
I also found that making the ".overflow-x-auto:inherit", Let's you update any element you want to scroll and it'll abide.
so in this case we might want the "thead > tr" element to be visible, if so, then "thead > tr { overflow-x: visible;}" will keep that on top
and don't forget to add a bg color to the table headers, otherwise it'll be transparent, "tr > th { background: red;}"
![No description](https://cdn.answeroverflow.com/1250910276736258109/Screenshot_2024-06-13_at_1.30.16_PM.png)
![No description](https://cdn.answeroverflow.com/1250910277051093145/Screenshot_2024-06-13_at_1.26.52_PM.png)
![No description](https://cdn.answeroverflow.com/1250910277315203213/Screenshot_2024-06-13_at_1.29.56_PM.png)
Updated the blitz https://stackblitz.com/edit/nuxt-ui-jorcn2?file=app.vue
snolan-ethika
StackBlitz
Nuxt UI - Playground (forked) - StackBlitz
Playground of Nuxt UI, a UI library powered by Headless UI and Tailwind CSS for Nuxt.
You can just set the 'thead'
:ui="{ wrapper: 'relative overflow-auto max-h-[40rem] min-h-96', thead: 'sticky top-0 bg-white' }"