JavaScript
document.addEventListener("DOMContentLoaded", () => {
new FancyGrid({
title: 'Order Column(Numbered Rows)',
renderTo: 'container',
width: 600,
height: 500,
data: data,
selModel: 'rows',
trackOver: true,
defaults: {
type: 'string',
width: 100,
sortable: true,
resizable: true,
editable: true,
vtype: 'notempty'
},
columns: [{
type: 'order',
locked: false
}, {
type: 'order',
rightLocked: true
}, {
title: 'Name',
sortable: false,
render(o) {
o.value = `${o.data.name} ${o.data.surname}`;
return o;
}
}, {
index: 'birthday',
title: 'Birthday',
type: 'date',
width: 100
}, {
index: 'country',
title: 'Country',
type: 'combo',
data: ['USA', 'England', 'Canada', 'Germany']
}, {
index: 'position',
title: 'Position',
width: 100
}, {
index: 'hour',
type: 'currency',
title: 'Hour rate',
width: 70
}, {
index: 'active',
type: 'checkbox',
title: 'Active?',
width: 60
}, {
title: 'email',
index: 'email',
width: 150
}]
});
});
const data = [{
id: 1,
name: 'Ted',
surname: 'Smith',
email: 'ted.smith@fancygrid.com',
position: 'Java Developer',
birthday: '6/22/1953',
country: 'USA',
hour: 52,
active: true,
about: 'Likes to play on guitar.'
}, {
id: 2,
name: 'Ed',
surname: 'Johnson',
email: 'ed.johnson@fancygrid.com',
position: 'C/C++ Market Data Developer',
birthday: '9/12/1971',
country: 'England',
hour: 26,
active: true,
about: 'Proffesional persone.'
}, {
id: 3,
name: 'Sam',
surname: 'Williams',
email: 'sam.williams@fancygrid.com',
position: 'Technical Analyst',
birthday: '9/2/1973',
country: 'USA',
hour: 40,
active: true,
about: 'Dreams about travel around the world.'
}, {
id: 4,
name: 'Alexander',
surname:...