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 in Nuxt3 and can not figure out how to get the headers to stick to the top. I tried doing the following:
<code> <section class="relative">
<UTable
:ui="{ th: { base: 'sticky top-0' } }"
:columns="columns"
:rows="people"
/>
</section>
</code>
<code> <section class="relative">
<UTable
:ui="{ th: { base: 'sticky top-0' } }"
:columns="columns"
:rows="people"
/>
</section>
</code>
<section class="relative">
<UTable
:ui="{ th: { base: 'sticky top-0' } }"
:columns="columns"
:rows="people"
/>
</section>
But, that did not work.
Here’s my reproduction link: https://stackblitz.com/edit/nuxt-ui-hg5dsj?file=app.vue
Anyone got a solution?