JavaScript
document.addEventListener("DOMContentLoaded", () => {
new FancyGrid({
theme: 'extra-gray',
title: 'Column types',
width: 690,
height: 400,
data: data,
defaults: {
type: 'string',
width: 100,
editable: true,
sortable: true
},
cellStylingCls: ['hidden-checkbox'],
columns: [{
index: 'id',
locked: true,
title: 'ID',
type: 'number',
editable: false,
width: 40
}, {
index: 'company',
locked: true,
title: 'Company'
}, {
index: 'name',
title: 'Name'
}, {
index: 'surname',
title: 'Sur Name'
}, {
index: 'country',
title: 'Country',
type: 'combo',
data: ['USA', 'Canada', 'England']
}, {
index: 'age',
width: 60,
title: 'Age',
type: 'number'
}, {
index: 'married',
width: 70,
title: 'Married',
type: 'checkbox',
render(o){
switch(o.data.name){
case 'Ted':
case 'Ed':
case 'Andrew':
o.cls = 'hidden-checkbox';
break;
}
return o;
}
}]
});
});
const data = [{
id: 1,
name: 'Ted',
surname: 'Smith',
position: 'Java Developer',
email: 'ted.smith@gmail.com',
company: 'Electrical Systems',
age: 30,
education: 'High School Of Cambridge',
knownledge: 'Java, Ruby',
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,
education: 'High School Of Cambridge',
knownledge: 'C++',
married: true,
country: 'Canada'
}, {
id: 3,
name: 'Sam',
surname: 'Williams',
position: 'Technical Analyst',
email: 'sam.williams@gmail.com',
company: 'Airbus',
age: 38,
education: 'High School Of Cambridge',
knownledge: '',
married: true,
country: 'England'
}, {
id: 4,
name:...