Edit in JSFiddle

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",
  "surname": "Brown",
  "id": "3",
  "hour": 35,
  "image": "https://fancygrid.com/images/staff/boy-3.png",
  "phone": "858-490-5002",
  "sales": [2, 2, 3, 1, 1, 2, 0],
  "birthday": "1966.8.21"
}, {
  "position": "Clients Manager",
  "name": "Nicholas",
  "surname": "Miller",
  "id": "4",
  "hour": 35,
  "image": "https://fancygrid.com/images/staff/boy-5.png",
  "phone": "858-490-5003",
  "sales": [3, 3, 4, 2, 3, 3, 0],
  "birthday": "1967.9.17"
}, {
  "position": "Staff Director",
  "name": "Sophia",
  "surname": "Smith",
  "id": "5",
  "hour": 30,
  "image": "https://fancygrid.com/images/staff/girl.png",
  "phone": "858-490-5004",
  "sales": [0, 0, 0, 0, 0, 0, 0],
  "birthday": "1970.2.1"
}, {
  "position": "Manager",
  "name": "Emma",
  "surname": "Walker",
  "id": "6",
  "hour": 30,
  "image": "https://fancygrid.com/images/staff/girl-1.png",
  "phone": "858-490-5005",
  "sales": [5, 4, 3, 5, 5, 8, 0],
  "birthday": "1965.1.7"
}, {
  "position": "Manager",
  "name": "Ted",
  "surname": "Smith",
  "id": "7",
  "hour": 30,
  "image": "https://fancygrid.com/images/staff/boy.png",
  "phone": "858-490-5006",
  "sales": [1, 3, 4, 5, 2, 2, 0],
  "birthday": "1970.8.11"
}, {
  "position": "Manager",
  "name": "Ryan",
  "surname": "Walker",
  "id": "8",
  "hour": 30,
  "image": "https://fancygrid.com/images/staff/boy-1.png",
  "phone": "858-490-5007",
  "sales": [1, 2, 3, 4, 4, 3, 0],
  "birthday": "1975.11.7"
}, {
  "position": "Manager",
  "name": "Lily",
  "surname": "Richardson",
  "id": "9",
  "hour": 30,
  "image": "https://fancygrid.com/images/staff/girl-2.png",
  "phone": "858-490-5008",
  "sales": [2, 2, 3, 3, 3, 1, 0],
  "birthday": "1977.10.1"
}, {
  "position": "Manager",
  "name": "Mia",
  "surname": "Grant",
  "id": "10",
  "hour": 30,
  "image": "https://fancygrid.com/images/staff/girl-3.png",
  "phone": "858-490-5009",
  "sales": [2, 3, 4, 4, 5, 6, 0],
  "birthday": "1978.8.3"
}, {
  "position": "Manager",
  "name": "Olivia",
  "surname": "Edwards",
  "id": "11",
  "hour": 30,
  "image": "https://fancygrid.com/images/staff/girl-4.png",
  "phone": "858-490-5020",
  "sales": [2, 1, 3, 4, 5, 1, 0],
  "birthday": "1979.9.8"
}, {
  "position": "Manager",
  "name": "Katie",
  "surname": "Gardner",
  "id": "12",
  "hour": 30,
  "image": "https://fancygrid.com/images/staff/girl-5.png",
  "phone": "858-490-5021",
  "sales": [2, 3, 4, 5, 1, 2, 0],
  "birthday": "1988.7.7"
}, {
  "position": "Manager",
  "name": "Ivan",
  "surname": "Woods",
  "id": "13",
  "hour": 30,
  "image": "https://fancygrid.com/images/staff/man-1.png",
  "phone": "858-490-5022",
  "sales": [1, 2, 3, 4, 1, 1, 0],
  "birthday": "1990.1.1"
}, {
  "position": "Junior Manager",
  "name": "Lorenzo",
  "surname": "Simpson",
  "id": "14",
  "hour": 20,
  "image": "https://fancygrid.com/images/staff/man.png",
  "phone": "858-490-5023",
  "sales": [1, 0, 1, 1, 2, 1, 0],
  "birthday": "1995.2.5"
}];

<script src="https://cdn.fancygrid.com/fancy.min.js"></script>

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

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