This shows a variable number of selectable "fields" for each "record".
To select multiple fields press Ctrl + Click or on mac
Cmd + Click. Draw new links by dragging from the background of
any field. Reconnect a selected link by dragging its diamond-shaped handle.
The user can delete a selected field.
The model data, automatically updated after each change or undo or redo:
This sample was derived from the Records sample.
The "Table" Panel, Panel.Table, arranges objects in rows and columns. Each object in a Table Panel is put into the cell indexed by the value of GraphObject.row and GraphObject.column. The panel will look at the rows and columns for all of the objects in the panel to determine how many rows and columns the table should have. More information can be found in the GoJS Intro.
It is sometimes useful to display a variable number of elements in a node by data binding to a JavaScript Array. In GoJS, this is simply achieved by binding (or setting) Panel.itemArray. The Panel will create an element in the panel for each value in the Array. More information can be found in the GoJS Intro.
A CommandHandler handles all default keyboard input events in a Diagram. There are many predefined methods on CommandHandler that implement common commands to operate on the Diagram or the current Diagram.selection>.
You can override CommandHandler.doKeyDown to handle additional keyboard shortcuts or to change which commands are invoked via the keyboard.
Your code can invoke a command by calling the appropriate method on the Diagram.commandHandler. Each command method has a corresponding can... predicate that your code can use to enable or disable any buttons that invoke the command. Your code can customize the behavior of a command by overriding the method on CommandHandler, or by setting properties on the CommandHandler or Diagram or Parts -- see GoJS Permissions.
There are several CommandHandler extensions that provide additional functionality.
More information can be found in the GoJS Intro.