Wijmo FlexSheet

by Joel Parks

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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.grid.sheet.min.js"></script>
<div class="container">

 <div id="flexSheet" style="height:350px;"></div>
 </div>

JavaScript

var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
    data = [];
for (var i = 0; i < countries.length+3; i++) {
    data.push({
        country: countries[i%countries.length],
        downloads: Math.round(Math.random() * 20000),
        sales: Math.round(Math.random() * 10000),
        expenses: Math.round(Math.random() * 5000),
        total: "=SUM(B"+(i+2) +":D"+(i+2)+")"
    });
}

var columns = [
		{'name': 'country', 'header': 'Country', 'binding': 'country' },
    {'name': 'downloads', 'header': 'Downloads', 'binding': 'downloads' },
    {'name': 'sales', 'header': 'Sales', 'binding': 'sales' },
    {'name': 'expenses', 'header': 'Expenses', 'binding': 'expenses' },
    {'name': 'total', 'header': 'Totals', 'binding': 'total'}
  ];

var cv = new wijmo.collections.CollectionView(data);
cv.sortConverter = function (sd, item, value){
	if(sd.property == 'total'){
  	console.log(sd);
  }
}

var div = document.createElement('test-div');
var grid = new wijmo.grid.FlexGrid(div, {
	autoGenerateColumns: false,
	itemsSource: cv,
  columns: columns
})

// create the FlexSheet control
var flexSheet = new wijmo.grid.sheet.FlexSheet('#flexSheet');
flexSheet.addBoundSheet('Bound Sheet', cv, 0, grid);