FlexGrid with Simpler Styling

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://test-9c0be.firebaseapp.com/wijmo/styles/wijmo.css">
<script src="https://test-9c0be.firebaseapp.com/wijmo/controls/wijmo.js"></script>
<script src="https://test-9c0be.firebaseapp.com/wijmo/controls/wijmo.input.js"></script>
<script src="https://test-9c0be.firebaseapp.com/wijmo/controls/wijmo.grid.js"></script>
<script src="https://test-9c0be.firebaseapp.com/wijmo/controls/wijmo.grid.filter.js"></script>
<script src="https://test-9c0be.firebaseapp.com/wijmo/controls/wijmo.olap.js"></script>
<div class="container">
  <h1>
    FlexGrid with Simpler Styling
  </h1>
  <p>
    This grid assigns some CSS classes to specific columns.
    The custom styles do not interfere with selection.
    The grid sets the <b>showAlternatingRows</b> property to 
    false so there's no issue with alternating rows:
  </p>
  <div id="theGrid"></div>
  <p>
    This grid does a similar thing but it does show alternating
    rows. To make the alternating rows use the selected style,
    we have to use slightly stronger CSS selectors:
  </p>
  
  <div id="theGrid2"></div>
</div>

CSS

.wj-flexgrid {
  max-height: 300px;
}

.red {
  background: red;
  color: white;
}

.green {
  background: green;
  color: white;
}

.blue {
  background: blue;
  color: white;
}

.redStrong.wj-cell {
  background: red;
  color: white;
}

.greenStrong.wj-cell {
  background: green;
  color: white;
}

.blueStrong.wj-cell {
  background: blue;
  color: white;
}

body {
  margin-bottom: 48pt;
}

JavaScript

onload = function() {

  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    showAlternatingRows: false,
    autoGenerateColumns: false,
    columns: [
    	{ binding: 'id'},
    	{ binding: 'country'},
    	{ binding: 'downloads', cssClass: 'blue'},
    	{ binding: 'sales', cssClass: 'green'},
    	{ binding: 'expenses', cssClass: 'red'},
    ],
    itemsSource: getData()
  });

  var theGrid2 = new wijmo.grid.FlexGrid('#theGrid2', {
    autoGenerateColumns: false,
    columns: [
    	{ binding: 'id'},
    	{ binding: 'country'},
    	{ binding: 'downloads', cssClass: 'blueStrong'},
    	{ binding: 'sales', cssClass: 'greenStrong'},
    	{ binding: 'expenses', cssClass: 'redStrong'},
    ],
    itemsSource: getData()
  });

  function getData() {
    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
      });
    }
    return data;
  }
}