docs: virtualizer tbody from onchange

TanStack · Feb 4, 2025 · 827b098 · 827b098
1 parent 9e6987d
commit 827b098
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/examples/react/virtualized-columns-experimental/src/main.tsx b/examples/react/virtualized-columns-experimental/src/main.tsx
@@ -37,6 +37,7 @@ function App() {
     return () => clearInterval(interval)
   }, [refreshData])
 
+  // The table does not live in the same scope as the virtualizers
   const table = useReactTable({
     data,
     columns,
@@ -83,21 +84,23 @@ function TableContainer({ table }: TableContainerProps) {
     horizontal: true,
     overscan: 3, //how many columns to render on each side off screen each way (adjust this for performance)
     onChange: instance => {
+      // requestAnimationFrame(() => {
       const virtualColumns = instance.getVirtualItems()
       // different virtualization strategy for columns - instead of absolute and translateY, we add empty columns to the left and right
       const virtualPaddingLeft = virtualColumns[0]?.start ?? 0
       const virtualPaddingRight =
         instance.getTotalSize() -
         (virtualColumns[virtualColumns.length - 1]?.end ?? 0)
 
-      document.documentElement.style.setProperty(
+      tableContainerRef.current?.style.setProperty(
         '--virtual-padding-left',
         `${virtualPaddingLeft}px`
       )
-      document.documentElement.style.setProperty(
+      tableContainerRef.current?.style.setProperty(
         '--virtual-padding-right',
         `${virtualPaddingRight}px`
       )
+      // })
     },
   })
 
@@ -229,6 +232,7 @@ function TableBody({
   table,
   tableContainerRef,
 }: TableBodyProps) {
+  const tableBodyRef = React.useRef<HTMLTableSectionElement>(null)
   const rowRefsMap = React.useRef<Map<number, HTMLTableRowElement>>(new Map())
 
   const { rows } = table.getRowModel()
@@ -246,11 +250,14 @@ function TableBody({
         : undefined,
     overscan: 5,
     onChange: instance => {
+      // requestAnimationFrame(() => {
+      tableBodyRef.current!.style.height = `${instance.getTotalSize()}px`
       instance.getVirtualItems().forEach(virtualRow => {
         const rowRef = rowRefsMap.current.get(virtualRow.index)
         if (!rowRef) return
         rowRef.style.transform = `translateY(${virtualRow.start}px)`
       })
+      // })
     },
   })
 
@@ -262,9 +269,9 @@ function TableBody({
 
   return (
     <tbody
+      ref={tableBodyRef}
       style={{
         display: 'grid',
-        height: `${rowVirtualizer.getTotalSize()}px`, //tells scrollbar how big the table is
         position: 'relative', //needed for absolute positioning of rows
       }}
     >

diff --git a/examples/react/virtualized-rows-experimental/src/main.tsx b/examples/react/virtualized-rows-experimental/src/main.tsx
@@ -189,11 +189,13 @@ function TableBodyWrapper({ table, tableContainerRef }: TableBodyWrapperProps) {
         : undefined,
     overscan: 5,
     onChange: instance => {
+      // requestAnimationFrame(() => {
       instance.getVirtualItems().forEach(virtualRow => {
         const rowRef = rowRefsMap.current.get(virtualRow.index)
         if (!rowRef) return
         rowRef.style.transform = `translateY(${virtualRow.start}px)`
       })
+      // })
     },
   })