Demo - Virtualization

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<div class="container">
  <div id="theGrid"></div>
  <p>
    _heightBrowser: <span id='_heightBrowser'></span>
  </p>
</div>

CSS

.wj-flexgrid {
  max-height: 250px; 
  margin:10px;
 }
 #rowCount, #cellCount {
   font-weight: bold;
 }
 body {
   margin-bottom: 24px;
   display:flex;
   flex-direction: column;
   height: 100%;
 }
 
 html {
   height: 100%;
 }

JavaScript

onload = function() {

	// start with a small data set
	var data = getData(2 * 1000 * 1000);
  
  // initialize the grid
  var _heightBrowser = document.getElementById('_heightBrowser');
	var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
  	itemsSource: data,
    updatedView: function(s, e) {
			_heightBrowser.textContent = theGrid._heightBrowser;
		}
  });

	// get an array with random data
	function getData(cnt, start) {
    var data = [];
		var countries = 'USA,Germany,UK,Japan,Italy,Greece'.split(',');
    if (!start) start = 0;
    for (var i = 0; i < cnt; i++) {
    	data.push({
				id: i + start,
        country: countries[i % countries.length],
        date: 1,
        amount: 1,
        active: i % 4 === 0
			});
		}
    return data;
	}
}