How to use the jointjs/dist/joint.util function in jointjs

import joint from 'jointjs/dist/joint';
import bindAll from 'lodash.bindall';
import template from 'lodash.template';


// Custom joint shape representing table/view object
joint.shapes.sqlectron = {};
joint.shapes.sqlectron.Table = joint.shapes.basic.Rect.extend({
  defaults: joint.util.deepSupplement({
    type: 'sqlectron.Table',
    attrs: {
      rect: { stroke: 'none', 'fill-opacity': 0 },
    },
  }, joint.shapes.basic.Rect.prototype.defaults),
});

joint.shapes.sqlectron.TableView = joint.dia.ElementView.extend({
  template: '<div class="sqlectron-table"><p><span></span></p></div>',

  initialize(...args) {
    bindAll(this, 'updateBox');
    joint.dia.ElementView.prototype.initialize.apply(this, args);
    this.$box = $(template(this.template)());

    this.$box.find('span').text(this.model.get('name'));

import joint from 'jointjs/dist/joint';
import bindAll from 'lodash.bindall';
import template from 'lodash.template';


joint.shapes.sqlectron.TableCell = joint.shapes.basic.Rect.extend({
  defaults: joint.util.deepSupplement({
    type: 'sqlectron.TableCell',
    attrs: {
      rect: { stroke: 'none', 'fill-opacity': 0, style: { 'pointer-events': 'none' } },
    },
  }, joint.shapes.basic.Rect.prototype.defaults),
});

joint.shapes.sqlectron.TableCellView = joint.dia.ElementView.extend({
  template: '<div class="sqlectron-table-cell"><span style="white-space:nowrap;"></span></div>',

  initialize(...args) {
    bindAll(this, 'updateCell');
    joint.dia.ElementView.prototype.initialize.apply(this, args);
    this.$box = $(template(this.template)());

    const keyType = this.model.get('keyType');