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.
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.
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.
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.
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
at the beginning of the resize gesture to resize the stripes freely.
- Resizing the table node will resize the outermost stripe(s) accordingly.
Calculate a new hierarchic layout for the tables and their contents by pressing the