JavaScript
document.addEventListener("DOMContentLoaded", function() {
new FancyGrid({
title: 'Editable Columns Title*',
renderTo: 'container',
width: 450,
height: 400,
theme: 'gray',
data: data,
defaults: {
type: 'string',
width: 100,
sortable: true,
editable: true,
titleEditable: true,
resizable: true
},
columns: [{
index: 'company',
width: 105,
title: 'Company'
}, {
index: 'name',
title: 'Name'
}, {
index: 'surname',
title: 'Sur Name'
}, {
index: 'age',
width: 60,
title: 'Age',
type: 'number'
}],
footer: {
status: '* - To start edit double click on column title text'
}
});
});
var data = [{
name: 'Ted',
surname: 'Smith',
position: 'Java Developer',
email: 'ted.smith@gmail.com',
company: 'Electrical Systems',
age: 30,
knownledge: 'Java, Ruby'
},
{
name: 'Ed',
surname: 'Johnson',
position: 'C/C++ Market Data Developer',
email: 'ed.johnson@gmail.com',
company: 'Energy and Oil',
age: 35,
knownledge: 'C++'
},
{
name: 'Sam',
surname: 'Williams',
position: 'Technical Analyst',
email: 'sam.williams@gmail.com',
company: 'Airbus',
age: 38,
knownledge: ''
},
{
name: 'Alexander',
surname: 'Brown',
position: 'Project Manager',
email: 'alexander.brown@gmail.com',
company: 'Renault',
age: 24,
knownledge: ''
},
{
name: 'Nicholas',
surname: 'Miller',
position: 'Senior Software Engineer',
email: 'nicholas.miller@gmail.com',
company: 'Adobe',
age: 33,
knownledge: 'Unix, C/C++'
},
{
name: 'Andrew',
surname: 'Thompson',
position: 'Agile Project Manager',
email: 'andrew.thompson@gmail.com',
company: 'Google',
age: 28,
knownledge: ''
},
{
name: 'Ryan',
surname: 'Walker',
position: 'Application Support Engineer',
email:...