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.