Table Panel with dynamic column widths

GoJS
2

I’m trying to think of the cleanest way to do this. Something like this: http://codepen.io/simonsarris/pen/ZGerMG

  var swimlaneHorizontal = $m(go.Group, "Auto",
      {
        locationSpot: go.Spot.Center,
      },
      new go.Binding("location", "location", go.Point.parse), //the initial location of the group
      $m(go.Shape, "Rectangle", {fill: null }),
      $m(go.Panel, "Table",
        { height: 100, width: 200, background: 'rgba(255,0,0,.2)' },
        new go.Binding("width", "width"),
        new go.Binding("height", "height"),
        $m(go.RowColumnDefinition, { column: 0, minimum: 30 } ),
        $m(go.RowColumnDefinition, { column: 1, separatorStroke: 'black' } ),
          $m(go.TextBlock, new go.Binding("text", "text"), {
            column: 0, angle: 270, background: 'rgba(0,255,0,.3)', wrap: go.TextBlock.WrapFit
            },
            new go.Binding("width", "height")
          ),
        $m(go.Panel,
          { column: 1, stretch: go.GraphObject.Fill, background: 'rgba(0, 0, 255, .3)' },
          $m(go.Placeholder)
        )
      )
  );

There may be an even cleaner way, though. Background colors are added for debugging/visualizing the space that things take up.

Note how I’m using a table panel with two RowColumnDefinitions, and Column 1 has a separatorStroke of black, which gives a 1-pixel line between the two columns. This allows for a nicer template since it means only one auto panel is required, one that goes around the entire table.