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

h-full

from the parent container but then it overflows with too many elements. Using something like

h-[500px]

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

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

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>

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

h-full

from the parent container but then it overflows with too many elements. Using something like

h-[500px]

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

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

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>

Virtual Scroll Nuxt UI Table

Similar Threads

Virtual Scroll Nuxt UI Table

Similar Threads

Similar Threads

Similar Threads