JavaScript
document.addEventListener("DOMContentLoaded", function() {
new FancyGrid({
renderTo: 'container',
theme: 'gray',
height: 400,
width: 450,
data: data,
selModel: 'cell',
cellTrackOver: true,
defaults: {
type: 'string',
width: 100,
editable: true,
resizable: true,
sortable: true
},
trackOver: true,
selModel: {
type: 'rows',
memory: true
},
columns: [{
type: 'rowdrag'
},{
type: 'select'
},{
index: 'age',
title: 'Age',
width: 50,
type: 'number'
}, {
index: 'salary',
title: 'Salary',
width: 80,
type: 'number'
}, {
index: 'name',
title: 'Name'
}, {
index: 'surname',
title: 'Sur Name',
menu: 'columns'
}, {
index: 'company',
title: 'Company',
menu: 'columns'
}],
events: [{
dragrows: function(grid, rows){
console.log(grid, rows);
}
}]
});
});
var data = [{
name: 'Ted',
surname: 'Smith',
company: 'Electrical Systems',
salary: 70000.5,
age: 30
}, {
name: 'Ed',
surname: 'Johnson',
company: 'Energy and Oil',
salary: 75000.1,
age: 35
}, {
name: 'Sam',
surname: 'Williams',
company: 'Airbus',
salary: 80000.9,
age: 38
}, {
name: 'Alexander',
surname: 'Brown',
company: 'Renault',
salary: 70000,
age: 24
}, {
name: 'Nicholas',
surname: 'Miller',
company: 'Adobe',
salary: 70000,
age: 33
}, {
name: 'Andrew',
surname: 'Thompson',
company: 'Google',
salary: 80000.1,
age: 28
}, {
name: 'Ryan',
surname: 'Walker',
company: 'Siemens',
salary: 75000.8,
age: 39
}, {
name: 'John',
surname: 'Scott',
company: 'Cargo',
salary: 75000,
age: 45
}, {
name: 'James',
surname: 'Phillips',
company: 'Pro bugs',
salary: 70000,
age: 30
}, {
name: 'Brian',
surname: 'Edwards',
company: 'IT Consultant',
salary: 80000,
age: 23
}, {
name: 'Jack',
...