Table keeps jumping back to top after assigning custom scroll position

I’m using Vue 3 with a Vuetify table and whenever I modify data I have to fetch everything again. If you modify a cell inside row 123 and column 456 reconstructing the whole grid is annoying because the table scrollbars jump back to the start. I think a good solution for this would be to

• store the current scroll position
• perform the write action
• reassign the stored scroll position

( any better suggestions are highly appreciated )

As a sidenote: Since Vuetify requires a fixed table height for fixed table headers I’m, calculating the height dynamically ( table should fill the rest of the page ).

I created the following example ( Playground link )

<script setup lang="ts">
import { ref, nextTick, onMounted, watch } from "vue";  

const mainContainerComponent = ref<VMain>();
const tableComponent = ref<VTable>();
const tableHeight: Ref<number | undefined> = ref(undefined);
const tableMatrix = ref([[]]);

onMounted(async () => {
  // we only want to scroll inside the table
  document.documentElement.classList.add("overflow-y-hidden");

  await loadData();
});

watch(tableMatrix, async () => {
  // Unset table height and wait for it to rerender
  tableHeight.value = undefined;

  await nextTick();

  if (!tableComponent.value) {
    return;
  }

  const mainContainerComponentRectangle = mainContainerComponent.value.$el.getBoundingClientRect();
  const tableRectangle = tableComponent.value.$el.getBoundingClientRect();
  const topOffset = tableRectangle.top;
  const bottomOffset = mainContainerComponentRectangle.bottom - tableRectangle.bottom;

  tableHeight.value = window.innerHeight - bottomOffset - topOffset;
});

async function loadData() {
  // destroy table
  tableMatrix.value = [];

  await nextTick();
  
  // fetch data
  const fetchedData = new Array(Math.floor(Math.random() * 300) + 50).fill("data");

  // calculate table matrix
  tableMatrix.value = [...fetchedData.map(x => [x])];
}

async function performWriteAction() {
  // send modify request here

  const { scrollLeft, scrollTop } = getTableScrollPosition();

  await loadData();

  // wait for the DOM to finish
  await nextTick();

  // try to restore the previous scroll position
  setTableScrollPosition(scrollLeft, scrollTop);
}

function getTableDOMElement() {
  return tableComponent.value?.$el.querySelector(".v-table__wrapper");
}

function getTableScrollPosition() {
  const { scrollLeft, scrollTop } = getTableDOMElement();
  
  console.log(`current scroll position => x: ${scrollLeft} | y: ${scrollTop}`);

  return { scrollLeft, scrollTop };
}

function setTableScrollPosition(scrollLeft: number, scrollTop: number) {
  const tableElement = getTableDOMElement();
  
  console.log(`scroll to => x: ${scrollLeft} | y: ${scrollTop}`);

  tableElement.scrollLeft = scrollLeft;
  tableElement.scrollTop = scrollTop;
}
</script>

<template>
  <v-app>
    <v-main ref="mainContainerComponent">
      <v-container>
        <v-btn @click="performWriteAction">Modify data</v-btn>
      </v-container>
      
      <v-table
        ref="tableComponent"
        density="compact"
        fixed-header
        :height="tableHeight"
      >
        <thead>
          <tr>
            <th>Col</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, rowIndex) in tableMatrix" :key="rowIndex">
            <template v-for="(cell, columnIndex) in row" :key="columnIndex">
              <td>{{ rowIndex }}</td>
            </template>
          </tr>
        </tbody>
      </v-table>
    </v-main>
  </v-app>
</template>

The problem with this code is that the table always jumps back to the start. If you scroll down to the center of the table and modify some data the scroll position is still wrong.

Do you have any ideas what’s wrong or missing?