UseVirualList in Tables

Hi was wondering if it was possible useVirtualList within a table:

I show an example of what I’m trying to do without success

<table>
  <thead>
    <tr>
       <TableHeader />
    </tr>
  </thead>
  <tbody>
      <UseVirtualList>
          <TableRows />
      </UseVirtualList>
  </tbody>
</table>

Any tips or ideas on how to approach this will be great.

[mitchhymel]

I was trying to do something similar and got it working the way I wanted with useVirtualList. The thing that got it working for me was putting the table within the container and wrapper divs. Not sure if you were specifically asking how to do this with the renderless component, but hopefully this helps.

<script setup>
import { useVirtualList } from '@vueuse/core'
const { list, containerProps, wrapperProps } = useVirtualList(
  yourListOfData, 
  { itemHeight: 22, }
)
</script>

<template>
  <div v-bind="containerProps" style="height: 500px;">
        <div v-bind="wrapperProps">
          <table>
            <thead>
              <tr>
                 <-- Your headers here -->
                <th>Id</th>
                <th>Name</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in list"
                style="height: 22px;"
                :key="item.index">
                  <-- Your row here -->
                   <td>item.data.id</td>
                   <td>item.data.name</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
</template>

[mitchhymel]

Unfortunately, I never figured out how to get it working with a static header.