Virtual rendering

Question

I am building datagrid from scratch. I know there are very good solution available.

I have to pay special attention to the performances of the grid. I will have a maximum of 5000 rows (with rowspans, colspans and inline editing)

I have a feature that really impresses me is the virtual rendering that is implemented in grid such a SlickGrid and DataTables.

I was wondering if someone could give me an insight on how to implement virtual rendering using Jquery / javascript.

Thanks

I think that this question should be on: http://programmers.stackexchange.com/ — Daniel Aranda, Dec 04 '13 at 22:57
Why does this question does not have it's place on StackOverflow ? — gpasse, Dec 04 '13 at 23:03
I did not said that, I said: "I think" because it seems to be more a rhetorical question, rather than a specific question. — Daniel Aranda, Dec 04 '13 at 23:25
maybe this will help [http://stackoverflow.com/a/2569488/2359055](http://stackoverflow.com/a/2569488/2359055) — Abraham Uribe, Dec 04 '13 at 23:33
I get Daniel, I asked the question in programmers.stackexchange.com — gpasse, Dec 05 '13 at 00:00

score 1 · Answer 1 · answered May 31 '18 at 00:49

I have a really good example using react, the code is quite tiny and you can do a version of it using Jquery to update the Dom.

const data = []
function createData(){
 for (let i=0;i<1000000;i++){
   data.push({name: `Row ${i}`});
  }
}
createData();

//Item class to render each of the list rows
class Item extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        return (
        <div className="item" style={{top:this.props.top,height:this.props.itemheight}}>
                {this.props.label}
        </div>)
          
    }
}


//The list component that contains the rows and manage the virtual rendering 
// using the vertical scroll position
class Vlist extends React.Component{
    constructor(props){
        super(props);
        this.numVisibleItems=Math.trunc(300 / this.props.itemheight);
        this.state={
            start:0,
            end:this.numVisibleItems         
        }
        this.containerStyle={height:data.length * this.props.itemheight}
        
        this.scollPos=this.scollPos.bind(this)
    }

    scollPos(){
        let currentIndx=Math.trunc(this.refs.viewPort.scrollTop/this.props.itemheight)
        currentIndx=currentIndx-this.numVisibleItems>=data.length?currentIndx-this.numVisibleItems:currentIndx;
        if (currentIndx!==this.state.start){
            console.log("Redraw");
            this.setState(
                this.state={
                    start:currentIndx,
                    end:currentIndx+this.numVisibleItems>=data.length ? data.length-1:currentIndx+this.numVisibleItems
                }
            )
        }
       
    }
    
    renderRows(){
        let result=[];
        for (let i=this.state.start;i<=this.state.end;i++){
            let item=data[i];
            result.push(<Item key={i} label={item.name} top={i*this.props.itemheight} itemheight={this.props.itemheight} />);
        }
        return result;
    }
    
    render(){
        return (
        <div ref="viewPort"  className="viewPort" onScroll={this.scollPos} >
            <div className="itemContainer" style={this.containerStyle}>
                {this.renderRows()}    
            </div>
        </div>)
    }

}

ReactDOM.render(<Vlist itemheight={30} />, document.querySelector("#app"))

.viewPort {
  position: relative;
  width: 510px;
  height: 300px;
  border: solid 1px;
  overflow-y: scroll;
}

.itemContainer {
  position: absolute;
  width: 500px;
  background-color: azure;
}

.item {
  position: absolute;
  background-color: beige;
  border: solid 1px;
  width: 500px;
  text-align: center;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Virtual rendering

1 Answers1

Linked