FancyGrid Fit Size

by FancyGrid Inc.

HTML

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

<div style="margin: 10px auto 10px;width: 80%;">
  <div style="position:relative">
    <div id="grid"></div>
  </div>
</div>

CSS

.photo img {
  width: 80px;
  margin-top: -5px;
  margin-left: -10px;
}

.id-column-cls .fancy-grid-cell-inner {
  margin-left: 14px;
  font-size: 14px;
}

.id-column-cls .fancy-grid-cell {
  border-right-width: 1px;
  border-right-color: rgb(211, 219, 225);
  background-color: rgb(240, 242, 244);
  background: #ececec url("a_bg.png") 0 -1px repeat-x !important;
  border-color: #ccc;
}

.column-percent .fancy-grid-cell-inner {
  font-weight: bold;
}

.fancy-theme-gray.fancy-panel .fancy-panel-header {
  color: white;
  background-color: white;
  border-bottom: 1px solid #d3dbe1;
}

.column-cls-kia-model-name .fancy-grid-cell {
  background: #626262  !important;
  border-right-color: #626262;
}

.column-cls-kia-model-name .fancy-grid-cell-inner {
  color: #FFF;
  font: 12px/20px Arial;
  margin-top: 6px;
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {

  new FancyGrid({
     title: {
      text: 'Kia Motors USA sales',
      style: {
        height: 45
      }
    },
    renderTo: 'grid',
    theme: 'gray',
    width: 'fit',
    height: 'fit',
    trackOver: true,
    selModel: 'row',
    data: {
      items: data
    },
    defaults: {
      type: 'number',
      width: 75,
      resizable: true,
      sortable: true
    },
    clicksToEdit: 1,
    columnLines: false,
    columns: [{
      title: ' ',
      index: 'id',
      width: 40,
      cls: 'id-column-cls',
      resizable: false
    },{
      title: 'Name',
      index: 'name',
      type: 'string',
      cls: 'column-cls-kia-model-name'
    },{
      title: 'January',
      index: 'year2015[0]',      
      format: 'number'
    },{
      title: 'February',
      index: 'year2015[1]',      
      format: 'number'
    },{
      title: 'March',
      index: 'year2015[2]',
      format: 'number'
    },{
      title: 'April',
      index: 'year2015[3]',
      format: 'number'
    },{
      title: 'May',
      index: 'year2015[4]',
      format: 'number'
    },{
      title: 'June',
      index: 'year2015[5]',
      format: 'number'
    },{
      title: 'July',
      index: 'year2015[6]',
      format: 'number'
    },{
      title: 'August',
      index: 'year2015[7]',
      format: 'number'
    },{
      title: 'September',
      index: 'year2015[8]',
      format: 'number'
    },{
      title: 'October',
      index: 'year2015[9]',
      format: 'number'
    },{
      title: 'November',
      index: 'year2015[10]',
      format: 'number'
    },{
      title: 'December',
      index: 'year2015[11]',
      format: 'number'
    },{
      title: 'Total',
      index: 'year2015[0] + year2015[1] + year2015[2] + year2015[3] + year2015[4] + year2015[5] + year2015[6] + year2015[7] + year2015[8] + year2015[9] + year2015[10] + year2015[11]',
      format: 'number'
    }]
  });

});

var data = [{
  id: '...