Emit an event when the last rows are visible

[dcworldwide]

I need to fire an event when the end of the row list is reached.

I hacked together the following (works in beta .14)

const rowVirtualizer = useVirtualizer({
        count: data.length,
        getScrollElement: () => tableContainerRef.current,
        estimateSize: () => rowHeight,
        overscan: 20,
        onChange: (props) => {

            const x = (props as any) as { range: { startIndex: number, endIndex: number } }

            // console.log("page onchange", x)

            if (enablePaging) {

                const { endIndex } = x?.range

                if (endIndex + 10 >= data.length) {
                    let nextPageIndex = Math.ceil(data.length / pageSize) + 1
                    nextPageDebounce.current(nextPageIndex)
                }
            }
        }
    })

Is there a better way?

I would have thought that this library would emit an event to do the above simply

[ardeora]

https://codesandbox.io/s/github/tanstack/virtual/tree/beta/examples/react/infinite-scroll?from-embed=&file=/src/main.tsx Here is the infinite loading example. This example loads more items when you reach the end of the list. Specifically look at lines 53-73

[dcworldwide]

Originally tried that solution but it doesn't suit our needs.

We don't want to track pagination state inside the table component.

We simply want to emit an event when the end of the table is scrolled to, so that upstream components can manage all paging details.

[ardeora]

I am not sure I follow.

https://codesandbox.io/s/lucid-paper-0bhvw8?file=/src/main.tsx How about this example?

[noghartt]

I tried the solution from @ardeora and works well for me.

[dcworldwide]

The example is no different in effect, to what I have implemented and have working already.

I was asking if the library emitted an event.