Tree Table


The tree table is located on the left-hand side of the Gantt chart. It is used in combination with a column header and a row header. If a Gantt chart shows more than just one tree table, then the column header gets shared by all of them (see DualGanttChart). The tree table is responsible for displaying the hierarchical structure of the data. In most applications this data will be tasks or resources (which includes people, personnel). The data does not have to be hierarchical, but if it is the table will show handles for expanding and collapsing the hierarchy nodes (e.g. a task that contains subtasks, or a group of people and the people within that group). If the data is not hierarchical then the table will simply show a list and no expansion handles will be present. The following actions can be performed in the tree table and its headers:

  • Expanding / collapsing nodes - the user can expand or collapse any tree node, which contains children nodes. The row header will display an appropriate toggle icon based on the current state of the node. The look of the toggle icon depends on the look & feel of the application. The Windows look & feel will display a plus and a minus icon, while the Macintosh look & feel displays a triangle.
  • Changing the height of a row - the height of the table rows can be changed in the row header component on the left side of the table. The user has to move the mouse cursor on top of the horizontal line at the bottom of the row. If the row is resizable then the cursor will change to reflect this. The user can now press the left mouse button and perform a drag operation. A black line will indicate the new height that will be assigned to the row if the user releases the mouse button. The user can press the SHIFT key while performing this action if he wishes to assign the same new height to all rows at the same time. Selecting several rows first in combination with the SHIFT key will cause only those selected rows to be resized.
  • Selecting rows - rows can be selected by clicking inside the row header. The CTRL key can be used to select multiple rows, the SHIFT key can be used to select intervals / ranges of rows.
  • Sorting one or more columns - a column can be sorted with a single click inside the header of the column. The values inside the column will be sorted in ascending order (a, b, c, ...). A second click will change the sort direction to descending (z, y, x, ...). A third click removes the sort direction completely but leaves the column values in the order of the last sorting. Applications can control the sorting behaviour by restricting the possible sort directions (only allow ascendig, descending) or by completely disabling the feature from one, several, or all columns. The tree table also supports multi-column sorting, which is performed by pressing the SHIFT key while selecting several column headers. The headers will show the usual sort direction arrow with an additional number below it. The numbers indicate the sequence in which the columns get sorted.
  • Showing / hiding columns - the "corner stone" in the upper left corner of the tree table is used to bring up a selector window that allows the user to specify which table columns will be shown or hidden. In the selector window the user can use the ">>" and "<<" buttons to move columns from the list of available columns to the list of used columns and vice versa. Inside the list of used columns the user can determine the order in which the columns will be shown. This is done by selecting one of the used columns and pressing the "up" and "down" buttons.
  • Auto-formatting columns - auto formatting means that the width of a column gets adjusted in such a way that the content of the column's cells will be completely visible. Columns can be formatted by either using the popup menu attached to the column header or by moving the mouse cursor onto the right edge of a column header. If the column is resizable then the cursor will change to reflect this (resize cursor). Double clicking while this cursor is visible will auto-format the column. It is important to note that the auto-format feature also considers the width of cell editors, which means that a column might appear to be too wide for its values (but just the right width when using the editor).
  • Drag & Drop - the ordering of the tree nodes can be be changed by dragging tree nodes from one row to another. The drag and drop behaviour is partly platform dependent. On Windows the user can move a node by pressing the mouse button and dragging it to the new location of the node. A copy can be performed by pressing the CTRL key at the same time. Whether a node is draggable at all and where a node can be dropped depends on the application and its configuration of the tree table's behaviour.
  • Using the popup menus - three different popup menus are available for the table. One menu is attached to the table and its cells, one to the row header, and one to the column header. Default popup menus are provided, which can be replaced, extended, or modified by the final application.