@@ -37,6 +37,7 @@ function App() {
37
37
return ( ) => clearInterval ( interval )
38
38
} , [ refreshData ] )
39
39
40
+ // The table does not live in the same scope as the virtualizers
40
41
const table = useReactTable ( {
41
42
data,
42
43
columns,
@@ -83,21 +84,23 @@ function TableContainer({ table }: TableContainerProps) {
83
84
horizontal : true ,
84
85
overscan : 3 , //how many columns to render on each side off screen each way (adjust this for performance)
85
86
onChange : instance => {
87
+ // requestAnimationFrame(() => {
86
88
const virtualColumns = instance . getVirtualItems ( )
87
89
// different virtualization strategy for columns - instead of absolute and translateY, we add empty columns to the left and right
88
90
const virtualPaddingLeft = virtualColumns [ 0 ] ?. start ?? 0
89
91
const virtualPaddingRight =
90
92
instance . getTotalSize ( ) -
91
93
( virtualColumns [ virtualColumns . length - 1 ] ?. end ?? 0 )
92
94
93
- document . documentElement . style . setProperty (
95
+ tableContainerRef . current ? .style . setProperty (
94
96
'--virtual-padding-left' ,
95
97
`${ virtualPaddingLeft } px`
96
98
)
97
- document . documentElement . style . setProperty (
99
+ tableContainerRef . current ? .style . setProperty (
98
100
'--virtual-padding-right' ,
99
101
`${ virtualPaddingRight } px`
100
102
)
103
+ // })
101
104
} ,
102
105
} )
103
106
@@ -229,6 +232,7 @@ function TableBody({
229
232
table,
230
233
tableContainerRef,
231
234
} : TableBodyProps ) {
235
+ const tableBodyRef = React . useRef < HTMLTableSectionElement > ( null )
232
236
const rowRefsMap = React . useRef < Map < number , HTMLTableRowElement > > ( new Map ( ) )
233
237
234
238
const { rows } = table . getRowModel ( )
@@ -246,11 +250,14 @@ function TableBody({
246
250
: undefined ,
247
251
overscan : 5 ,
248
252
onChange : instance => {
253
+ // requestAnimationFrame(() => {
254
+ tableBodyRef . current ! . style . height = `${ instance . getTotalSize ( ) } px`
249
255
instance . getVirtualItems ( ) . forEach ( virtualRow => {
250
256
const rowRef = rowRefsMap . current . get ( virtualRow . index )
251
257
if ( ! rowRef ) return
252
258
rowRef . style . transform = `translateY(${ virtualRow . start } px)`
253
259
} )
260
+ // })
254
261
} ,
255
262
} )
256
263
@@ -262,9 +269,9 @@ function TableBody({
262
269
263
270
return (
264
271
< tbody
272
+ ref = { tableBodyRef }
265
273
style = { {
266
274
display : 'grid' ,
267
- height : `${ rowVirtualizer . getTotalSize ( ) } px` , //tells scrollbar how big the table is
268
275
position : 'relative' , //needed for absolute positioning of rows
269
276
} }
270
277
>
0 commit comments