Table Editor Demo

The Table Editor demo shows the support for diagrams that are organized in a tabular way, for example in a grid or a swimlane layout. Besides model items and styles for Table, yFiles provides dedicated editing features to add, remove, resize, and reparent rows, columns, and the table contents.

Basic Gestures

Select a row or column by clicking on its header. Multiple rows or columns can be selected by keeping Ctrl pressed. Note that selecting a graph element will clear the table selection and vice versa.
Press F2 to edit the label of a selected stripe. Enter an empty text to remove the label.
Press the right mouse button on a stripe header to activate a context menu.
A node is assigned to the row and column its center coordinates lie in. Therefore it can be assigned to another row or column simply by dragging it to a new position.

Modifying the Table

Add a new row or column by dragging the corresponding item from the list and dropping it onto a table.
Delete selected items using the Delete key. Children will be reparented to the deleted stripe's parent. The parent and/or the siblings are resized to disturb the overall table layout as little as possible.
Move a stripe by dragging its header to a different position in the table. The highlight indicates whether the stripe is added as a new child or as a sibling of the drop target. Moving a stripe will move all its children as well as its contents.

Resizing Stripes

Drag a stripe border to resize the stripe. By default, the neighbor stripes and their contents are moved.
Except for the topmost/leftmost borders, resizing always extends the stripe to the bottom/to the right.
Press Shift at the beginning of the gesture to redistribute the sizes of the two attached stripes.
By default, stripe borders cannot be dragged over content nodes. Press Ctrl at the beginning of the resize gesture to resize the stripes freely.
Resizing the table node will resize the outermost stripe(s) accordingly.

Automatic Layout

Calculate a new hierarchical layout for the tables and their contents by pressing the layout button.