scrollableTarget not working

Hi, i was having trouble while using infinite scrolling, because data was being loaded when my browsers main window scrollbar scrolled. So i tried using scrollableTarget to fix the problem, but when i tried using it the loader keeps displaying and no data is fetched. Code looks like this:

<Container id="divID">
        <InfiniteScroll
          dataLength={this.state.logs.length}
          next={this.fetchMoreData}
          hasMore={true}
          loader={<Loader />}
          scrollableTarget="divID"
        >
          <Table striped>
            <thead>
              <tr>
                <th>...</th>
                <th>...</th>
                <th>...</th>
              </tr>
            </thead>
            <tbody>
              {this.state.logs.map(event => (
                <tr key={event.id}>
                  <td>....</td>
                  <td>....</td>
                  <td>....</td>
                </tr>
                    ))}
            </tbody>
          </Table>
        </InfiniteScroll>
</Container>

Here you can see the id of Container

I Also tried using scrollableTarget=document.getElementById("divID") and it now renders the content but it only loads more data when the main window scrollbar moves not when the one in my Table element does.

[lsvargas]

@ankeetmaini sorry if i didnt make myself clear, I want next to be called when my Table’s scrollbar reaches the end, but what is actually happening in the code above is that next is called when the main window scroll moves.

[aakin03]

Hi, I know this issue has been closed, but are we still able to get a response? I’m having a similar issue as many of those previously. I’ve set up InfinteScroll to wrap around a Table. InfinteScroll & Table are located inside of a TableContainer component. The TableContainer has an id which I used as the scrollableTarget in InfinteScroll. In my main page, my table scrolls as expected with more data loading when I pass the threshold. However, when I try to use my table in a Dialog, InfinteScroll no longer works. When I scroll, I’m not reaching my next function. How can InfinteScroll work while on a main window, but not when in a Dialog?