fix(Table): re-measure virtualized rows when expanded state toggles

Tanstack's ResizeObserver is attached to the main <tr>, but expanding
a row inserts a *sibling* <tr> that doesn't resize the main row — the
RO never fires, so the virtualizer keeps its stale un-expanded cached
height. Watch the TanStack expanded state and call
virtualizer.measureElement on every rendered row after the DOM
updates, which picks up the new combined height via the existing
expansion-aware measureElement we ship.

Also clarify the virtualize JSDoc: expansion height is added on top
of whatever the user's measureElement returns, so user callbacks
should measure the main row only (or return collapsed height if
they already account for expansion) to avoid double-counting.

Addresses CodeRabbit review feedback on nuxt#6379.

Author: claylevering

dist/runtime/components/Table.d.vue.ts

@@ -52,9 +52,14 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
     meta?: TableMeta<T>;
     /**
      * Enable virtualization for large datasets.
-     * Pass a `measureElement` function to opt into dynamic row heights — the virtualizer
-     * will measure each rendered row and automatically include the expanded row's height
-     * when `row.getIsExpanded()` is `true`.
+     *
+     * Pass a `measureElement` function to opt into dynamic row heights. The value returned by
+     * your `measureElement` is used as the height of the main row; when `row.getIsExpanded()`
+     * is `true`, the immediate next-sibling `<tr>`'s height is **added on top of** that value
+     * automatically, so your callback should measure the main row only. If your custom
+     * `measureElement` already includes the expanded region (e.g. by measuring a wrapper),
+     * return only the collapsed-row height to avoid double-counting.
+     *
      * Note: when enabled, the divider between rows, sticky and row pinning properties are not supported.
      * @see https://tanstack.com/virtual/latest/docs/api/virtualizer#options
      * @defaultValue false

dist/runtime/components/Table.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/table";
 </script>
 
 <script setup>
-import { computed, useTemplateRef, watch, toRef } from "vue";
+import { computed, nextTick, useTemplateRef, watch, toRef } from "vue";
 import { Primitive, useForwardProps } from "reka-ui";
 import { upperFirst } from "scule";
 import { defu } from "defu";
@@ -259,6 +259,21 @@ function measureRowRef(el) {
   if (!virtualizer || !el) return;
   virtualizer.value.measureElement(el);
 }
+if (virtualizer) {
+  watch(
+    () => tableApi.getState().expanded,
+    () => {
+      nextTick(() => {
+        const root = rootRef.value?.$el;
+        if (!virtualizer) return;
+        root?.querySelectorAll("[data-index]").forEach((row) => {
+          virtualizer.value.measureElement(row);
+        });
+      });
+    },
+    { deep: true }
+  );
+}
 function valueUpdater(updaterOrValue, ref) {
   ref.value = typeof updaterOrValue === "function" ? updaterOrValue(ref.value) : updaterOrValue;
 }

dist/runtime/components/Table.vue.d.ts

@@ -52,9 +52,14 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
     meta?: TableMeta<T>;
     /**
      * Enable virtualization for large datasets.
-     * Pass a `measureElement` function to opt into dynamic row heights — the virtualizer
-     * will measure each rendered row and automatically include the expanded row's height
-     * when `row.getIsExpanded()` is `true`.
+     *
+     * Pass a `measureElement` function to opt into dynamic row heights. The value returned by
+     * your `measureElement` is used as the height of the main row; when `row.getIsExpanded()`
+     * is `true`, the immediate next-sibling `<tr>`'s height is **added on top of** that value
+     * automatically, so your callback should measure the main row only. If your custom
+     * `measureElement` already includes the expanded region (e.g. by measuring a wrapper),
+     * return only the collapsed-row height to avoid double-counting.
+     *
      * Note: when enabled, the divider between rows, sticky and row pinning properties are not supported.
      * @see https://tanstack.com/virtual/latest/docs/api/virtualizer#options
      * @defaultValue false

src/runtime/components/Table.vue

@@ -99,9 +99,14 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
   meta?: TableMeta<T>
   /**
    * Enable virtualization for large datasets.
-   * Pass a `measureElement` function to opt into dynamic row heights — the virtualizer
-   * will measure each rendered row and automatically include the expanded row's height
-   * when `row.getIsExpanded()` is `true`.
+   *
+   * Pass a `measureElement` function to opt into dynamic row heights. The value returned by
+   * your `measureElement` is used as the height of the main row; when `row.getIsExpanded()`
+   * is `true`, the immediate next-sibling `<tr>`'s height is **added on top of** that value
+   * automatically, so your callback should measure the main row only. If your custom
+   * `measureElement` already includes the expanded region (e.g. by measuring a wrapper),
+   * return only the collapsed-row height to avoid double-counting.
+   *
    * Note: when enabled, the divider between rows, sticky and row pinning properties are not supported.
    * @see https://tanstack.com/virtual/latest/docs/api/virtualizer#options
    * @defaultValue false
@@ -229,7 +234,7 @@ export type TableSlots<T extends TableData = TableData> = {
 </script>
 
 <script setup lang="ts" generic="T extends TableData">
-import { computed, useTemplateRef, watch, toRef } from 'vue'
+import { computed, nextTick, useTemplateRef, watch, toRef } from 'vue'
 import { Primitive, useForwardProps } from 'reka-ui'
 import { upperFirst } from 'scule'
 import { defu } from 'defu'
@@ -467,6 +472,26 @@ function measureRowRef(el: Element | ComponentPublicInstance | null) {
   virtualizer.value.measureElement(el as Element)
 }
 
+// Re-measure rendered rows whenever the expanded state changes. Tanstack's
+// ResizeObserver is attached to the main `<tr>`, but expansion inserts a
+// *sibling* `<tr>` that doesn't resize the main row, so the RO never fires —
+// this manual re-measure keeps the virtualizer's cached heights in sync.
+if (virtualizer) {
+  watch(
+    () => tableApi.getState().expanded,
+    () => {
+      nextTick(() => {
+        const root = rootRef.value?.$el as HTMLElement | undefined
+        if (!virtualizer) return
+        root?.querySelectorAll<HTMLElement>('[data-index]').forEach((row) => {
+          virtualizer.value.measureElement(row)
+        })
+      })
+    },
+    { deep: true }
+  )
+}
+
 function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
   ref.value = typeof updaterOrValue === 'function' ? updaterOrValue(ref.value) : updaterOrValue
 }