NuxtN
Nuxt•2y ago•
3 replies
ʏᴜᴢᴢᴜᴡᴜᴀ

Virtual Scroll Nuxt UI Table

Does anyone know how to do a virtual scroll with Nuxt UI table? I want to have a height of h-full from the parent container but then it overflows with too many elements. Using something like h-[500px] on the table works but it is not responsive.

Anyone know of a solution? I've tried a bunch but can't seem to find a solution

Some example code:

booklist.vue
<template>
  <div class="flex h-full w-full flex-col">
    <PageHeader
      class="grow-0"
      :title="$t('bookList.title')"
      :subtitle="$t('bookList.subtitle')"
    />
    <BookOverviewTable class="grow" />
  </div>
</template>


bookoverviewtable.vue (only important snippets)
<UCard
    class="h-auto w-full rounded-lg"
    :ui="{
      body: {
        padding: '',
      },
      header: {
        padding: 'sm:px-4 py-3',
      },
    }"
  >
  <UTable
    :ui="{
      wrapper: 'relative overflow-x-auto h-[500px] overflow-y-auto',
      td: {
        padding: 'py-1',
      },
    }"
  >
</Card>
image.png
Was this page helpful?