FancyGrid Summary Row

by FancyGrid Inc.

HTML

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

<script src="https://fancygrid.com/resources/js/jquery.sparkline.min.js"></script>

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

CSS

.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 !important;
  background-color: white !important;
  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 !important;
  font: 12px/20px Arial;
  margin-top: 6px;
}

JavaScript

var data = [{
  id: 1,
  name: 'Sorento',
  year2015: [7543, 8518, 10842, 9808, 10743, 8967, 9749, 10211, 9380, 8593, 9023, 12872]
}, {
  id: 2,
  name: 'Optima',
  year2015: [9394, 11584, 15485, 13650, 16349, 13488, 12638, 13980, 11719, 14381, 13048, 13682]
}, {
  id: 3,
  name: 'Sportage',
  year2015: [3054, 3407, 5184, 4273, 4487, 3550, 5292, 5749, 4012, 4476, 4211, 6044]
}, {
  id: 4,
  name: 'Cadenza',
  year2015: [383, 640, 783, 598, 526, 359, 410, 322, 859, 1018, 847, 598]
}, {
  id: 5,
  name: 'Forte',
  year2015: [6422, 5549, 7537, 7183, 8584, 7907, 7868, 6862, 5388, 5198, 5010, 5411]
}, {
  id: 6,
  name: 'K900',
  year2015: [119, 62, 88, 140, 133, 168, 480, 386, 329, 229, 228, 162]
}, {
  id: 7,
  name: 'Rio',
  year2015: [1572, 1943, 2483, 2802, 3615, 2420, 2227, 1734, 1480, 1571, 898, 997]
}, {
  id: 8,
  name: 'Sedona',
  year2015: [1670, 2362, 3638, 3394, 4110, 5434, 3672, 2545, 3039, 2332, 2243, 2316]
}, {
  id: 9,
  name: 'Soul',
  year2015: [8142, 9965, 12731, 11418, 13886, 11844, 13975, 17108, 13614, 12246, 10045, 12159]
}, ];

document.addEventListener("DOMContentLoaded", function() {
  new FancyGrid({
    title: {
      text: '<img src="http://fancygrid.com/img/kia.png" alt="KIA MOTORS" style="height: 24px;position: relative;top: -4px;"> <span style="color:#bb162b;position: relative;top: -10px;font-size: 20px;left: 4px;"> Kia Motors USA sales - 2015</span>',
      style: {
        height: 45
      }
    },
    renderTo: 'grid',
    theme: 'gray',
    width: 450,
    height: 'fit',
    trackOver: true,
    selModel: 'row',
    summary: true,
    data: {
      items: data
    },
    defaults: {
      type: 'number',
      width: 75,
      resizable: true,
      sortable: true,
      summary: 'sum'
    },
    clicksToEdit: 1,
    columns: [{
      title: ' ',
      index: 'id',
      width: 40,
      cls: 'id-column-cls',
      options: true,
      summary: {
        type: 'count',
        fn: function(value) {
          return '<div...