Skip to content

Commit 827b098

Browse files
committedFeb 4, 2025·
docs: virtualizer tbody from onchange
1 parent 9e6987d commit 827b098

File tree

2 files changed

+12
-3
lines changed
  • examples/react
    • virtualized-columns-experimental/src
    • virtualized-rows-experimental/src

2 files changed

+12
-3
lines changed
 

‎examples/react/virtualized-columns-experimental/src/main.tsx

+10-3
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ function App() {
3737
return () => clearInterval(interval)
3838
}, [refreshData])
3939

40+
// The table does not live in the same scope as the virtualizers
4041
const table = useReactTable({
4142
data,
4243
columns,
@@ -83,21 +84,23 @@ function TableContainer({ table }: TableContainerProps) {
8384
horizontal: true,
8485
overscan: 3, //how many columns to render on each side off screen each way (adjust this for performance)
8586
onChange: instance => {
87+
// requestAnimationFrame(() => {
8688
const virtualColumns = instance.getVirtualItems()
8789
// different virtualization strategy for columns - instead of absolute and translateY, we add empty columns to the left and right
8890
const virtualPaddingLeft = virtualColumns[0]?.start ?? 0
8991
const virtualPaddingRight =
9092
instance.getTotalSize() -
9193
(virtualColumns[virtualColumns.length - 1]?.end ?? 0)
9294

93-
document.documentElement.style.setProperty(
95+
tableContainerRef.current?.style.setProperty(
9496
'--virtual-padding-left',
9597
`${virtualPaddingLeft}px`
9698
)
97-
document.documentElement.style.setProperty(
99+
tableContainerRef.current?.style.setProperty(
98100
'--virtual-padding-right',
99101
`${virtualPaddingRight}px`
100102
)
103+
// })
101104
},
102105
})
103106

@@ -229,6 +232,7 @@ function TableBody({
229232
table,
230233
tableContainerRef,
231234
}: TableBodyProps) {
235+
const tableBodyRef = React.useRef<HTMLTableSectionElement>(null)
232236
const rowRefsMap = React.useRef<Map<number, HTMLTableRowElement>>(new Map())
233237

234238
const { rows } = table.getRowModel()
@@ -246,11 +250,14 @@ function TableBody({
246250
: undefined,
247251
overscan: 5,
248252
onChange: instance => {
253+
// requestAnimationFrame(() => {
254+
tableBodyRef.current!.style.height = `${instance.getTotalSize()}px`
249255
instance.getVirtualItems().forEach(virtualRow => {
250256
const rowRef = rowRefsMap.current.get(virtualRow.index)
251257
if (!rowRef) return
252258
rowRef.style.transform = `translateY(${virtualRow.start}px)`
253259
})
260+
// })
254261
},
255262
})
256263

@@ -262,9 +269,9 @@ function TableBody({
262269

263270
return (
264271
<tbody
272+
ref={tableBodyRef}
265273
style={{
266274
display: 'grid',
267-
height: `${rowVirtualizer.getTotalSize()}px`, //tells scrollbar how big the table is
268275
position: 'relative', //needed for absolute positioning of rows
269276
}}
270277
>

‎examples/react/virtualized-rows-experimental/src/main.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -189,11 +189,13 @@ function TableBodyWrapper({ table, tableContainerRef }: TableBodyWrapperProps) {
189189
: undefined,
190190
overscan: 5,
191191
onChange: instance => {
192+
// requestAnimationFrame(() => {
192193
instance.getVirtualItems().forEach(virtualRow => {
193194
const rowRef = rowRefsMap.current.get(virtualRow.index)
194195
if (!rowRef) return
195196
rowRef.style.transform = `translateY(${virtualRow.start}px)`
196197
})
198+
// })
197199
},
198200
})
199201

0 commit comments

Comments
 (0)
Please sign in to comment.