FancyGrid row expander with sub grid

by FancyGrid Inc.

HTML

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

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

CSS

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

.fancy-theme-gray.fancy-panel .fancy-panel-header {
  background-color: white;
  border-bottom: 2px solid #e3223a;
}

.fancy-theme-gray .fancy-checkbox-expander {
  margin-top: 10px;
}

.fancy-grid-expand-row .fancy-grid {
  border-top: 1px solid #d3dbe1 !important;
}

JavaScript

document.addEventListener("DOMContentLoaded", () => {
  new FancyGrid({
    renderTo: 'container',
    width: 600,
    height: 600,
    data: data,
    selModel: 'rows',
    trackOver: true,
    theme: 'extra-gray',
    titleHeight: 65,
    cellHeight: 60,
    columnLines: false,
    defaults: {
      type: 'string',
      width: 100,
      sortable: true,
      resizable: true,
      vtype: 'notempty'
    },
    expander: {
      render: function(renderTo, data, columnsWidth) {
        new FancyGrid({
          renderTo: renderTo,
          width: columnsWidth - 20,
          height: 'fit',
          minHeight: 100,
          trackOver: true,
          selModel: 'rows',
          theme: 'extra-gray',
          data: data.sold,
          emptyText: 'Nothing to display',
          defaults: {
            type: 'string'
          },
          columns: [{
            index: 'name',
            width: 140,
            title: 'Name'
          }, {
            index: 'price',
            width: 78,
            type: 'currency',
            title: 'price',
          }, {
            title: 'Color',
            index: 'color',
            width: 70,
            type: 'color',
            cls: 'color-column'
          }]
        });
      }
    },
    columns: [{
      type: 'expand',
      render: function(o) {
        if (o.data.sold.length === 0) {
          o.hidden = true;
        }

        return o;
      }
    }, {
      type: 'image',
      index: 'image',
      title: 'Photo',
      cls: 'image-staff',
      width: 100
    }, {
      title: 'Name',
      sortable: false,
      render: function(o) {
        o.value = o.data.name + ' ' + o.data.surname;

        return o;
      }
    }, {
      index: 'position',
      title: 'Position',
      width: 100
    }, {
      index: 'phone',
      title: 'Phone',
      width: 100
    }]
  });
});

var data = [{
  "position": "CEO",
  "name": "Nick",
  "surname": "Thomson",
  "id": "1",
  "hour": 70,
  "image":...