N
Nuxt•9mo ago
whiffleball99

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: 
  <section class="relative">
  <UTable
    :ui="{ th: { base: 'sticky top-0' } }"
    :columns="columns"
    :rows="people"
  />
  </section>
  <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? [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.
Nuxt UI
Table - Nuxt UI
Display data in a table.
4 Replies
localhostess
localhostess•9mo ago
it works when the overflow is removed from this div.
No description
handshake
handshake•9mo ago
@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
No description
No description
handshake
handshake•9mo ago
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.
dwol
dwol•9mo ago
You can just set the 'thead' :ui="{ wrapper: 'relative overflow-auto max-h-[40rem] min-h-96', thead: 'sticky top-0 bg-white' }"

Did you find this page helpful?