TableNode Class

TableNode instances are diagram nodes that can be used to display tabular or list data.

Namespace: MindFusion.Diagramming
File: TableNode.js

 Syntax

JavaScript

// class
TableNode.prototype = {}

 Remarks

Tables consist of Cell instances distributed across rows and columns. The number of rows and columns can be set by calling the redimTable method. Cells can be made to span several rows and columns by setting their rowSpan and columnSpan properties to values larger than one.

Rows can be assigned to distinct sections of the table. Each section can be collapsed or expanded, hiding or showing all rows in the section except the header one. To define a section, set a header row. A section consists of all rows after a header row and spans to the next header. Each header row displays a [±] button that allows expanding or collapsing the section interactively. The button appears on the left of the first cell of a header row. Clicking that button raises the tableSectionCollapsed and tableSectionExpanded  events. Sections can be collapsed or expanded programmatically by setting the expanded property of their header rows.

The structure of a table can be dynamically changed by adding and deleting rows and columns. This can be done with the addColumn and addRow methods as well as with the insertColumn, insertRow and redimTable methods. deleteRow and deleteColumn methods delete existing rows and columns.

Table cells can display text as specified via their text, textColor and textAlignment properties. Cells can also contain images, as set via the image and imageAlign properties.

Table nodes can show a caption in their title bar, whose text is set via the text property inherited from DiagramItem. The height of the caption bar is set via the captionHeight property.

 Inheritance Hierarchy

MindFusion.Diagramming.DiagramItem
    MindFusion.Diagramming.DiagramNode
        MindFusion.Diagramming.TableNode