Pergola panel with table layout

The "table" layout has the properties rows, cols, spacing, and attributes, an object where you define any <rect> attributes which are applied to the cells.

View as standalone SVG

View: panel with tabs – dialog panel – simple panel – basic panel – system notification – panel with table layout

A table cell is composed of a <g> element and a background <rect> element. The DOM references to the cells are stored in the cells array (left to right - top to bottom). Example, to update the contents of the fourth cell:
myPanel.cells[3].appendChild(...).

var myPanel = new pergola.Panel("My panel");

myPanel.contents = function () {
  var obj = this.owner;
  for (var c in obj.cells) {
    $C({element : "text",
      x : obj.layout.cellWidth / 2,
      y : obj.layout.cellHeight / 2 + 8,
      'font-size' : "16pt",
      "font-weight" : "bold",
      fill : "#F0F0F0",
      'text-anchor' : "middle",
      textNode : "CELL " + c,
      appendTo : obj.cells[c]
    });
  }
}

myPanel.build({
  type : "dialog",
  title : "PANEL WITH TABLE LAYOUT",
  x : 100,
  y : 50,
  width : 600,
  height : 440,
  okButton : {
    text : "OK"
  },
  cancelButton : {
    text : "Cancel"
  },
  display : "block",
  layout : {
    type : "table",
    x : 12,
    y : 12,
    rows : 2,
    cols : 2,
    spacing : 4,
    attributes : {
      fill : "#F8F8F8",
      stroke : "#D0D0D0",
      'stroke-width' : 1
    },
    fn : myPanel.contents
  }
});

Panel with Table Layout