From 9e6987d8fa246ede1e3c4d99fbc3ac67e36cdbf8 Mon Sep 17 00:00:00 2001
From: Kevin Van Cott <kevinvandy656@gmail.com>
Date: Mon, 3 Feb 2025 19:04:45 -0600
Subject: [PATCH] docs: exp virtual - remeasure when table state changes

---
 .../virtualized-columns-experimental/src/main.tsx    | 12 ++++++++++++
 .../react/virtualized-rows-experimental/src/main.tsx | 12 ++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/examples/react/virtualized-columns-experimental/src/main.tsx b/examples/react/virtualized-columns-experimental/src/main.tsx
index b148f30f5a..b951e73134 100644
--- a/examples/react/virtualized-columns-experimental/src/main.tsx
+++ b/examples/react/virtualized-columns-experimental/src/main.tsx
@@ -29,6 +29,14 @@ function App() {
     setData(makeData(1_000, columns))
   }, [columns])
 
+  // refresh data every 5 seconds
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      refreshData()
+    }, 5000)
+    return () => clearInterval(interval)
+  }, [refreshData])
+
   const table = useReactTable({
     data,
     columns,
@@ -246,6 +254,10 @@ function TableBody({
     },
   })
 
+  React.useLayoutEffect(() => {
+    rowVirtualizer.measure()
+  }, [table.getState()])
+
   const virtualRowIndexes = rowVirtualizer.getVirtualIndexes()
 
   return (
diff --git a/examples/react/virtualized-rows-experimental/src/main.tsx b/examples/react/virtualized-rows-experimental/src/main.tsx
index b0e271b262..2132bea714 100644
--- a/examples/react/virtualized-rows-experimental/src/main.tsx
+++ b/examples/react/virtualized-rows-experimental/src/main.tsx
@@ -70,6 +70,14 @@ function App() {
     _setData(makeData(50_000))
   }, [])
 
+  // refresh data every 5 seconds
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      refreshData()
+    }, 5000)
+    return () => clearInterval(interval)
+  }, [refreshData])
+
   const table = useReactTable({
     data,
     columns,
@@ -189,6 +197,10 @@ function TableBodyWrapper({ table, tableContainerRef }: TableBodyWrapperProps) {
     },
   })
 
+  React.useLayoutEffect(() => {
+    rowVirtualizer.measure()
+  }, [table.getState()])
+
   return (
     <TableBody
       rowRefsMap={rowRefsMap}