document.addEventListener("DOMContentLoaded", function() {
new FancyGrid({
renderTo: 'container',
width: 600,
height: 600,
data: data,
selModel: 'rows',
trackOver: true,
theme: 'extra-gray',
titleHeight: 65,
cellHeight: 60,
columnLines: false,
defaults: {
type: 'string',
width: 100,
sortable: true,
resizable: true,
vtype: 'notempty'
},
expander: {
render: function(renderTo, data, columnsWidth) {
new FancyGrid({
renderTo: renderTo,
width: columnsWidth - 20,
height: 'fit',
minHeight: 100,
trackOver: true,
selModel: 'rows',
theme: 'extra-gray',
data: data.sold,
emptyText: 'Nothing to display',
defaults: {
type: 'string'
},
columns: [{
index: 'name',
width: 140,
title: 'Name'
}, {
index: 'price',
width: 78,
type: 'currency',
title: 'price',
}, {
title: 'Color',
index: 'color',
width: 70,
type: 'color',
cls: 'color-column'
}]
});
}
},
columns: [{
type: 'expand',
render: function(o) {
if (o.data.sold.length === 0) {
o.hidden = true;
}
return o;
}
}, {
type: 'image',
index: 'image',
title: 'Photo',
cls: 'image-staff',
width: 100
}, {
title: 'Name',
sortable: false,
render: function(o) {
o.value = o.data.name + ' ' + o.data.surname;
return o;
}
}, {
index: 'position',
title: 'Position',
width: 100
}, {
index: 'phone',
title: 'Phone',
width: 100
}]
});
});
var data = [{
"position": "CEO",
"name": "Nick",
"surname": "Thomson",
"id": "1",
"hour": 70,
"image": "https://fancygrid.com/images/staff/boy-4.png",
"phone": "858-490-5000",
"sold": [{
image: 'imgs/img_new_granbird.png',
name: 'New GranBird',
price: 250000,
color: '#CDC2B5'
},
{
image: 'imgs/img_k7_hybrid.png',
name: 'K7 700 Hybrid',
price: 38000,
color: '#E8EAEE'
},
{
image: 'imgs/img_truck.png',
name: 'Bongo 3',
price: 18000,
color: '#B4AB9E'
}
],
"birthday": "1961.10.01"
}, {
"position": "Sales Director",
"name": "Peter",
"surname": "West",
"id": "2",
"hour": 40,
"image": "https://fancygrid.com/images/staff/boy-2.png",
"phone": "858-490-5001",
"sold": [{
name: 'Kia Sportage',
price: 18000,
color: '#DCDDDD'
},
{
name: 'KIA Sportage 2.0 L 6MT',
color: '#9d927e',
price: 19000
}
],
"birthday": "1965.1.5"
}, {
"position": "Tech Director",
"name": "Alexander",
"surname": "Brown",
"id": "3",
"hour": 35,
"image": "https://fancygrid.com/images/staff/boy-3.png",
"phone": "858-490-5002",
"sold": [{
name: 'KIA Sorento Prime Prestige 2.2 L 6AT',
color: '#474a52',
price: 37500
}],
"birthday": "1966.8.21"
}, {
"position": "Clients Manager",
"name": "Nicholas",
"surname": "Miller",
"id": "4",
"hour": 35,
"image": "https://fancygrid.com/images/staff/boy-5.png",
"phone": "858-490-5003",
"sold": [{
name: "KIA cee'd Comfort 1.6 L 6AT",
color: '#D9D9D9',
price: 14400
},
{
name: "KIA cee'd Comfort 1.6 L 6AT",
color: '#393D43',
price: 14400
}
],
"birthday": "1967.9.17"
}, {
"position": "Staff Director",
"name": "Sophia",
"surname": "Smith",
"id": "5",
"hour": 30,
"image": "https://fancygrid.com/images/staff/girl.png",
"phone": "858-490-5004",
"sold": [{
name: 'KIA Picanto 1.2 L 4AT',
color: '#860b0b',
price: 13000
},
{
name: "KIA cee'd Classic 1.4 L 6MT",
color: '#393D43',
price: 12500
}
],
"birthday": "1970.2.1"
}, {
"position": "Manager",
"name": "Emma",
"surname": "Walker",
"id": "6",
"hour": 30,
"image": "https://fancygrid.com/images/staff/girl-1.png",
"phone": "858-490-5005",
"sold": [{
name: "KIA cee'd Luxe 1.6 L 6AT",
color: '#D9D9D9',
price: 15000
},
{
name: "KIA cee'd Luxe 1.6 L 6AT",
color: '#D9D9D9',
price: 15000
}
],
"birthday": "1965.1.7"
}, {
"position": "Manager",
"name": "Ted",
"surname": "Smith",
"id": "7",
"hour": 30,
"image": "https://fancygrid.com/images/staff/boy.png",
"phone": "858-490-5006",
"sold": [{
name: 'KIA Sportage 2.0 L 6AT',
color: '#9d927e',
price: 19000
},
{
name: 'KIA Sportage 2.0 L 6AT',
color: '#e0e0e0',
price: 19000
}
],
"birthday": "1970.8.11"
}, {
"position": "Manager",
"name": "Ryan",
"surname": "Walker",
"id": "8",
"hour": 30,
"image": "https://fancygrid.com/images/staff/boy-1.png",
"phone": "858-490-5007",
"sold": [{
name: 'KIA Sportage 2.0 L 6AT',
color: '#d4d4d4',
price: 20000
},
{
name: 'KIA Sportage 2.0 L 6AT',
color: '#9d927e',
price: 20000
}
],
"birthday": "1975.11.7"
}, {
"position": "Manager",
"name": "Lily",
"surname": "Richardson",
"id": "9",
"hour": 30,
"image": "https://fancygrid.com/images/staff/girl-2.png",
"phone": "858-490-5008",
"sold": [{
name: "KIA cee'd Comfort 1.6 L 6AT",
color: '#D9D9D9',
price: 14400
},
{
name: "KIA cee'd Comfort 1.6 L 6AT",
color: '#393D43',
price: 14400
}
],
"birthday": "1977.10.1"
}, {
"position": "Manager",
"name": "Mia",
"surname": "Grant",
"id": "10",
"hour": 30,
"image": "https://fancygrid.com/images/staff/girl-3.png",
"phone": "858-490-5009",
"sold": [],
"birthday": "1978.8.3"
}, {
"position": "Manager",
"name": "Olivia",
"surname": "Edwards",
"id": "11",
"hour": 30,
"image": "https://fancygrid.com/images/staff/girl-4.png",
"phone": "858-490-5020",
"sold": [{
name: 'KIA Sportage 2.0 L 6AT',
color: '#d4d4d4',
price: 21000
},
{
name: 'KIA Sorento 2.4 L 6AT',
color: '#e1e1e1',
price: 28000
}
],
"birthday": "1979.9.8"
}, {
"position": "Manager",
"name": "Katie",
"surname": "Gardner",
"id": "12",
"hour": 30,
"image": "https://fancygrid.com/images/staff/girl-5.png",
"phone": "858-490-5021",
"sold": [{
name: "KIA cee'd Prestige 1.6 L 6AT",
color: 'white',
price: 17000
}],
"birthday": "1988.7.7"
}, {
"position": "Manager",
"name": "Ivan",
"surname": "Woods",
"id": "13",
"hour": 30,
"image": "https://fancygrid.com/images/staff/man-1.png",
"phone": "858-490-5022",
"sold": [{
name: "KIA cee'd Classic 1.6 L 6MT",
color: '#393D43',
price: 13700
},
{
name: 'KIA Sportage 2.0 L 6MT',
color: '#9d927e',
price: 19000
}
],
"birthday": "1990.1.1"
}, {
"position": "Junior Manager",
"name": "Lorenzo",
"surname": "Simpson",
"id": "14",
"hour": 20,
"image": "https://fancygrid.com/images/staff/man.png",
"phone": "858-490-5023",
"sold": [],
"birthday": "1995.2.5"
}];
<script src="https://cdn.fancygrid.com/fancy.min.js"></script>
<div id="container"></div>
.image-staff img {
margin-top: -5px;
margin-left: -5px;
margin-right: 5px;
border-radius: 2px;
width: 50px;
height: 50px;
border-radius: 50%;
}
.fancy-theme-gray.fancy-panel .fancy-panel-header {
background-color: white;
border-bottom: 2px solid #e3223a;
}
.fancy-theme-gray .fancy-checkbox-expander {
margin-top: 10px;
}
.fancy-grid-expand-row .fancy-grid {
border-top: 1px solid #d3dbe1 !important;
}