Nuxt•4mo ago

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>

<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>

<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>

3 Replies

ʏᴜᴢᴢᴜᴡᴜᴀ•4mo ago

on bigger displays there is this chin because of fixed height

ʏᴜᴢᴢᴜᴡᴏ•4mo ago

bump

Gaming

Programming

Virtual Scroll Nuxt UI Table