FancyGrid row expander

by FancyGrid Inc.

HTML

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

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

CSS

.image-staff {
  margin-top: 5px !important;
  margin-left: -5px !important;
  margin-right: 5px !important;
  border-radius: 2px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

JavaScript

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

  new FancyGrid({
    theme: 'gray',
    title: 'Row expander',
    renderTo: 'container',
    width: 450,
    height: 400,
    data: data,
    resizable: true,
    defaults: {
      type: 'string',
      width: 100,
      sortable: true,
      editable: true,
      ellipsis: true,
      resizable: true
    },
    selModel: 'row',
    expander: {
      tpl: [
        '<div style="float: left;">',
        '<img src="{image}" class="image-staff">',
        '</div>',
        '<div style="float: left;">',
        '<p>{name} {surname}</p>',
        '<p><b>Salary:</b> {salary}</p>',
        '<p><b>Phone:</b> {phone}</p>',
        '</div>'
      ].join(""),
      dataFn: function(grid, data) {
        data.salary = '$' + (data.hour * 170 * 12).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');

        return data;
      }
    },
    columns: [{
      type: 'expand'
    }, {
      title: 'Name',
      sortable: false,
      render: function(o) {
        o.value = o.data.name + ' ' + o.data.surname;

        return o;
      }
    }, {
      index: 'birthday',
      title: 'Birthday',
      type: 'date',
      format: {
        read: 'Y.m.d'
      },
      width: 100
    }, {
      index: 'position',
      title: 'Position',
      width: 100
    }, {
      index: 'hour',
      type: 'currency',
      title: 'Hour rate',
      width: 70
    }]
  });
});


var data = [{
  "position": "CEO",
  "name": "Nick",
  "surname": "Thomson",
  "id": "1",
  "hour": 70,
  "image": "https://fancygrid.com/images/staff/boy-4.png",
  "phone": "858-490-5000",
  "sales": [4, 7, 15, 4, 7, 8, 0],
  "birthday": "1961.10.01"
}, {
  "position": "Sales Director",
  "name": "Peter",
  "surname": "West",
  "id": "2",
  "hour": 40,
  "image": "https://fancygrid.com/images/staff/boy-2.png",
  "phone": "858-490-5001",
  "sales": [8, 9, 7, 9, 7, 5, 0],
  "birthday": "1965.1.5"
}, {
  "position": "Tech Director",
  "name": "Alexander",
 ...