How to implement infinite scrolling in blueprintjs table

Question

Has anyone implemented infinite scrolling in BlueprintJS table ?

My requirement is to fetch the table date from an api as the user scrolls the table.I have tried with onCompleteRender props of BlueprintJS table but it does not meet my requirement as all pages are fetched in a single go.
What i have tried is

  <div>
                {this.props.spiders.spiders.length !==0 ?
                <Table numRows={this.props.spiders.spiders.length} defaultRowHeight={45} defaultColumnWidth={180} className="bp3-dark tableheight" onCompleteRender={this.scroll} enableRowHeader={false}>
                    <Column name="Name" cellRenderer={cellRenderer} />
                    <Column name="Developer" cellRenderer={cellRenderer}  />
                    <Column name="Status"  cellRenderer={cellRenderer} />
                    <Column name="Workers" cellRenderer={cellRenderer}  />
                    <Column name="Customer"  cellRenderer={cellRenderer} />
                    <Column name="Last Run"  cellRenderer={cellRenderer} />
                    <Column name="Proxy" cellRenderer={cellRenderer}  />
                </Table> :''}
  </div>

My scroll method is

scroll = () =>{
       if(this.props.spiders.next!=null)
       {
           this.props.spiders.page = this.props.spiders.page + 1;
           this.props.pagination()

       }
    }

score 0 · Accepted Answer · answered Sep 16 '18 at 08:31

We can use the onWheel event to listen for scroll events, then check if we're near the bottom of the element to load the next page.It can be implemented as

  <div className="spiderList" id="spidertable" onWheel={this.scrolling} ref="spiders" >
                {this.props.spiders.spiders.length !== 0 ?
                    <Table className="bp3-dark" numRows={this.props.spiders.spiders.length} defaultRowHeight={45} defaultColumnWidth={180} enableRowHeader={false} >
                        <Column name="Name" cellRenderer={cellRenderer} />
                        <Column name="Developer" cellRenderer={cellRenderer} />
                        <Column name="Status" cellRenderer={cellRenderer} />
                        <Column name="Workers" cellRenderer={cellRenderer} />
                        <Column name="Customer" cellRenderer={cellRenderer} />
                        <Column name="Last Run" cellRenderer={cellRenderer} />
                        <Column name="Proxy" cellRenderer={cellRenderer} />
                    </Table> : ''}
            </div>

The scroll handler need to check whether the bottom of the div has reached ,this can be done using

 scrolling() {
        const table = document.getElementById('spidertable')
        if (this.isBottom(table)) {
            if (this.props.spiders.next != null && this.props.loading === false) {
                this.props.spiders.page = this.props.spiders.page + 1;
                //call the api to fetch more table pages
            }
        }
    }

We can detect whether users has scrolled to the bottom of the table using the following method

 isBottom(el) {
        return el.getBoundingClientRect().bottom <= window.innerHeight;
    }

How to implement infinite scrolling in blueprintjs table

1 Answers1