docs: exp virtual - remeasure when table state changes

Author: KevinVandy

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 (

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}