document.addEventListener("DOMContentLoaded", function() {
new FancyGrid({
renderTo: 'container',
theme: 'extra-gray',
selModel: 'rows',
trackOver: true,
filter: true,
data: data,
width: 900,
height: 500,
defaults: {
resizable: true,
sortable: true,
draggable: true,
//align: 'right',
align: 'left',
menu: true
},
columns: [{
type: 'string',
width: 120,
headerLImageCls: 'text',
title: 'Name',
cellAlign: 'left',
index: 'name',
render: function(o) {
o.value = o.data.name + ' ' + o.data.surname;
return o;
}
}, {
type: 'string',
width: 120,
headerLImageCls: 'text',
title: 'Position',
cellAlign: 'left',
index: 'position'
}, {
type: 'currency',
headerLImageCls: 'currency',
precision: 2,
title: 'Salary',
cellAlign: 'right',
index: 'salary'
}, {
type: 'string',
headerLImageCls: 'phone',
cellAlign: 'right',
sortable: false,
title: 'Phone',
index: 'phone'
}, {
type: 'date',
headerLImageCls: 'date',
cellAlign: 'right',
title: 'Birthday',
index: 'birthday'
}, {
type: 'string',
width: 200,
headerLImageCls: 'email',
sortable: false,
cellAlign: 'left',
title: 'Email',
index: 'email'
}]
});
});
var data = [{
"position": "CEO",
"name": "Nick",
"surname": "Thomson",
"salary": 10000,
"phone": "858-490-5000",
"birthday": "1961.10.01",
"email": "[email protected]"
}, {
"position": "Deputy Director",
"name": "Grace",
"surname": "Thomson",
"salary": 9000,
"phone": "858-490-2000",
"birthday": "1980.07.21",
"email": "[email protected]"
}, {
"position": "Sales Director",
"name": "Peter",
"surname": "West",
"salary": 7000,
"phone": "858-490-5001",
"birthday": "1965.01.05",
"email": "[email protected]"
}, {
"position": "Tech Director",
"name": "Alexander",
"surname": "Brown",
"salary": 6000,
"phone": "858-490-5002",
"birthday": "1966.08.21",
"email": "[email protected]"
}, {
"position": "Clients Manager",
"name": "Nicholas",
"surname": "Miller",
"salary": 6000,
"phone": "858-490-5003",
"birthday": "1967.09.17",
"email": "[email protected]"
}, {
"position": "Tech Director",
"name": "Andrew",
"surname": "Richardson",
"salary": 6000,
"phone": "858-490-7001",
"birthday": "1971.08.21",
"email": "[email protected]"
}, {
"position": "Staff Director",
"name": "Sophia",
"surname": "Smith",
"salary": 5500,
"phone": "858-490-5004",
"birthday": "1970.02.01",
"email": "[email protected]"
}, {
"position": "Accountant",
"name": "William",
"surname": "Thomson",
"salary": 5400,
"phone": "858-490-7002",
"birthday": "1975.11.07",
"email": "[email protected]"
}, {
"position": "Technician",
"name": "Matthew",
"surname": "Lopez",
"salary": 5300,
"phone": "858-490-7002",
"birthday": "1975.11.07",
"email": "[email protected]"
}, {
"position": "Sales Manager",
"name": "Anna",
"surname": "Anna",
"salary": 5200,
"phone": "858-490-8004",
"birthday": "1981.11.28",
"email": "[email protected]"
}, {
"position": "Credit Manager",
"name": "Carter",
"surname": "Lopez",
"salary": 5000,
"phone": "858-490-8001",
"birthday": "1977.02.21",
"email": "[email protected]"
}, {
"position": "Manager",
"name": "Emma",
"surname": "Walker",
"salary": 5000,
"phone": "858-490-5005",
"birthday": "1965.01.07",
"email": "[email protected]"
}, {
"position": "Manager",
"name": "Ted",
"surname": "Smith",
"salary": 5000,
"phone": "858-490-5006",
"birthday": "1970.08.11",
"email": "[email protected]"
}, {
"position": "Sales Manager",
"name": "Jhon",
"surname": "Smith",
"salary": 5000,
"phone": "858-490-8002",
"birthday": "1970.08.11",
"email": "[email protected]"
}, {
"position": "Manager",
"name": "Ryan",
"surname": "Walker",
"salary": 5000,
"phone": "858-490-5007",
"birthday": "1975.11.07",
"email": "[email protected]"
}, {
"position": "Manager",
"name": "Lily",
"surname": "Richardson",
"salary": 5000,
"phone": "858-490-5008",
"birthday": "1977.10.01",
"email": "[email protected]"
}, {
"position": "Manager",
"name": "Mia",
"surname": "Grant",
"salary": 5000,
"phone": "858-490-5009",
"birthday": "1978.08.03",
"email": "[email protected]"
}, {
"position": "Manager",
"name": "Olivia",
"surname": "Edwards",
"salary": 5000,
"phone": "858-490-5020",
"birthday": "1979.09.08",
"email": "[email protected]"
}, {
"position": "Manager",
"name": "Katie",
"surname": "Gardner",
"salary": 5000,
"phone": "858-490-5021",
"birthday": "1988.07.07",
"email": "[email protected]"
}, {
"position": "Manager",
"name": "Ivan",
"surname": "Woods",
"salary": 5000,
"phone": "858-490-5022",
"birthday": "1990.01.01",
"email": "[email protected]"
}, {
"position": "Hostess",
"name": "Elizabeth",
"surname": "Woods",
"salary": 5000,
"phone": "858-490-1007",
"birthday": "1985.07.18",
"email": "[email protected]"
}, {
"position": "Call Support",
"name": "Paula",
"surname": "Williams",
"salary": 4500,
"phone": "858-490-3000",
"birthday": "1989.02.11",
"email": "[email protected]"
}, {
"position": "Security",
"name": "Noah",
"surname": "Phillips",
"salary": 3500,
"phone": "858-490-1002",
"birthday": "1980.11.22",
"email": "[email protected]"
}, {
"position": "Junior Tech",
"name": "Jose",
"surname": "West",
"salary": 2000,
"phone": "858-490-7003",
"birthday": "1990.07.27",
"email": "[email protected]"
}, {
"position": "Junior Manager",
"name": "Lorenzo",
"surname": "Simpson",
"salary": 2000,
"phone": "858-490-5023",
"birthday": "1995.02.05",
"email": "[email protected]"
}];
<script src="https://cdn.fancygrid.com/fancy.min.js"></script>
<div id="container"></div>
.currency {
display: inline-block !important;
width: 19px;
height: 16px;
background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20style%3D%22shape-rendering%3AgeometricPrecision%3B%22%20fill%3D%22%23555555%22%20%20opacity%3D%220.5%22%3E%3Cpath%20d%3D%22M12.389%202.079a1%201%200%200%201%20.446.404A.967.967%200%200%201%2013%203v1c0%20.55-.45%201-1%201s-.95-1-1.5-1a.504.504%200%200%201-.5-.504v-.99c0-.291.226-.505.505-.505H12c.137%200%20.268.029.389.079zM10%208.707V7.642c0-.28.204-.412.456-.303%200%200%202.544.87%202.544%203.217%200%202.359-2.531%203.145-2.531%203.145-.253.11-.469-.038-.469-.32v-1c0-.293.182-.634.407-.789%200%200%20.593-.245.593-1.036%200-.761-.593-1.046-.593-1.046-.214-.172-.407-.526-.407-.802zM8%201c.556%200%201%20.444%201%20.99V14c0%20.547-.448%201-1%201-.556%200-1-.448-1-1H4a.997.997%200%200%201-.706-.294A.993.993%200%200%201%203%2013v-1c0-.55.45-1%201-1s1%201%202%201h1V9s-.427-.005-1-.128C4.815%208.617%203%207.845%203%205.5c0-2.36%201.815-3.126%203-3.377C6.573%202.003%207%202%207%202v-.003C7%201.453%207.448%201%208%201zM5%205.5c0%20.76.5%201.135%201%201.32.5.185.999.18%201%20.18V4c-.001%200-.5-.02-1%20.156-.5.177-1%20.552-1%201.344z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
position: absolute;
left: 1px;
top: 7px;
}
.text {
display: inline-block !important;
width: 19px;
height: 16px;
background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20style%3D%22shape-rendering%3AgeometricPrecision%22%20fill%3D%22%23555555%22%20%20opacity%3D%220.5%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M2.554%2012.615L6.628%202.429C6.834%201.916%207.448%201.5%208%201.5c.556%200%201.166.416%201.372.93l4.074%2010.185c.306.765-.116%201.385-.944%201.385h-.252a1.1%201.1%200%200%201-.987-.711l-.526-1.578c-.13-.39-.577-.711-.996-.711H6.259c-.43%200-.865.318-.996.711l-.526%201.578c-.13.39-.573.711-.987.711h-.252c-.828%200-1.25-.62-.944-1.385zM6.371%208.07c-.205.513.072.929.638.929h1.982c.557%200%20.845-.41.637-.929L8.556%205.393c-.308-.77-.806-.77-1.114%200L6.372%208.07z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
position: absolute;
left: 1px;
top: 7px;
}
.date {
display: inline-block !important;
width: 19px;
height: 16px;
background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20style%3D%22shape-rendering%3AgeometricPrecision%22%20fill%3D%22%23555555%22%20%20opacity%3D%220.5%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M1%202.5C1%201.67%201.68%201%202.5%201h11c.83%200%201.5.68%201.5%201.5v11c0%20.83-.68%201.5-1.5%201.5h-11c-.83%200-1.5-.68-1.5-1.5v-11zm2%200c0%20.27.22.5.5.5h3c.28%200%20.5-.22.5-.5%200-.27-.22-.5-.5-.5h-3c-.28%200-.5.22-.5.5zm6%200c0%20.27.22.5.5.5h3c.28%200%20.5-.22.5-.5%200-.27-.22-.5-.5-.5h-3c-.28%200-.5.22-.5.5zm-3.8%209.05c-.53%200-.87-.3-.87-.78v-.1c0-.1-.08-.2-.2-.2H3.2c-.1%200-.2.1-.2.2v.1c0%201.15.98%202.06%202.2%202.06%201.2%200%202.17-.9%202.17-2.06%200-.52-.23-1.06-.62-1.36-.05-.04-.05-.1%200-.16.3-.3.52-.76.52-1.23%200-1.1-.93-1.97-2.08-1.97-1.16%200-2.1.88-2.1%201.98v.15c0%20.1.08.2.18.2h.95c.1%200%20.2-.1.2-.2V8c0-.42.32-.7.76-.7s.75.28.75.7c0%20.44-.3.72-.76.72h-.13c-.1%200-.2.1-.2.2v.88c0%20.1.1.18.2.18h.12c.5%200%20.84.3.84.8%200%20.47-.34.77-.85.77zm5.5%201.25c0%20.1.1.2.22.2h1.03c.1%200%20.2-.1.2-.2V6.2c0-.1-.1-.2-.2-.2H10.8c-.27%200-.44.14-.53.24l-.85.96c-.15.15-.17.28-.17.44v.96c0%20.2.23.28.35.16l.9-.84c.07-.06.2-.05.2.08v4.8z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
position: absolute;
left: 2px;
top: 7px;
}
.phone {
display: inline-block !important;
width: 19px;
height: 16px;
background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20style%3D%22shape-rendering%3AgeometricPrecision%22%20fill%3D%22%23555555%22%20%20opacity%3D%220.5%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M6.2223%2C2.8573%20C6.4953%2C3.1303%206.4953%2C3.5723%206.2223%2C3.8453%20L5.2333%2C4.8333%20C4.9603%2C5.1063%205.0863%2C5.4653%205.2333%2C5.8213%20C5.5833%2C6.6653%206.3453%2C7.5103%207.4163%2C8.5813%20C8.6103%2C9.7763%209.3313%2C10.3323%2010.1753%2C10.7653%20C10.5193%2C10.9413%2010.8913%2C11.0383%2011.1633%2C10.7653%20L12.1523%2C9.7783%20C12.4253%2C9.5053%2012.8673%2C9.5053%2013.1403%2C9.7783%20L15.1173%2C11.7563%20C15.3903%2C12.0293%2015.3903%2C12.4713%2015.1173%2C12.7443%20L13.0653%2C14.7953%20C12.8233%2C15.0373%2012.4423%2C15.0683%2012.1643%2C14.8693%20C12.1643%2C14.8693%208.1363%2C13.6693%205.2333%2C10.7653%20C2.2063%2C7.7373%201.1303%2C3.8303%201.1303%2C3.8303%20C0.9313%2C3.5523%200.9633%2C3.1713%201.2043%2C2.9303%20L3.2573%2C0.8793%20C3.5303%2C0.6063%203.9723%2C0.6063%204.2453%2C0.8793%20L6.2223%2C2.8573%20Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
position: absolute;
left: 2px;
top: 7px;
}
.email {
display: inline-block !important;
width: 19px;
height: 16px;
background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20style%3D%22shape-rendering%3AgeometricPrecision%22%20fill%3D%22%23555555%22%20%20opacity%3D%220.5%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M1%2C11.5004529%20L1%2C8.28698353%20C1%2C7.74071872%201.39692412%2C7.50310534%201.88655484%2C7.76240678%20L7.11344516%2C10.5304932%20C7.60359323%2C10.7900686%208.39692412%2C10.7897947%208.88655484%2C10.5304932%20L14.1134452%2C7.76240678%20C14.6035932%2C7.50283136%2015%2C7.73797416%2015%2C8.28700095%20L15%2C11.5005267%20C15%2C12.3229093%2014.3292128%2C12.9999952%2013.5017548%2C12.9999893%20L2.49824524%2C12.9999107%20C1.6752491%2C12.9999048%201%2C12.3285747%201%2C11.5004529%20Z%20M1%2C5.5%20L1%2C4.49755925%20C1%2C3.66995412%201.67078724%2C3%202.49824524%2C3%20L13.5017548%2C3%20C14.3247509%2C3%2015%2C3.67048011%2015%2C4.49755925%20L15%2C5.5%20L8.88655484%2C8.55672258%20C8.39640677%2C8.80179662%207.60307588%2C8.80153794%207.11344516%2C8.55672258%20L1%2C5.5%20Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
position: absolute;
left: 2px;
top: 7px;
}