I have a table with a body size fixed as explained in the Material UI. I would like to listen to the scroll event of the table in order to load more rows.

Which is the best approach to listen to this scroll?

I have a table with a body size fixed as explained in the Material UI. I would like to listen to the scroll event of the table in order to load more rows.

Which is the best approach to listen to this scroll?

• javascript
• html
• css
• reactjs
• material-ui

Share Improve this question Follow asked Nov 28, 2016 at 19:39 juan garciajuan garcia 1,52633 gold badges2727 silver badges5959 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Tried the first solution which didn't work with my implementation.

I got this working using [email protected] and [email protected]:

Create a table element and set the ref to a name:

<Table>
    ...
    <TableBody ref="table-body">
        ...
    </TableBody>
</Table>

In ponentDidMount, find the DOMNode using ReactDOM.findDOMNode:

ponentDidMount() {
    let tableBodyNode = ReactDOM.findDOMNode(this.refs["table-body"]).parentNode.parentNode;

    tableBodyNode.addEventListener('scroll', (e) => {
        console.log(e);
    });
}

This will give you the scroll event of the table.

This is not straightforward and perhaps material-ui's Table is not the best suited for your requirements. You may want to take a look at some infinite-scrolling ponents, like react-infinite or react-list.

That being said, I experimented a bit and came up with this method of intercepting the scroll event in material-ui's TableBody.

First, capture a reference to the scrollable div that your table's body is contained in (its grandparent element in this case):

<Table height={200}>
  ...
  <TableBody
    ref={ref => { this.viewport = ReactDOM.findDOMNode(ref).parentNode.parentNode; } }>
  ...

then, in ponentDidMount(), add an event listener for the onscroll event to the scrollable div:

ponentDidMount() {
  this.viewport.addEventListener('scroll', (e) => {
    console.log(e);
  });
}