JavaScript
document.addEventListener("DOMContentLoaded", function() {
var grid = new FancyGrid({
renderTo: 'container',
width: 800,
height: 400,
data: data,
selModel: 'rows',
tbar: [{
text: 'Export to Excel',
handler: function() {
grid.exportToExcel({
all: true,
header: true,
ignoreRender: true
});
}
}],
theme: 'extra-gray',
exporter: true,
defaults: {
type: 'string',
width: 100,
filter: {
header: true
},
sortable: true,
resizable: true
},
paging: true,
columns: [{
type: 'select'
}, {
index: 'id',
title: 'Id',
width: 50,
type: 'number',
exportable: false
}, {
index: 'company',
title: 'Company'
}, {
index: 'name',
title: 'Name',
exportFn: function(o) {
o.value = o.data.name + ' ' + o.data.surname;
return o;
},
render: function(o) {
o.value = '<div>' + o.value + '</div>';
return o;
}
}, {
index: 'surname',
exportable: false,
title: 'Sur Name'
}, {
index: 'age',
title: 'Age',
type: 'number'
}, {
index: 'knownledge',
title: 'Knownledge',
width: 100
}, {
index: 'position',
title: 'Position',
width: 100
}]
});
});
var data = [{
id: 1,
name: 'Ted',
surname: 'Smith',
position: 'Java Developer',
email: 'ted.smith@gmail.com',
company: 'Electrical Systems',
age: 30,
married: true,
country: 'USA'
}, {
id: 2,
name: 'Ed',
surname: 'Johnson',
position: 'C/C++ Market Data Developer',
email: 'ed.johnson@gmail.com',
company: 'Energy and Oil',
age: 35,
married: true,
country: 'Canada'
}, {
id: 3,
name: 'Sam',
surname: 'Williams',
position: 'Technical Analyst',
email: 'sam.williams@gmail.com',
company: 'Airbus',
age: 38,
married: true,
country: 'England'
}, {
...