<!-- use go-debug.js when developing and go.js when deploying -->
<script src=" https://gojs.net/latest/release/go-debug.js"></script>
<script>
  "use strict";function TableLayout(){go.Layout.call(this),this._defaultAlignment=go.Spot.Default,this._defaultStretch=go.GraphObject.Default,this._rowDefs=[],this._colDefs=[]}go.Diagram.inherit(TableLayout,go.Layout),TableLayout.prototype.cloneProtected=function(t){go.Layout.prototype.cloneProtected.call(this,t),t._defaultAlignment=this._defaultAlignment,t._defaultStretch=this._defaultStretch;for(var e=0;e<this._rowDefs.length;e++){var i=this._rowDefs[e];t._rowDefs.push(void 0!==i?i.copy():i)}for(e=0;e<this._colDefs.length;e++){i=this._colDefs[e];t._colDefs.push(void 0!==i?i.copy():i)}},Object.defineProperty(TableLayout.prototype,"defaultAlignment",{get:function(){return this._defaultAlignment},set:function(t){this._defaultAlignment=t}}),Object.defineProperty(TableLayout.prototype,"defaultStretch",{get:function(){return this._defaultStretch},set:function(t){this._defaultStretch=t}}),TableLayout.prototype.getRowDefinition=function(t){if(t<0)throw new Error("Row index must be non-negative, not: "+t);t=Math.round(t);var e=this._rowDefs,i=e[t];return void 0===i&&((i=new go.RowColumnDefinition).isRow=!0,i.index=t,e[t]=i),i},Object.defineProperty(TableLayout.prototype,"rowCount",{get:function(){return this._rowDefs.length}}),TableLayout.prototype.findRowForDocumentY=function(t){if((t-=this.arrangementOrigin.y)<0)return-1;for(var e=0,i=this._rowDefs,a=i.length,o=0;o<a;o++){var n=i[o];if(void 0!==n&&t<(e+=n.total))return o}return o},TableLayout.prototype.getColumnDefinition=function(t){if(t<0)throw new Error("Column index must be non-negative, not: "+t);t=Math.round(t);var e=this._colDefs,i=e[t];return void 0===i&&((i=new go.RowColumnDefinition).isRow=!1,i.index=t,e[t]=i),i},Object.defineProperty(TableLayout.prototype,"columnCount",{get:function(){return this._colDefs.length}}),TableLayout.prototype.findColumnForDocumentX=function(t){if((t-=this.arrangementOrigin.x)<0)return-1;for(var e=0,i=this._colDefs,a=i.length,o=0;o<a;o++){var n=i[o];if(void 0!==n&&t<(e+=n.total))return o}return o},TableLayout.prototype.getEffectiveTableStretch=function(t,e,i){var a=t.stretch;if(a!==go.GraphObject.Default)return a;var o=void 0,n=void 0;switch(e.stretch){case go.GraphObject.Default:case go.GraphObject.Horizontal:break;case go.GraphObject.Vertical:case go.GraphObject.Fill:n=!0}switch(i.stretch){case go.GraphObject.Default:case go.GraphObject.Vertical:break;case go.GraphObject.Horizontal:case go.GraphObject.Fill:o=!0}var r=this.defaultStretch;return o=void 0===o&&(r===go.GraphObject.Horizontal||r===go.GraphObject.Fill),n=void 0===n&&(r===go.GraphObject.Vertical||r===go.GraphObject.Fill),!0===o&&!0===n?go.GraphObject.Fill:!0===o?go.GraphObject.Horizontal:!0===n?go.GraphObject.Vertical:go.GraphObject.None},TableLayout.prototype.doLayout=function(t){this.arrangementOrigin=this.initialOrigin(this.arrangementOrigin);var e=new go.List;this.collectParts(t).each(function(t){t instanceof go.Link||e.add(t)}),this.diagram.startTransaction("TableLayout");var i=new go.Size,a=this.measureTable(1/0,1/0,e,i,0,0);this.arrangeTable(e,i,a),this.afterArrange(e,a),this.diagram.commitTransaction("TableLayout")},TableLayout.prototype.beforeMeasure=function(t,e){},TableLayout.prototype.afterArrange=function(t,e){},TableLayout.prototype.measureTable=function(t,e,i,a,o,n){for(var r=i.length,h=[],l=0;l<r;l++){h[(P=i.elt(l)).row]||(h[P.row]=[]),h[P.row][P.column]||(h[P.row][P.column]=[]),h[P.row][P.column].push(P)}this.beforeMeasure(i,h);var u=[],c=[],s=[],g={count:0},f={count:0},m=t,d=e,p=this._rowDefs;r=p.length;for(l=0;l<r;l++){void 0!==(A=p[l])&&(A.actual=0)}r=(p=this._colDefs).length;for(l=0;l<r;l++){void 0!==(A=p[l])&&(A.actual=0)}var w=h.length,b=0;for(l=0;l<w;l++)h[l]&&(b=Math.max(b,h[l].length));var v=0;w=h.length;for(l=0;l<w;l++)if(h[l]){b=h[l].length,(X=this.getRowDefinition(l)).measured=0;for(var x=0;x<b;x++)if(h[l][x]){var y=this.getColumnDefinition(x);void 0===u[x]&&(y.measured=0,u[x]=!0);for(var D=h[l][x],M=D.length,O=0;O<M;O++){var j=(P=D[O]).rowSpan>1||P.columnSpan>1;j&&c.push(P);var S=($=P.margin).right+$.left,G=$.top+$.bottom,T=this.getEffectiveTableStretch(P,X,y),L=P.resizeObject.desiredSize,_=!isNaN(L.width),C=!isNaN(L.height),z=_&&C;if(j||T===go.GraphObject.None||z||(void 0!==g[x]||T!==go.GraphObject.Fill&&T!==go.GraphObject.Horizontal||(g[x]=-1,g.count++),void 0!==f[l]||T!==go.GraphObject.Fill&&T!==go.GraphObject.Vertical||(f[l]=-1,f.count++),s.push(P)),T!==go.GraphObject.None){var N=new go.Size(NaN,NaN);P.resizeObject.desiredSize=N,P.ensureBounds()}var F=this.getLayoutBounds(P),R=Math.max(F.width+S,0),E=Math.max(F.height+G,0);if(1===P.rowSpan&&(C||T===go.GraphObject.None||T===go.GraphObject.Horizontal)){var A=this.getRowDefinition(l);(v=Math.max(E-A.actual,0))>d&&(v=d),A.measured=A.measured+v,A.actual=A.actual+v,d=Math.max(d-v,0)}if(1===P.columnSpan&&(_||T===go.GraphObject.None||T===go.GraphObject.Vertical)){A=this.getColumnDefinition(x);(v=Math.max(R-A.actual,0))>m&&(v=m),A.measured=A.measured+v,A.actual=A.actual+v,m=Math.max(m-v,0)}}}}var H=0,V=0;r=this.columnCount;for(l=0;l<r;l++)void 0!==this._colDefs[l]&&(H+=this.getColumnDefinition(l).measured);r=this.rowCount;for(l=0;l<r;l++)void 0!==this._rowDefs[l]&&(V+=this.getRowDefinition(l).measured);m=Math.max(t-H,0);var k=d=Math.max(e-V,0),B=m;r=s.length;for(l=0;l<r;l++){var P=s[l],X=this.getRowDefinition(P.row),Y=(y=this.getColumnDefinition(P.column),this.getLayoutBounds(P));S=($=P.margin).right+$.left,G=$.top+$.bottom;0===y.measured&&void 0!==g[P.column]?g[P.column]=Math.max(Y.width+S,g[P.column]):g[P.column]=null,0===X.measured&&void 0!==f[P.row]?f[P.row]=Math.max(Y.height+G,f[P.row]):f[P.row]=null}var q=0,I=0;for(l in f)"count"!==l&&(q+=f[l]);for(l in g)"count"!==l&&(I+=g[l]);var J=new go.Size;for(l=0;l<r;l++){P=s[l],X=this.getRowDefinition(P.row),y=this.getColumnDefinition(P.column);var K=0;isFinite(y.width)?K=y.width:(K=isFinite(m)&&null!==g[P.column]?0===I?y.actual+m:g[P.column]/I*B:null!==g[P.column]?m:y.actual||m,K=Math.max(0,K-y.computeEffectiveSpacing()));var Q=0;switch(isFinite(X.height)?Q=X.height:(Q=isFinite(d)&&null!==f[P.row]?0===q?X.actual+d:f[P.row]/q*k:null!==f[P.row]?d:X.actual||d,Q=Math.max(0,Q-X.computeEffectiveSpacing())),J.setTo(Math.max(y.minimum,Math.min(K,y.maximum)),Math.max(X.minimum,Math.min(Q,X.maximum))),T=this.getEffectiveTableStretch(P,X,y)){case go.GraphObject.Horizontal:J.height=Math.max(J.height,X.actual+d);break;case go.GraphObject.Vertical:J.width=Math.max(J.width,y.actual+m)}S=($=P.margin).right+$.left,G=$.top+$.bottom,F=this.getLayoutBounds(P),R=Math.max(F.width+S,0),E=Math.max(F.height+G,0);isFinite(m)&&(R=Math.min(R,J.width)),isFinite(d)&&(E=Math.min(E,J.height));var U=0;U=X.actual,X.actual=Math.max(X.actual,E),X.measured=Math.max(X.measured,E),v=X.actual-U,d=Math.max(d-v,0),U=y.actual,y.actual=Math.max(y.actual,R),y.measured=Math.max(y.measured,R),v=y.actual-U,m=Math.max(m-v,0)}new go.Size;if(0!==(r=c.length)){var W=[],Z=[];for(l=0;l<w;l++)if(h[l]){b=h[l].length;X=this.getRowDefinition(l);W[l]=X.actual;for(x=0;x<b;x++)if(h[l][x]){y=this.getColumnDefinition(x);Z[x]=y.actual}}}for(l=0;l<r;l++){P=c[l],X=this.getRowDefinition(P.row),y=this.getColumnDefinition(P.column);switch(J.setTo(Math.max(y.minimum,Math.min(t,y.maximum)),Math.max(X.minimum,Math.min(e,X.maximum))),T=this.getEffectiveTableStretch(P,X,y)){case go.GraphObject.Fill:0!==Z[y.index]&&(J.width=Math.min(J.width,Z[y.index])),0!==W[X.index]&&(J.height=Math.min(J.height,W[X.index]));break;case go.GraphObject.Horizontal:0!==Z[y.index]&&(J.width=Math.min(J.width,Z[y.index]));break;case go.GraphObject.Vertical:0!==W[X.index]&&(J.height=Math.min(J.height,W[X.index]))}isFinite(y.width)&&(J.width=y.width),isFinite(X.height)&&(J.height=X.height);S=($=P.margin).right+$.left,G=$.top+$.bottom,F=this.getLayoutBounds(P),R=Math.max(F.width+S,0),E=Math.max(F.height+G,0);for(var $,tt=0,et=0;et<P.rowSpan&&!(P.row+et>=this.rowCount);et++)tt+=(A=this.getRowDefinition(P.row+et)).total||0;if(tt<E)for(var it=E-tt;it>0;){var at=A.actual||0;if(isNaN(A.height)&&A.maximum>at&&(A.actual=Math.min(A.maximum,at+it),A.actual!==at&&(it-=A.actual-at)),A.index-1==-1)break;A=this.getRowDefinition(A.index-1)}var ot=0;for(et=0;et<P.columnSpan&&!(P.column+et>=this.columnCount);et++)ot+=(A=this.getColumnDefinition(P.column+et)).total||0;if(ot<R)for(it=R-ot;it>0;){at=A.actual||0;if(isNaN(A.width)&&A.maximum>at&&(A.actual=Math.min(A.maximum,at+it),A.actual!==at&&(it-=A.actual-at)),A.index-1==-1)break;A=this.getColumnDefinition(A.index-1)}}r=this.columnCount;for(l=0;l<r;l++)void 0!==this._colDefs[l]&&((A=this.getColumnDefinition(l)).position=a.width,0!==A.actual&&(a.width+=A.actual,a.width+=A.computeEffectiveSpacing()));r=this.rowCount;for(l=0;l<r;l++)void 0!==this._rowDefs[l]&&((A=this.getRowDefinition(l)).position=a.height,0!==A.actual&&(a.height+=A.actual,a.height+=A.computeEffectiveSpacing()));return h},TableLayout.prototype.arrangeTable=function(t,e,i){t.length;for(var a=this.arrangementOrigin.x,o=this.arrangementOrigin.y,n=0,r=0,h=i.length,l=0,u=0;u<h;u++)i[u]&&(l=Math.max(l,i[u].length));var c=new go.Size;for(u=0;u<h;u++)if(i[u]){l=i[u].length;var s=this.getRowDefinition(u);r=o+s.position+s.computeEffectiveSpacingTop();for(var g=0;g<l;g++)if(i[u][g]){var f=this.getColumnDefinition(g);n=a+f.position+f.computeEffectiveSpacingTop();for(var m=i[u][g],d=m.length,p=0;p<d;p++){var w=m[p];c.setTo(0,0);for(var b=1;b<w.rowSpan&&!(u+b>=this.rowCount);b++){var v=this.getRowDefinition(u+b);c.height+=v.total}for(b=1;b<w.columnSpan&&!(g+b>=this.columnCount);b++){var x=this.getColumnDefinition(g+b);c.width+=x.total}var y=f.actual+c.width,D=s.actual+c.height,M=new go.Rect;M.x=n,M.y=r,M.width=y,M.height=D;n+y>e.width&&Math.max(e.width-n,0),r+D>e.height&&Math.max(e.height-r,0);var O=w.alignment,j=0,S=0,G=0,T=0;if(O.isDefault()){(O=this.defaultAlignment).isSpot()||(O=go.Spot.Center),j=O.x,S=O.y,G=O.offsetX,T=O.offsetY;var L=f.alignment,_=s.alignment;L.isSpot()&&(j=L.x,G=L.offsetX),_.isSpot()&&(S=_.y,T=_.offsetY)}else j=O.x,S=O.y,G=O.offsetX,T=O.offsetY;(isNaN(j)||isNaN(S))&&(j=.5,S=.5,G=0,T=0);var C=0,z=0,N=w.margin,F=N.left+N.right,R=N.top+N.bottom,E=this.getEffectiveTableStretch(w,s,f);C=E===go.GraphObject.Fill||E===go.GraphObject.Horizontal?Math.max(y-F,0):this.getLayoutBounds(w).width,z=E===go.GraphObject.Fill||E===go.GraphObject.Vertical?Math.max(D-R,0):this.getLayoutBounds(w).height;var A=w.maxSize,H=w.minSize;C=Math.min(A.width,C),z=Math.min(A.height,z);var V=(C=Math.max(H.width,C))+F,k=(z=Math.max(H.height,z))+R;M.x+=M.width*j-V*j+G+N.left,M.y+=M.height*S-k*S+T+N.top,w.moveTo(M.x,M.y),E!==go.GraphObject.None&&(w.resizeObject.desiredSize=new go.Size(C,z))}}}};
