Nuxt•3mo ago

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•3mo ago

it works when the overflow is removed from this div.

handshake•3mo 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;}"

handshake•3mo 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•3mo ago

You can just set the 'thead' :ui="{ wrapper: 'relative overflow-auto max-h-[40rem] min-h-96', thead: 'sticky top-0 bg-white' }"

Gaming

Programming

How to create sticky table headers in a Nuxt UI Table Component?