var grid = new tui.Grid({
el: $('#grid'),
scrollX: false,
bodyHeight: 300,
rowHeaders: ['rowNum'],
columnOptions: {
width: 100
},
columns: [
{
title: 'User ID',
name: 'c1',
align: 'center',
editOptions: {
type: 'text'
}
},
{
title: 'Score',
name: 'c2',
className: 'clickable',
editOptions: {
type: 'text'
}
},
{
title: 'Item Count',
name: 'c3',
editOptions: {
type: 'text'
}
}
],
summary: {
height: 50,
position: 'bottom', // or 'top'
columnContent: {
c2: {
template: function(valueMap) {
return 'MAX: ' + valueMap.max + '<br>MIN: ' + valueMap.min;
}
},
c3: {
template: function(valueMap) {
return 'TOTAL: ' + valueMap.sum + '<br>AVG: ' + valueMap.avg.toFixed(2);
}
}
}
}
});
var gridData = [];
(function() {
_.times(120, function(number) {
gridData.push({
c1: 'User' + (number + 1),
c2: ((number + 5) % 8) * 100 + number,
c3: ((number + 3) % 7) * 60
});
});
})();
grid.setData(gridData);