document.addEventListener("DOMContentLoaded", function() {
new FancyGrid({
renderTo: 'container',
width: 550,
height: 450,
trackOver: true,
selModel: 'row',
textSelection: true,
data: {
items: data
},
defaults: {
type: 'string',
width: 75,
resizable: true,
sortable: true
},
clicksToEdit: 1,
columnLines: false,
columnClickData: true,
grouping: {
by: 'model'
},
columns: [{
title: 'Full Name',
index: 'fullName',
width: 160
}, {
title: 'Color',
index: 'color',
type: 'color',
cls: 'color-column',
sortable: false,
width: 60
}, {
title: 'Color Name',
index: 'colorName',
width: 140
}, {
title: 'Price',
index: 'price',
format: 'number',
type: 'number',
render: function(o) {
o.value = '$' + o.value;
return o;
}
}, {
title: 'Count',
index: 'count',
type: 'number',
width: 60
}]
});
});
var data = [{
model: 'Sorento Prime',
fullName: 'KIA Sorento Prime Prestige 2.2 L 6AT',
color: '#4d382d',
colorName: '(MY3) Imperial Bronze',
price: 37500,
count: 1
}, {
model: 'Picanto',
fullName: 'KIA Picanto 1.2 L 4AT',
color: '#860b0b',
colorName: '(BEG) Signal Red',
price: 13000,
count: 1
}, {
model: "cee'd",
fullName: "KIA cee'd Classic 1.4 L 6MT",
color: '#393D43',
colorName: '(E5B) Dark Gun Metal',
price: 12500,
count: 1
}, {
model: "cee'd",
fullName: "KIA cee'd Classic 1.4 L 6MT",
color: 'white',
colorName: '(HW2) Deluxe White',
price: 12500,
count: 1
}, {
model: "cee'd",
fullName: "KIA cee'd Classic 1.6 L 6MT",
color: '#D9D9D9',
colorName: '(9S) Machine Silver',
price: 13400,
count: 1
}, {
model: "cee'd",
fullName: "KIA cee'd Classic 1.6 L 6MT",
color: '#B4B6A6',
colorName: '(AA3) Sirius Silver',
price: 13400,
count: 1
}, {
model: "cee'd",
fullName: "KIA cee'd Classic 1.6 L 6MT",
color: '#393D43',
colorName: '(E5B) Dark Gun Metal',
price: 13700,
count: 1
},
{
model: 'Sportage',
fullName: 'KIA Sportage 2.0 L 6MT',
color: '#9d927e',
colorName: 'Sirius Silver (AA3)',
price: 19000,
count: 1
}, {
model: 'Sportage',
fullName: 'KIA Sportage 2.0 L 6MT',
color: '#e0e0e0',
colorName: 'Deluxe White (HW2)',
price: 19000,
count: 3
}, {
model: 'Sportage',
fullName: 'KIA Sportage 2.0 L 6MT',
color: '#726157',
colorName: 'Sand Track (D5U)',
price: 19000,
count: 1
}, {
model: 'Sportage',
fullName: 'KIA Sportage 2.0 L 6AT',
color: '#9d927e',
colorName: 'Sirius Silver (AA3)',
price: 19000,
count: 1
}, {
model: 'Sportage',
fullName: 'KIA Sportage 2.0 L 6AT',
color: '#e0e0e0',
colorName: 'Deluxe White (HW2)',
price: 19000,
count: 2
}, {
model: 'Sportage',
fullName: 'KIA Sportage 2.0 L 6AT',
color: '#e0e0e0',
colorName: 'Deluxe White (HW2)',
price: 20000,
count: 1
}, {
model: 'Sportage',
fullName: 'KIA Sportage 2.0 L 6AT',
color: '#d4d4d4',
colorName: 'Casa White (WD)',
price: 20000,
count: 2
}, {
model: 'Sportage',
fullName: 'KIA Sportage 2.0 L 6AT',
color: '#9d927e',
colorName: 'Sirius Silver (AA3)',
price: 20000,
count: 1
}, {
model: 'Sportage',
fullName: 'KIA Sportage 2.0 L 6AT',
color: '#e0e0e0',
colorName: 'Deluxe White (HW2)',
price: 21000,
count: 6
}, {
model: 'Sportage',
fullName: 'KIA Sportage 2.0 L 6AT',
color: '#d4d4d4',
colorName: 'Casa White (WD)',
price: 21000,
count: 1
},
{
model: 'Sorento',
fullName: 'KIA Sorento 2.4 L 6AT',
color: '#e1e1e1',
colorName: '(SWP) Snow Pearl White',
price: 28000,
count: 2
}, {
model: 'Sorento',
fullName: 'KIA Sorento 2.2 L 6AT',
color: '#e1e1e1',
colorName: '(SWP) Snow Pearl White',
price: 29000,
count: 1
},
{
model: 'Sorento Prime',
fullName: 'KIA Sorento Prime Prestige 2.2 L 6AT',
color: '#474a52',
colorName: '(ABT) Platinum Graphite',
price: 37500,
count: 1
},
{
model: 'Picanto',
fullName: 'KIA Picanto 1.2 L 4AT',
color: '#ffffff',
colorName: '(UD) Clear White',
price: 12200,
count: 1
}, {
model: "cee'd",
fullName: "KIA cee'd Classic 1.6 L 6MT",
color: '#B4B6A6',
colorName: '(AA3) Sirius Silver',
price: 13700,
count: 1
}, {
model: "cee'd",
fullName: "KIA cee'd Comfort 1.6 L 6AT",
color: '#D9D9D9',
colorName: '(9S) Machine Silver',
price: 14400,
count: 1
}, {
model: "cee'd",
fullName: "KIA cee'd Comfort 1.6 L 6AT",
color: '#393D43',
colorName: '(E5B) Dark Gun Metal',
price: 14400,
count: 1
}, {
model: "cee'd",
fullName: "KIA cee'd Comfort 1.6 L 6AT",
color: 'white',
colorName: '(HW2) Deluxe White',
price: 14400,
count: 3
}, {
model: "cee'd",
fullName: "KIA cee'd Comfort 1.6 L 6AT",
color: '#B4B6A6',
colorName: '(AA3) Sirius Silver',
price: 14400,
count: 2
}, {
model: "cee'd",
fullName: "KIA cee'd Luxe 1.6 L 6AT",
color: '#D9D9D9',
colorName: '(9S) Machine Silver',
price: 15000,
count: 1
}, {
model: "cee'd",
fullName: "KIA cee'd Luxe 1.6 L 6AT",
color: '#D9D9D9',
colorName: '(9S) Machine Silver',
price: 15000,
count: 1
}, {
model: "cee'd",
fullName: "KIA cee'd Luxe 1.6 L 6AT",
color: 'white',
colorName: '(HW2) Deluxe White',
price: 15000,
count: 1
}, {
model: "cee'd",
fullName: "KIA cee'd Luxe 1.6 L 6AT",
color: '#B4B6A6',
colorName: '(AA3) Sirius Silver',
price: 15000,
count: 1
}, {
model: "cee'd",
fullName: "KIA cee'd Luxe 1.6 L 6AT",
color: '#686156',
colorName: '(D5U) Sand Track',
price: 15000,
count: 1
}, {
model: "cee'd",
fullName: "KIA cee'd Prestige 1.6 L 6AT",
color: 'white',
colorName: '(HW2) Deluxe White',
price: 17000,
count: 1
}
];
<script src="https://cdn.fancygrid.com/fancy.min.js"></script>
<div id="container" style=""></div>