How to use the jointjs/dist/joint.shapes 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)());

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)());

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');
    const keyColor = keyType === 'PRIMARY KEY' ? 'yellow' : '';
    const cellSpanEl = this.$box.find('span');

    cellSpanEl.text(this.model.get('name'));
    this.$box.addClass(this.model.get('tableName'));

    if (keyType) {
      cellSpanEl.prepend(`<i class="privacy icon ${keyColor}"></i>`);

tables.forEach((table, index) => {
        tableShapes.push(new joint.shapes.sqlectron.Table({
          position: {
            x: 100 + (index % 6) * 100,
            y: 20 + (index % 4) * 100,
          },
          size: {
            width: 120,
            height: (columnsByTable[table].length + 1.5) * 20,
          },
          name: table,
        }));
        currentTable = tableShapes[index];

        columnsByTable[table].forEach((column, idx) => {
          columnKey = tableKeys[table].find((k) => k.columnName === column.name);

          newTabCell = new joint.shapes.sqlectron.TableCell({

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');
    const keyColor = keyType === 'PRIMARY KEY' ? 'yellow' : '';
    const cellSpanEl = this.$box.find('span');

    cellSpanEl.text(this.model.get('name'));
    this.$box.addClass(this.model.get('tableName'));

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)());

columnsByTable[table].forEach((column, idx) => {
          columnKey = tableKeys[table].find((k) => k.columnName === column.name);

          newTabCell = new joint.shapes.sqlectron.TableCell({
            position: {
              x: (currentTable.position().x),
              y: ((currentTable.position().y + 7) + (idx + 1) * 20),
            },
            size: {
              width: 100,
              height: 20,
            },
            name: column.name,
            tableName: table,
            keyType: columnKey ? columnKey.keyType : null,
          });
          currentTable.embed(newTabCell);
          tableCells.push(newTabCell);
        });
      });