document.addEventListener("DOMContentLoaded", function() {
new FancyGrid({
resizable: true,
renderTo: 'container',
theme: 'gray',
width: 'fit',
height: 450,
trackOver: true,
selModel: 'rows',
data: data,
exporter: true,
defaults: {
type: 'string',
width: 75,
menu: true,
draggable: true,
resizable: true,
sortable: true
},
contextmenu: [
'copy',
'copy+',
'-',
'delete',
'-',
'export',
'-',
{
text: 'Custom',
imageCls: 'custom-menu-item-cls',
sideText: 'CUSTOM',
handler: function() {
alert('Click on custom item');
}
}
],
clicksToEdit: 1,
columnLines: false,
columns: [{
type: 'select'
}, {
text: 'Base Info',
columns: [{
title: 'Name',
index: 'name',
width: 100
}, {
title: 'SurName',
index: 'surname',
width: 100
}, {
title: 'Position',
index: 'position',
width: 100
}]
}, {
title: 'Salary',
index: 'salary',
type: 'currency'
}, {
title: 'Phone',
index: 'phone',
width: 120
}, {
title: 'Birthday',
index: 'birthday',
type: 'date',
width: 100,
format: {
read: 'Y.m.d',
write: 'm/d/Y',
edit: 'm/d/Y'
}
}]
});
});
var data = [{
"position": "CEO",
"name": "Nick",
"surname": "Thomson",
"salary": 10000,
"image": "images/boy-4.png",
"phone": "858-490-5000",
"birthday": "1961.10.01"
},
{
"position": "Sales Director",
"name": "Peter",
"surname": "West",
"salary": 7000,
"image": "images/boy-2.png",
"phone": "858-490-5001",
"birthday": "1965.1.5"
},
{
"position": "Tech Director",
"name": "Alexander",
"surname": "Brown",
"salary": 6000,
"image": "images/boy-3.png",
"phone": "858-490-5002",
"birthday": "1966.8.21"
},
{
"position": "Clients Manager",
"name": "Nicholas",
"surname": "Miller",
"salary": 6000,
"image": "images/boy-5.png",
"phone": "858-490-5003",
"birthday": "1967.9.17"
},
{
"position": "Staff Director",
"name": "Sophia",
"surname": "Smith",
"salary": 5500,
"image": "images/girl.png",
"phone": "858-490-5004",
"birthday": "1970.2.1"
},
{
"position": "Manager",
"name": "Emma",
"surname": "Walker",
"salary": 5000,
"image": "images/girl-1.png",
"phone": "858-490-5005",
"birthday": "1965.1.7"
},
{
"position": "Manager",
"name": "Ted",
"surname": "Smith",
"salary": 5000,
"image": "images/boy.png",
"phone": "858-490-5006",
"birthday": "1970.8.11"
},
{
"position": "Manager",
"name": "Ryan",
"surname": "Walker",
"salary": 5000,
"image": "images/boy-1.png",
"phone": "858-490-5007",
"birthday": "1975.11.7"
},
{
"position": "Manager",
"name": "Lily",
"surname": "Richardson",
"salary": 5000,
"image": "images/girl-2.png",
"phone": "858-490-5008",
"birthday": "1977.10.1"
},
{
"position": "Manager",
"name": "Mia",
"surname": "Grant",
"salary": 5000,
"image": "images/girl-3.png",
"phone": "858-490-5009",
"birthday": "1978.8.3"
},
{
"position": "Manager",
"name": "Olivia",
"surname": "Edwards",
"salary": 5000,
"image": "images/girl-4.png",
"phone": "858-490-5020",
"birthday": "1979.9.8"
},
{
"position": "Manager",
"name": "Katie",
"surname": "Gardner",
"salary": 5000,
"image": "images/girl-5.png",
"phone": "858-490-5021",
"birthday": "1988.7.7"
},
{
"position": "Manager",
"name": "Ivan",
"surname": "Woods",
"salary": 5000,
"image": "images/man-1.png",
"phone": "858-490-5022",
"birthday": "1990.1.1"
},
{
"position": "Junior Manager",
"name": "Lorenzo",
"surname": "Simpson",
"salary": 2000,
"image": "images/man.png",
"phone": "858-490-5023",
"birthday": "1995.2.5"
}
];
<script src="https://cdn.fancygrid.com/fancy.min.js"></script>
<div id="container"></div>
.custom-menu-item-cls {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20opacity%3D%22.4%22%20d%3D%22M0%200h24v24H0z%22%2F%3E%3Cpath%20fill%3D%22%23828A99%22%20fill-rule%3D%22nonzero%22%20d%3D%22M2%2012C2%206.477%206.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010S2%2017.523%202%2012zm18.3%200a8.3%208.3%200%201%200-16.6%200%208.3%208.3%200%200%200%2016.6%200zm-11.05-.5a1.25%201.25%200%201%201%200-2.5%201.25%201.25%200%200%201%200%202.5zm5.5%200a1.25%201.25%200%201%201%200-2.5%201.25%201.25%200%200%201%200%202.5z%22%2F%3E%3Cpath%20stroke%3D%22%23828A99%22%20stroke-width%3D%221.7%22%20d%3D%22M9%2014.85c.833.767%201.833%201.15%203%201.15s2.167-.383%203-1.15%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-position-x: 3px;
background-position-y: 3px;
}
.fancy-menu-item-active .custom-menu-item-cls {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20opacity%3D%22.4%22%20d%3D%22M0%200h24v24H0z%22%2F%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M2%2012C2%206.477%206.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010S2%2017.523%202%2012zm18.3%200a8.3%208.3%200%201%200-16.6%200%208.3%208.3%200%200%200%2016.6%200zm-11.05-.5a1.25%201.25%200%201%201%200-2.5%201.25%201.25%200%200%201%200%202.5zm5.5%200a1.25%201.25%200%201%201%200-2.5%201.25%201.25%200%200%201%200%202.5z%22%2F%3E%3Cpath%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.7%22%20d%3D%22M9%2014.85c.833.767%201.833%201.15%203%201.15s2.167-.383%203-1.15%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}