Issue with Vuetify Data Table: Fixed Headers and Infinite Scroll

Question

I'm currently working with Vuetify 3, and I've implemented a data table with the fixed-header feature enabled to have sticky headers. However, I've encountered an issue when I try to give the table a fixed height. When I provide a fixed height to the table, it causes the infinite scroll feature to break.

<template>
  <div>
    <v-infinite-scroll :items="items" :onLoad="load">
      <v-data-table :headers="headers" :items="items" show-select density="compact" fixed-header v-model="table"
        @click:row="open" height="100vh">
        <template #top>
          <v-toolbar density="compact" flat>
            ...
            </v-btn-toggle>
      </v-data-table>
      <template v-slot:empty>
        <p>No more</p>
      </template>
      <div class="footer">
        <span>Total Rows:{{ items.length }}</span>
      </div>
    </v-infinite-scroll>
  </div>
</template>

I have the fixed-header feature enabled, which works perfectly for keeping the headers sticky. But when I set a specific height for the table container, the infinite scroll no longer functions as expected. The table doesn't dynamically adjust its height to display the additional data.

Is there a way to have both the fixed-header feature and infinite scroll working together, even when a fixed height is applied to the table? I'd greatly appreciate any insights or solutions to this issue.

I initially tried enabling the fixed-header feature in my Vuetify data table, which worked perfectly for making the headers sticky. However, when I set a fixed height for the table container using CSS, I expected the table to still have sticky headers and for the infinite scroll to adapt to the fixed height.

Additionally, I should mention that I'm using the infinite scroll feature as a means to load large datasets page by page. So, when a large amount of data is present, I make API calls to fetch the next page of data to keep the table loading efficiently.

What I expected:

Sticky headers that remain at the top of the table. Infinite scroll functionality allowing me to scroll through the data without causing any layout issues. The ability to fetch the next page of data when the user scrolls to the bottom of the table. What actually resulted:

Enabling the fixed-header feature worked as expected. When I set a fixed height for the table container, the infinite scroll feature stopped working correctly. It didn't adjust the table's height to accommodate additional data, and scrolling through the table became problematic.