React-virtualized: Support for detecting what range of results are displayed by the list

[soneymathew]

Thank you for this awesome set of Components ❤️.
I have the following feature request, "Support for detecting what range of results are displayed by the list"

Scenario

I am using the components at the moment to render a large finite list. I have a user base that is used to pagination and they are comfortable with how it helps them orient themselves on what they are viewing, the selected page let's them know where they are within the list.

In case of an infinite List displaying a large finite list I understand that I can display them the total count and the Scroll bar position helps them orient themselves on the relative position in the list,

In order to address the change aversion, I want to be able to derive currentPageNumber out of the visible items in the List

<ItemListPageInfo>{currentPageNumber} of {this.props.itemList.total}</ItemListPageInfo>

Code example

Here is the complete code relevant to this for context.

<ItemListContainer>
    <InfiniteScrollWrapper>
        <InfiniteLoader
            isRowLoaded={this.isRowLoaded}
            loadMoreRows={this.loadMoreRows}
            rowCount={this.props.itemList.total}
            minimumBatchSize={100}
            threshold={10}
        >
            {({ onRowsRendered, registerChild }) => (
                <AutoSizer disableWidth>
                    {({ height }) => (
                        <List
                            ref={registerChild}
                            height={height}
                            onRowsRendered={onRowsRendered}
                            rowCount={this.props.itemList.total}
                            estimatedRowSize={92}
                            noRowsRenderer={this.noRowsRenderer}
                            overscanRowCount={10}
                            rowHeight={92}
                            rowRenderer={this.rowRenderer}
                            width={256}
                        />
                    )}
                </AutoSizer>
            )}
        </InfiniteLoader>
    </InfiniteScrollWrapper>
    <ItemListFooter>
        <ItemCreateButton>+ Create Item</ItemCreateButton>
        <ItemListPageInfo>{currentPageNumber} of {this.props.itemList.total}</ItemListPageInfo>
    </ItemListFooter>
</ItemListContainer>

Interface suggestion

Add a new public method for List component

getVisibleItemsInfo({ excludePartiallyVisibleItems: ?boolean}) which will provide information about the currently displayed visible Items
Return Information {startIndex:number, endIndex:number}
Which can be used to render information to the user like

• Viewing items 10 to 20
• 10 of 20123

[tiffon]

This would be a handy API extension.

It would allow folks to implement page-down and scroll-to-next functionality, where "next" is arbitrarily defined (could be the next search result, etc).

The returned value might end up indicating columns, as well, for non-lists:

{
  endColumnIndex: number,
  endRowIndex: number,
  startColumnIndex: number,
  startRowIndex: number,
}

And, adding the following data points would preempt the need for two calls to getOffsetForCell(...):

{
  clientHeight: number,
  clientWidth: number,
  scrollLeft: number,
  scrollTop: number,
}

@bvaughn — Awesome work! RV is a tour de force :tada:

[bvaughn]

Why would a public method be needed? You're already using onRowsRendered, which should have all of the info you need? (If you need to access that later, you could store it in state or as instance variables)

[bvaughn]

(Thanks Tiffon)

[tiffon]

Great point. And, it looks like Grid has:

onSectionRendered({
  columnOverscanStartIndex: number,
  columnOverscanStopIndex: number,
  columnStartIndex: number,
  columnStopIndex: number,
  rowOverscanStartIndex: number,
  rowOverscanStopIndex: number,
  rowStartIndex: number,
  rowStopIndex: number
})

onScroll({
  clientHeight: number,
  clientWidth: number,
  scrollHeight: number,
  scrollLeft: number,
  scrollTop: number,
 scrollWidth: number
})

Live and learn.

[bvaughn]

Yup yup 😄

[bvaughn]

I think this issue can be closed since there's already a working solution. Let's keep talking (here) if you disagree though or if I've misunderstood anything.

[soneymathew]

Ah my bad I didn't think that was an API, gotta read the code better ☹️
thanks a lot !

So wrap the function

    onRowsRendered={wrap(
        onRowsRendered,
        this.wrappedOnRowsRendered,
    )}

Sniff for changes to calculate page number

    wrappedOnRowsRendered = (onRowsRendered, ref) => {
        const { startIndex, stopIndex } = ref;
        console.log(
            `StartIndex: ${startIndex} - StopIndex: ${stopIndex}`,
        );
        // put it in the state or calculate pagenumber here
        return onRowsRendered(ref);
    };

[k-mada]

@soneymathew Where does the wrap function you use in the onRowsRendered attribute? Is that something you wrote? I'm also trying to do some calculations during the onRowsRendered event.

[soneymathew]

@k-mada https://lodash.com/docs/4.17.10#wrap