Vuetify 3：v-table で先頭行と先頭列を固定してスクロール

<template>
  <div>
    <v-table>
      <thead>
        <tr>
          <th v-for="col in columns">{{ col }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in cells">
          <td v-for="col in row">{{ col }}</td>
        </tr>
      </tbody>
    </v-table>
  </div>
</template>
<script lang="ts">
export default {
  data() {
    const columns = Array
      .from({ length: 100 })
      .map((_, i) => i);
    const cells = Array
      .from({ length: 100 })
      .map((_, i) =>
        Array
          .from({ length: 100 })
          .map((_, i) => i)
      );
    return ({
      columns,
      cells,
    });
  },
}
</script>
<style scoped>
div {
  width: 100vw;
  height: 100vh;
}

thead {
  z-index: 2 !important;
  position: sticky;
  top: 0;
}

th {
  width: 40px;
  background-color: white;
}

th:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 3 !important;
}

td {
  position: sticky;
  left: 0;
  width: 40px;
  background-color: white;
}

td:nth-child(1) {
  z-index: 1;
}
</style>