Demo - FlexGrid

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<div class="container">
  <div id="gridDefault">
  </div>
  <div id="popup">
    <div style="padding:20px;">
      <p>
        ID: {id}        
      </p>
      <p>
        Country: {country}
      </p>
      <p>
        Active: {active}
      </p>
      <p>
        <button class="wj-hide-ok">
          OK
        </button>
      </p>
    </div>
  </div>
</div>

CSS

.wj-flexgrid {
  max-height: 250px;
  margin-bottom: 12px;
}
.header {
  display: inline-block;
  width: 150px;
  text-align: right;
  font-weight: normal;
}
body{
  margin: 50px;
}

JavaScript

onload = function() {

  // create some random data
  var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
    data = [];
  for (var i = 0; i < 200; i++) {
    data.push({
      id: i,
      country: countries[i % countries.length],
      active: i % 5 != 0,
      downloads: Math.round(Math.random() * 200000),
      sales: Math.random() * 100000,
      expenses: Math.random() * 50000
    });
  }

  // default grid
  var gridDefault = new wijmo.grid.FlexGrid('#gridDefault', {
    itemsSource: data,
    itemFormatter:function(panel,r,c,cell){
    	if(panel.cellType==1 && panel.columns[c].binding=="country"){
      	cell.innerHTML =cell.innerText+"<button>info</button>";
      }
    }
  });
 var popup = new wijmo.input.Popup("#popup");
 var content =popup.content.innerHTML;
 popup.hideTrigger="None"; 
 gridDefault.hostElement.addEventListener("mouseover",function(e){
 	var ht= gridDefault.hitTest(e);  
  if(e.target.tagName=="BUTTON" && ht.cellType==1){
  	var item = gridDefault.rows[ht.row].dataItem;    
    	popup.owner=e.target;  popup.content.innerHTML=wijmo.format(content,item);
    	popup.show();
  }
 });
 
  
}