Sizing

by FancyGrid Inc.

HTML

<script src="https://cdn.jsdelivr.net/npm/fancygrid/client/fancy.min.js"></script>

<div id="container" style="width: 700px; height: 400px;"></div>

CSS

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
}

JavaScript

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,
   ...