Slickgrid :

HTML

<link rel="stylesheet" href="http://mleibman.github.io/SlickGrid/slick.grid.css">
<script src="http://mleibman.github.io/SlickGrid/slick.dataview.js"></script>
<script src="http://mleibman.github.io/SlickGrid/lib/jquery.event.drag-2.2.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.core.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.grid.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.groupitemmetadataprovider.js"></script>
<script src="http://mleibman.github.io/SlickGrid/plugins/slick.rowselectionmodel.js"></script>
<script src="http://mleibman.github.io/SlickGrid/controls/slick.pager.js"></script>
<button id='grouping'>Group</button>
<button id='clearGrouping'>Clear</button>
<br/>
<div id="myGrid" style="width:100%;height:250px;"></div>

CSS

.color_808080 {
    background: #808080;
}

JavaScript

var init = [];

for(var i = 0; i < 50; ++i){
    var column = {id: i, c1: "Text " + i, c2: i%2, c3: i == 0 ? "Scrolling deletes red background" : null};
    if(i%2 == 0){column.color = '#cccccc'}
    else {column.color = '#f8f8f8'}
    init.push(column)
}

 

(function setGrid(d){
    var grid;
    var data = d;
    
    var backgroundFormatter = function(row, cell, value, columnDef, dataContext){
          
        var contents = '<div style="background:' + dataContext.color +'">'+ (value ? value : '\n') + "</div>"; 
        return contents
    };
 
    
    var columns = [
        { id : "1", name: "C1", field : "c1", width: 30, formatter: backgroundFormatter}, 
        { id : "2", name: "C2", field : "c2", width: 30, formatter: backgroundFormatter}, 
        { id : "3", name: "C3", field : "c3",  formatter: backgroundFormatter} 
    ];
        
    var options = {
        enableCellNavigation: true,
        forceFitColumns: true,
        multiSelect: false,
        syncColumnCellResize: true
    };
   
    dataView = new Slick.Data.DataView();
    
    $('#clearGrouping').click(function () {
        dataView.setGrouping([])
    })
    $("#grouping").click(function () {
        dataView.setGrouping({
            getter: "c2",
            formatter: function (g) {
                return "C2(s): " + g.value + " <span style='color:green'>(" + g.count + " items)</span>";
            },
            aggregateCollapsed: false,
            lazyTotalsCalculation: true
            
        });
        dataView.setAggregators([new Slick.Data.Aggregators.Sum("c2")], true);
    });
    var defaultImpl = dataView.getItemMetadata
    
    var override = function(row){
        
      if(!defaultImpl(row)) {
       var item = dataView.getItem(row)
       /*
         assuming the color is stored similar to #000000 ... strip off the #
         in addition I've prefixed my css classes with 'color_'
       */
       var color = item.color ? 'color_' + item.color.substr(1,...