JavaScript
document.addEventListener("DOMContentLoaded", () => {
new Fancy.Grid({
title: {
text: 'Title',
style: {
'color': '#515151',
'background-color': 'white',
'text-align': 'center'
}
},
renderTo: 'container',
width: 450,
height: 400,
selModel: 'cell',
data: {
fields: ['name', 'surname', 'position', 'email', 'company', 'age', 'knowledge'],
items: data
},
defaults: {
type: 'string',
ellipsis: true,
width: 100
},
columns: [{
index: 'company',
title: 'Company'
}, {
index: 'name',
title: 'Name'
}, {
index: 'surname',
title: 'Sur Name'
}, {
index: 'age',
title: 'Age',
width: 50,
type: 'number'
}]
});
});
var data = [
['Ted', 'Smith', 'Java Developer', 'ted.smith@gmail.com', 'Electrical Systems', 30, 'Java, Ruby'],
['Ed', 'Johnson', 'C/C++ Market Data Developer', 'ed.johnson@gmail.com', 'Energy and Oil', 35, 'C++'],
['Sam', 'Williams', 'Technical Analyst', 'sam.williams@gmail.com', 'Airbus', 38, ''],
['Alexander', 'Brown', 'Project Manager', 'alexander.brown@gmail.com', 'Renault', 24, ''],
['Nicholas', 'Miller', 'Senior Software Engineer', 'nicholas.miller@gmail.com', 'Adobe', 33, 'Unix, C/C++'],
['Andrew', 'Thompson', 'Agile Project Manager', 'andrew.thompson@gmail.com', 'Google', 28, ''],
['Ryan', 'Walker', 'Application Support Engineer', 'ryan.walker@gmail.com', 'Siemens', 39, 'ActionScript'],
['John', 'Scott', 'Flex Developer', 'john.scott@gmail.com', 'Cargo', 45, 'Flex'],
['James', 'Phillips', 'Senior C++/C# Developer', 'james.phillips@gmail.com', 'Pro bugs', 30, 'C/C++, Unix'],
['Brian', 'Edwards', 'UNIX/C++ Developer', 'brian.edwards@gmail.com', 'IT Consultant', 23, 'C/C++ Unix'],
['Jack', 'Richardson', 'Ruby Developer', 'jack.richardson@gmail.com', 'Europe IT', 24, 'Ruby'],
['Alex', 'Howard', 'CSS3/HTML5 Developer', 'alex.howard@gmail.com',...