Responsive Grid

FancyGrid

by FancyGrid Inc.

HTML

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

<script src="https://cdn.jsdelivr.net/npm/fancy-data/dist/bundle.js"></script>
<link href="https://fancygrid.com/dashboards/responsive/flags.css" rel="stylesheet">

<div style="height:calc(100% - 20px);padding: 10px;">
  <div id="container" style="height: 100%;"></div>
</div>

CSS

body {
  background: #f9f9f9 url(https://fancygrid.com/dashboards/responsive/bg_body.gif) 0 0 repeat !important;
  margin: 8px;
}

html, body{
  margin: 0;
  padding: 0;

  min-width: 100%;
  width: 100%;
  max-width: 100%;

  min-height: 100%;
  height: 100%;
  max-height: 100%;
}

.flag {
  display: inline-block;
  width: 22px;
  height: 18px;
  background-position: 20px 0px;
  position: relative;
  background-repeat: no-repeat;
  background-image: url(https://fancygrid.com/dashboards/responsive/flagIcons.svg);
}

.fancy-combo-list-value .flag {
  left: 4px;
  top: 1px;
}

.grid-staff .fancy-field-text-input {
  font-weight: bold !important;
  padding-top: 3px;
}

.country {
  font-weight: bold;
  margin-top: 2px;
}

.fancy-combo-result-list .country {
  top: -6px;
}

.fancy-combo-result-list .country {
  top: -6px;
}

.column-rating .fancy-grid-cell {
  color: #ccc;  
  position: relative;
  font-family: monospace;
  font-size: 16.25px;
}

.stars {
  color: #ffe850;  
  position: absolute;
  top: 9px;
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {
  new FancyGrid({
    renderTo: 'container',
    theme: 'gray',
    paging: {
      pageSize: 30
    },
    selModel: {
      type: 'rows',
      memory: true
    },
    trackOver: true,
    filter: true,
    searching: true,
    defaults: {
      type: 'string',
      width: 100,
      editable: true,
      sortable: true,
      draggable: true,
      resizable: true,
      filter: {
        header: true
      }
    },
    columns: [{
      select: true,
      rowdrag: true,    
      index: 'company',
      title: 'Company'
    }, {
      index: 'name',
      title: 'Name'
    }, {
      index: 'surname',
      title: 'Sur Name'
    }, {
      index: 'age',
      title: 'Age',
      type: 'number',
      width: 50
    }, {
      index: 'country',
      title: 'Country',
      width: 120,
      minListWidth: 160,
      type: 'combo',
      multiSelect: true,
      itemCheckBox: true,
      displayTpl: '<span class="flag {cls}"></span> <span class="country">{text}</span>',
      listItemTpl: '<span class="flag {cls}"></span> <span class="country">{text}</span>',
      data: countriesData,
      render: function(o) {
        var cls = 'flag-' + coutries[o.value];

        o.value = '<span class="flag ' + cls + '">&nbsp;</span> <span class="country">' + o.value + '</span>';
        return o;
      }
    }, {
      index: 'position',
      title: 'Position',
      width: 140
    }, {
      index: 'gender',
      hidden: true,
      title: 'gender'
    }, {
      index: 'balance',
      type: 'currency',
      align: 'right',
      cellAlign: 'right',
      title: 'Bank Balance'
    }, {
      index: 'rating',
      title: 'Rating',
      cls: 'column-rating',
      ellipsis: false,
      render: function(o) {
        var stars = '',
          i = 0,
          iL = parseInt(o.value);

        for (; i < iL; i++) {
          stars += '&#9733;';
        }

        o.value = [
          '<div class="stars">' +...