How do you virtualise a horizontal list or two-dimensional grid with TanStack Virtual?

<script setup lang="ts">
import { useVirtualizer } from "@tanstack/vue-virtual"
import { ref, computed }  from "vue"

const parentRef=ref<HTMLDivElement|null>(null)
const ROW_COUNT=1000, COL_COUNT=50

const rowVirt=useVirtualizer({
  count:            ROW_COUNT,
  getScrollElement: ()=>parentRef.value,
  estimateSize:     ()=>35,
  overscan:         5,
})
const colVirt=useVirtualizer({
  horizontal:       true,
  count:            COL_COUNT,
  getScrollElement: ()=>parentRef.value,
  estimateSize:     ()=>120,
  overscan:         5,
})

const vRows=computed(()=>rowVirt.value.getVirtualItems())
const vCols=computed(()=>colVirt.value.getVirtualItems())
const totW =computed(()=>colVirt.value.getTotalSize())
const totH =computed(()=>rowVirt.value.getTotalSize())
</script>
<template>
  <div ref="parentRef" style="height:400px;width:800px;overflow:auto;">
    <div :style="{ height:`${totH}px`, width:`${totW}px`, position:'relative' }">
      <div v-for="vr in vRows" :key="vr.key"
           :style="{ position:'absolute',top:0,
                     transform:`translateY(${vr.start}px)`,width:'100%' }">
        <div v-for="vc in vCols" :key="vc.key"
             :style="{ position:'absolute',left:0,
                       transform:`translateX(${vc.start}px)`,
                       width:`${vc.size}px`,height:`${vr.size}px` }">
          Cell ({{vr.index}},{{vc.index}})
        <;
      <;
    <;
  <;
</template>