FancyGrid Footer

by FancyGrid Inc.

HTML

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

<div id="container" style=""></div>

JavaScript

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

  new FancyGrid({
    renderTo: 'container',
    title: 'List of countries by IoT devices online',
    width: 590,
    height: 400,
    data: data,
    trackOver: true,
    selModel: 'row',
    footer: {
      status: '<span style="position: relative;top: 3px;">*</span> - Devices online per 100 inhabitants in 2015',
      source: {
        text: 'OECD',
        link: 'oecd.org'
      }
    },
    defaults: {
      type: 'string',
      width: 100,
      sortable: true,
      resizable: true
    },
    columns: [{
      index: 'rank',
      title: 'Rank',
      locked: true,
      align: 'center',
      cellAlign: 'center',
      cls: 'rank-cls',
      width: 55,
      type: 'number'
    }, {
      index: 'flag',
      width: 40,
      type: 'image',
      cls: 'flag'
    }, {
      index: 'country',
      title: 'Country'
    }, {
      index: 'online',
      title: 'Online *',
      type: 'number'
    }, {
      index: 'online',
      type: 'progressbar',
      width: 290,
      title: 'Relative size',
      sparkConfig: {
        percents: false
      }
    }]
  });

});

var data = [{
  rank: 1,
  flag: 'http://fancygrid.com/dashboards/iots/img/SouthKorea.png',
  country: 'South Korea',
  online: 37.9
}, {
  rank: 2,
  flag: 'http://fancygrid.com/dashboards/iots/img/Denmark.png',
  country: 'Denmark',
  online: 32.7
}, {
  rank: 3,
  flag: 'http://fancygrid.com/dashboards/iots/img/Switzerland.png',
  country: 'Switzerland',
  online: 29.0
}, {
  rank: 4,
  flag: 'http://fancygrid.com/dashboards/iots/img/USA.png',
  country: 'United States',
  online: 24.9
}, {
  rank: 5,
  flag: 'http://fancygrid.com/dashboards/iots/img/Netherlands.png',
  country: 'Netherlands',
  online: 24.7
}, {
  rank: 6,
  flag: 'http://fancygrid.com/dashboards/iots/img/Germany.png',
  country: 'Germany',
  online: 22.4
}, {
  rank: 7,
  flag: 'http://fancygrid.com/dashboards/iots/img/Sweden.png',
  country: 'Sweden',
  online:...