document.addEventListener("DOMContentLoaded", function() { let renderFn = function(o) { if (o.rowIndex === 2) { o.cls = 'red'; } else if (o.rowIndex === 4 || o.value === 7) { o.cls = 'yellow'; } else if (o.rowIndex === 8 || o.rowIndex === 1) { o.cls = 'green'; } return o; } var grid = new FancyGrid({ renderTo: 'container', data: data, selModel: 'row', trackOver: true, theme: 'extra-gray', defaults: { resizable: true, sortable: true, width: 95, draggable: true, align: 'center', cellAlign: 'center' }, columns: [{ type: 'order' }, { index: 'brand', title: 'Brand', render: renderFn }, { index: 'model', title: 'Model', render: renderFn }, { index: 'engine', title: 'Engine', render: renderFn }, { index: 'transmission', title: 'Transmission', render: renderFn }, { index: 'hp', title: 'HP', render: renderFn }, { index: 'fuel', title: 'Fuel', render: renderFn }, { index: 'drive', title: 'Drive', render: renderFn }, { index: 'manufactured', title: 'Manufactured', render: renderFn }, { index: 'color', title: 'Shade', render: renderFn }, { index: 'price', title: 'Price', type: 'currency', render: renderFn }] }); }); var data = [{ brand: 'KIA', model: 'Sorento', drive: '4WD', transmission: 'Auto', engine: '2.2', hp: 200, fuel: 'Diesel', price: 35000, manufactured: 'South Korea', color: 'Gray' }, { brand: 'KIA', model: 'Sorento', drive: '4WD', transmission: 'Auto', engine: '2.4', hp: 188, fuel: 'Petrol', price: 33000, manufactured: 'South Korea', color: 'Gray' }, { brand: 'KIA', model: 'Sportage', drive: '2WD', transmission: 'Manual', engine: '2.0', hp: 150, fuel: 'Petrol', price: 20000, manufactured: 'South Korea', color: 'White' }, { brand: 'KIA', model: 'Sportage', drive: '2WD', transmission: 'Automatic', engine: '2.0', hp: 150, fuel: 'Petrol', price: 24000, manufactured: 'South Korea', color: 'Gray' }, { brand: 'KIA', model: 'Soul', drive: '2WD', transmission: 'Auto', engine: '1.6', hp: 123, fuel: 'Petrol', price: 16500, manufactured: 'South Korea', color: 'White' }, { brand: 'KIA', model: 'Sorento', drive: '4WD', transmission: 'Auto', engine: '2.2', hp: 150, fuel: 'Diesel', price: 36100, manufactured: 'South Korea', color: 'Gray' }, { brand: 'KIA', model: 'Rio', drive: '2WD', transmission: 'Auto', engine: '1.6', hp: 123, fuel: 'Petrol', price: 12000, manufactured: 'South Korea', color: 'Gray' }, { brand: 'KIA', model: 'Seltos', drive: '4WD', transmission: 'Auto', engine: '2.0', hp: 149, fuel: 'Petrol', price: 25900, manufactured: 'South Korea', color: 'Gray' }, { brand: 'KIA', model: 'Seltos', drive: '2WD', transmission: 'Auto', engine: '2.0', hp: 149, fuel: 'Petrol', price: 19700, manufactured: 'South Korea', color: 'White' }, { brand: 'Toyota', model: 'RAV4', drive: '2WD', transmission: 'Manual', engine: '2.0', hp: 149, fuel: 'Petrol', price: 23500, manufactured: 'Japan', color: 'White' }, { brand: 'Toyota', model: 'Fortuner', drive: '4WD', transmission: 'Manual', engine: '2.7', hp: 166, fuel: 'Petrol', price: 31000, manufactured: 'Japan', color: 'White' }, { brand: 'Toyota', model: 'Fortuner', drive: '4WD', transmission: 'Manual', engine: '2.7', hp: 177, fuel: 'Diesel', price: 39000, manufactured: 'Japan', color: 'Gray' }, { brand: 'Toyota', model: 'Land Cruiser', drive: '4WD', transmission: 'Auto', engine: '4.5', hp: 249, fuel: 'Diesel', price: 72000, manufactured: 'Japan', color: 'Gray' }, { brand: 'Toyota', model: 'Hilux', drive: '4WD', transmission: 'Manual', engine: '2.4', hp: 150, fuel: 'Diesel', price: 34000, manufactured: 'Japan', color: 'White' }, { brand: 'Toyota', model: 'Hilux', drive: '4WD', transmission: 'Manual', engine: '2.4', hp: 150, fuel: 'Diesel', price: 32000, manufactured: 'Japan', color: 'White' }, { brand: 'Toyota', model: 'Highlander', drive: '4WD', transmission: 'Auto', engine: '3.5', hp: 249, fuel: 'Petrol', price: 47500, manufactured: 'Japan', color: 'Gray' }, { brand: 'Toyota', model: 'Highlander', drive: '4WD', transmission: 'Auto', engine: '3.5', hp: 249, fuel: 'Petrol', price: 49000, manufactured: 'Japan', color: 'Gray' }, { brand: 'Toyota', model: 'Highlander', drive: '4WD', transmission: 'Auto', engine: '3.5', hp: 249, fuel: 'Petrol', price: 51000, manufactured: 'Japan', color: 'Gray' }, { brand: 'VW', model: 'Touareg', drive: '4WD', transmission: 'Auto', engine: '3.0', hp: 249, fuel: 'Diesel', price: 63000, manufactured: 'Germany', color: 'Dark' }, { brand: 'VW', model: 'Polo', drive: '2WD', transmission: 'Auto', engine: '1.4', hp: 110, fuel: 'Petrol', price: 12700, manufactured: 'Germany', color: 'Gray' }, { brand: 'VW', model: 'Polo', drive: '2WD', transmission: 'Auto', engine: '1.4', hp: 110, fuel: 'Petrol', price: 13200, manufactured: 'Germany', color: 'Dark' }, { brand: 'VW', model: 'Polo', drive: '2WD', transmission: 'Auto', engine: '1.4', hp: 110, fuel: 'Petrol', price: 12800, manufactured: 'Germany', color: 'Dark' }, { brand: 'VW', model: 'Tiguan', drive: '2WD', transmission: 'Auto', engine: '1.6', hp: 150, fuel: 'Petrol', price: 27000, manufactured: 'Germany', color: 'White' }, { brand: 'VW', model: 'Tiguan', drive: '4WD', transmission: 'Auto', engine: '2.0', hp: 180, fuel: 'Petrol', price: 36400, manufactured: 'Germany', color: 'Gray' }, { brand: 'VW', model: 'Tiguan', drive: '4WD', transmission: 'Auto', engine: '2.0', hp: 150, fuel: 'Petrol', price: 32500, manufactured: 'Germany', color: 'Gray' }, { brand: 'Mazda', model: 'CX-5', drive: '2WD', transmission: 'Manual', engine: '2.0', hp: 150, fuel: 'Petrol', price: 21800, manufactured: 'Japan', color: 'Gray' }, { brand: 'Mazda', model: 'CX-5', drive: '2WD', transmission: 'Manual', engine: '2.0', hp: 150, fuel: 'Petrol', price: 21800, manufactured: 'Japan', color: 'Blue' }, { brand: 'Mazda', model: 'CX-5', drive: '2WD', transmission: 'Auto', engine: '2.0', hp: 150, fuel: 'Petrol', price: 24800, manufactured: 'Japan', color: 'White' }, { brand: 'Mazda', model: 'CX-5', drive: '2WD', transmission: 'Auto', engine: '2.0', hp: 150, fuel: 'Petrol', price: 24800, manufactured: 'Japan', color: 'White' } ];