</script>
<!-- The DIV for a Diagram needs an explicit size -->
<div id="myDiagramDiv" style="width:500px;height:500px;background-color: #DAE4E4;margin:20px auto;border:1px solid black">

</div>

var $$ = go.GraphObject.make;
var myDiagram = $$(go.Diagram, "myDiagramDiv",
{
});

// Node template declaration
myDiagram.nodeTemplate = $$(go.Node, "Auto",
        { stretch: go.GraphObject.Horizontal },
        new go.Binding("row"),
        $$(go.Shape,
            {
                fill: "rgba(0,0,0,.1)", 
                strokeWidth: 0,
                stretch: go.GraphObject.Horizontal,
                cursor: "pointer",
            },
            new go.Binding("fill", "color")
        ),
        $$(go.Panel, "Horizontal",
            $$(go.TextBlock,
                { 
                    margin: 6,
                    font: "normal 11px sans-serif",
                    stroke: "white",
                    cursor: "pointer"
                },
                new go.Binding("text", "title")
            ),
            $$(go.TextBlock,
                { 
                    margin: 6,
                    font: "normal 11px sans-serif",
                    stroke: "white",
                    cursor: "pointer"
                },
                new go.Binding("text")
            )
        )
    )

myDiagram.groupTemplate = $$(go.Group, "Horizontal",
        { layout: $$(TableLayout, { }) },
        $$(go.TextBlock,
            { 
                margin: new go.Margin(8, 0, 4, 8), 
                alignment: go.Spot.TopCenter
            },
            new go.Binding("text", "title")
        ),
        $$(go.TextBlock,
            { 
                margin: new go.Margin(8, 0, 4, 8), 
                alignment: go.Spot.TopCenter
            },
            new go.Binding("text")
            // .makeTwoWay()
        ),
        $$(go.Shape,
            {
                strokeWidth: 0,
                portId: "", 
                cursor: "pointer",
            },
            new go.Binding("fill", "color"),
        ),
        $$(go.Panel, "Vertical", 
          
            $$(go.Placeholder,
                { 
                    margin: new go.Margin(0, 8, 8, 8),
                    alignment: go.Spot.Center,
                    padding: 20
                }

            )
        )
    )

    // Model declaration
    var nodeDataArray = [
      {
        isGroup: true, key: "1", color: "grey", text: "Hey", title: "true"
      },
      { group: "1", text: "very long string", title: "hh", row: 0},
      { key: "8", group: "1", text: "hello", title: "h", row: 1},
    ];
    myDiagram.model = new go.GraphLinksModel(nodeDataArray);