CODEWITHSUNDEEP
javascripthtmlcssreactjsmaterial-ui
juan garcia
juan garcia

Reputation: 1516

Material UI listen scroll on table (React)

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?

Upvotes: 2

Views: 7782

Answers (2)

Amar Krupalija
Amar Krupalija

Reputation: 183

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 componentDidMount, find the DOMNode using ReactDOM.findDOMNode:

componentDidMount() {
    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.

Upvotes: 2

Jeff McCloud
Jeff McCloud

Reputation: 5927

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 components, 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 componentDidMount(), add an event listener for the onscroll event to the scrollable div:

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

Upvotes: 1

Related Questions