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>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.filter.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.sheet.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.xlsx.min.js"></script>
<div class="container">

  <h1>
    FlexSheet
  </h1>
  
<div id="theSheet"></div>

</div>

CSS

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

JavaScript

onload = function() {  
  let flexSheet=new wijmo.grid.sheet.FlexSheet('#theSheet');
  flexSheet.addBoundSheet('sheet',getData(10));
}

function getCbData(){
  return 'US,Germany,UK,Japan,Italy,Greece'.split(',');
}

function getData(count){
  // create some random data
  var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
    data = [];
  for (var i = 0; i < count; i++) {
    var condition=Boolean(Math.floor(Math.random()+.5));
    data.push({
      col1: Math.random() * 500,
      col2: Math.random() * 500,
      col3: Math.random() * 500,
      id: i,
      country: countries[i % countries.length],
      sales: Math.random()*10000,
      checked: condition
    });
  }
  return data;
}