FancyGrid Responsive

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">
    <img src="https://fancygrid.com/img/sorento.jpg" style="border:1px solid #dcdcdc; border-bottom-width: 0px;width:100%;box-sizing: border-box;">
    <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(http://fancygrid.com/img/a_bg.png) 0 -1px repeat-x !important;
  border-color: #ccc;
}

.fancy-theme-kia .fancy-panel {
  border-right-width: 1px;
  border-bottom: 1px solid #ddd;
}

.fancy-theme-kia .fancy-panel-body {
  border: 2px solid #ddd;
  border-top-width: 0px !important;
  border-left-width: 0px !important;
  border-bottom-width: 0px !important;
  border-right-width: 0px !important;
}

.fancy-theme-kia.fancy-panel-grid-inside {
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.fancy-theme-kia.fancy-panel .fancy-panel-header {
  color: white;
  background-color: white;
}

.fancy-theme-kia .fancy-grid-header-cell {
  background: #ececec url(http://fancygrid.com/img/a_bg.png) 0 -1px repeat-x !important;
  border-color: #ddd;
  color: #515151;
  font-size: 11px;
}

.fancy-theme-kia .fancy-grid-header {
  background-color: #F3F3F3;
}

.fancy-theme-kia .fancy-grid-cell-even {
  background-color: #f5f7f7;
  background-color: #F9F9F9;
}

.fancy-theme-kia .fancy-scroll-bottom-inner {
  background: #DAE1E8;
}

.fancy-theme-kia .fancy-grid-cell-inner {
  color: #888;
}

.fancy-theme-kia .fancy-grid-cell {
  border-bottom-color: #ccc;
}

.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;
}

body {
  background: #f9f9f9 url(http://fancygrid.com/img/bg_body.gif) 0 0 repeat;
}

.fancy-theme-kia .fancy-grid-column .fancy-grid-cell-over {
  background: #e5e5e7;
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {
  FancyGrid.defineTheme('kia', {
    extend: 'default',
    config: {
      panelBorderWidth: 0,
      gridBorders: [0, 0, 0, 0],
      gridWithoutPanelBorders: [1, 1, 1, 1],
      panelBodyBorders: [0, 0, 0, 0],
      titleHeight: 45
    }
  });

  new FancyGrid({
  	isTouch: true,
    title: {
      text: '<img src="https://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: 'kia',
    height: 350,
    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:...