document.addEventListener("DOMContentLoaded", function() {
new FancyGrid({
renderTo: 'container',
data: data,
selModel: 'row',
trackOver: true,
theme: 'extra-gray',
tbar: [{
text: 'Fill 100%',
handler: function() {
let el = document.getElementById('container');
el.style.width = '100%';
el.style.height = '100%';
}
}, {
text: '500 on 600',
handler: function() {
let el = document.getElementById('container');
el.style.setProperty('width', '500px');
el.style.setProperty('height', '600px');
}
}, {
text: '100% on 500',
handler: function() {
let el = document.getElementById('container');
el.style.setProperty('width', '100%');
el.style.setProperty('height', '500px');
}
}, {
text: '500 on 100%',
handler: function() {
let el = document.getElementById('container');
el.style.setProperty('width', '500px');
el.style.setProperty('height', '100%');
}
}],
defaults: {
resizable: true,
sortable: true,
width: 95,
align: 'center',
cellAlign: 'center'
},
columns: [{
type: 'order'
}, {
index: 'brand',
title: 'Brand'
}, {
index: 'model',
title: 'Model'
}, {
index: 'engine',
title: 'Engine'
}, {
index: 'transmission',
title: 'Transmission'
}, {
index: 'hp',
title: 'HP'
}, {
index: 'fuel',
title: 'Fuel'
}, {
index: 'drive',
title: 'Drive'
}, {
index: 'manufactured',
title: 'Manufactured'
}, {
index: 'color',
title: 'Shade'
}, {
index: 'price',
title: 'Price',
type: 'currency'
}]
});
});
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'
}
];
html, body {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0px;
padding: 0px;
}
<script src="https://cdn.fancygrid.com/fancy.min.js"></script>
<div id="container" style="width: 700px; height: 400px;"></div>