Tree Table widget

A Tree Table widget displays data from multivariate and structured data sets in tabular format.

A Tree Table widget displays hierarchical data in rows and columns. Each row in the table represents an item, and each column shows a selected attribute of that item; each item can be expanded to show any child items. For example, a tree table might show a list of business services, each of which can be expanded to show the applications belonging to that service, along with key attributes for each application. To view nested data, expand the data rows.

Selecting of an item in the tree table sends context for that item to other widgets on the dashboard, that updates other widgets to update their display based on the selected item.

Using a table format, a Tree Table widget shows the hierarchical (parent-child) relationship of items in a dataset. The methodology of displaying the hierarchy differs for desktop and mobile devices:

On desktop devices, a tree metaphor is used to show the hierarchical relationship. To expand a particular item and view its related child items, click the + icon associated with the parent item. Conversely, click the - icon to collapse an item.
On mobile devices, a layered metaphor is used. If an item has child items associated with it, then a right-arrow () is located at the end of its data row. Click the right-arrow icon () to view the child items in the next layer down. The table refreshes to display the parent item at the top of the table and its child items listed underneath. To return to the upper level and view other parent records at the same level, click the left-arrow () associated with the parent item. Any child items that can be expanded in the lower layer, feature a right-arrow (). Click the right-arrow icon () for one of the records to drill down to the next layer. The table refreshes to display the selected record at the top of the table and any child items associated with listed below it. To return to the previous level, click the parent items left-arrow icon (). When the top data row does not feature a left-arrow icon (), you know that you are at the top level.

You can filter, sort, and search this data using the controls on the widget.

Important: The expand/collapse control for the Tree Table widget behaves differently between desktop and mobile devices:On a desktop browser, you will continue to see the +/- icon to expand/collapse as before. But on mobile devices for better usability and easier access by touch, a drill-thru control (>) is added at the end of the row. Touch the control to expand. It will change to < and touch again to collapse.

Depending on its event settings, a Tree Table widget may send a NodeClickedOn event when you click a row in the table. Any widget that is on the same page and subscribes to this event can be configured to update its content based on the context of the selected item. For example, when you select a item in the table, a chart on the same page may update to show data from that item.

A Tree Table widget may also update its contents based on NodeClickedOn events received from other widgets.

Note: In edit mode, an administrator can configure the Tree Table widget to open a discrete dashboard or page when it is clicked. If this is the case, then the Tree Table widget does not respond to or send NodeClickedOn events.

The Tree Table widget features the following UI elements:

Title bar

The title bar includes the following elements:

Widget title - The title bar displays a title for table, that is, if an administrator configured a title for the Tree Table widget. An administrator can also choose to hide the title bar.
The Edit options drop-down arrow icon () to provide access to edit mode for administrators.
The widget help icon (). Click the help icon to view help for the Tree Table widget.

Toolbar

If the toolbar is not visible, click the show toolbar arrow (

) to display it. The tool bar includes the following elements:

Table 1. Tree table toolbar and Actions menu
Icon or Command Button	Description
	Click to manually refresh the contents of the tree table.
	Use the drop-down arrow associated with the Actions button to access the following menu items: Refresh - Click to refresh the tree table contents. Clear Sort - Click to return the tree table data to the initial sort state. Note: Depending on the data set associated with the widget, additional menu items may be available through the Actions button.
Filter	Enter a text string in the Filter field to reduce the number of listed data elements based on the text string that you enter.

Table header row

The table header row lists the column names from the data set. You can resize column widths. You can sort data by individual columns in ascending or descending order. Data cells can also include images.