JavaScript
document.addEventListener("DOMContentLoaded", function() {
var renderChangesFn = function(o) {
if (o.value < 0) {
o.style = {
color: '#E46B67'
};
} else {
o.style = {
color: '#65AE6E'
};
}
o.value = o.value + '%';
return o;
};
new FancyGrid({
theme: 'extra-gray',
renderTo: 'container',
height: 450,
width: 700,
trackOver: true,
selModel: {
type: 'rows',
continueEditOnEnter: 'right',
activeCell: true
},
data: {
items: data,
fields: ['name', 'price', 'change', 'pctChange', 'lastChange']
},
defaults: {
type: 'number',
width: 100,
editable: true,
resizable: true,
sortable: true,
draggable: true,
menu: true
},
columns: [{
title: 'Company',
index: 'name',
type: 'string',
width: 200,
}, {
title: 'Stock Price',
columns: [{
title: 'Price',
index: 'price'
}, {
title: 'Change',
index: 'change',
render: renderChangesFn
}, {
title: '% Change',
index: 'pctChange',
render: renderChangesFn
}]
}, {
title: 'Last Updated',
index: 'lastChange',
type: 'string',
width: 97
}]
});
});
var data = [
["3m Co", 71.72, 0.02, 0.03, "9/1 12:01am"],
["Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:02am"],
["Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:03am"],
["American Express Company", 52.55, 0.01, 0.02, "9/1 12:01am"],
["American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am"],
["AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:03am"],
["Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:05am"],
["Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:01am"],
["Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am"],
["E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am"],
["Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am"],
...