Panel with Table Layout

View as standalone SVG

View other Panel examples: panel with tabsdialog panelsimple panelbasic panelpanel with table layout

The layout object property of this pergola.Panel object has the properties rows, cols, spacing, and attributes, an object where you can specify any <rect> attribute properties for the cells using SVG vocabulary and grammar.

Panel contents can be appended manually, or by setting the contains node or function property, or by specifying a 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(...).