Demo - DataMaps

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>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.gauge.min.js"></script>
  <div id="theGrid">
  </div>

CSS

.wj-flexgrid {
  max-height: 200px;
  margin: 12px 0;
}

JavaScript

onload = function() {

  // create some random data
  var countries = ' ,US,Germany,UK,Japan,Sweden,Norway,Denmark'.split(',');
  var customers = [
  	{ id: 0, name: ' ', address: '' }, 
    { id: 1, name: 'Susan Smith', address: '456 Grand Ave' }, 
    { id: 2, name: 'Joan Jett', address: '789 Broad St' }, 
    { id: 3, name: 'Don Davis', address: '321 Shattuck Ave' }, 
	];
  var data = [];
  for (var i = 0; i < countries.length; i++) {
    data.push({
      id: i,
      country: countries[i],
      customer: customers[i % customers.length].id,
      active: i % 5 != 0,
      downloads: Math.round(Math.random() * 200000),
      sales: Math.random() * 100000,
      expenses: Math.random() * 50000
    });
  }

	// create customer data map
  var customerMap = new wijmo.grid.DataMap(customers, 'id', 'name');
  
  // show the data in a grid
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    showAlternatingRows: false,
    autoGenerateColumns: false,
    columns: [
      { binding: 'customer', header: 'Customer', width: '1.5*', dataMap: customerMap },
    	{ binding: 'country', header: 'Country', width: '*', dataMap: countries },
      { binding: 'downloads', header: 'Downloads', width: '*', format: 'n0' },
      { binding: 'sales', header: 'Sales', width: '*', format: 'n0' },
      { binding: 'expenses', header: 'Expenses', width: '*', format: 'n0' }
    ],
    itemsSource: data,
  });
}