docs: exp virtual - remeasure when table state changes

TanStack · Feb 4, 2025 · 9e6987d · 9e6987d
1 parent 099e1a4
commit 9e6987d
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git 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
@@ -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}