Appearance
Tree Table
A hierarchy in the first column with live values or fixed fields in the other columns.
In Studio
In Studio, double-click Tree Table in the Components category of the Components panel. It is added to the open view, where you can drag it into place.
When to use
Use Tree Table to browse a plant hierarchy and read values beside each node: flow per lift station, status per device. A collapsed parent shows the worst alarm beneath it.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| Variant | hairline, striped, cards | hairline | How it looks: hairline (default, thin row dividers), striped or cards. |
| Density | comfortable, compact | comfortable | comfortable (default) or compact row spacing. |
| Source | property, tag-folder, udt-instances | property | Where the nodes come from: property (the items property, nested), tag-folder (browsed from the tag provider as folders are opened) or udt-instances. |
| Root Path | String | (none) | For tag sources, the folder, provider or UDT instance shown at the top level, for example [Plant]Area1. Blank shows every provider. |
| Tree Column Title | String | Name | The heading of the first column. Default Name. |
| Selection | single, multi | single | single (default) or multi. |
| Selected Paths | String | (none) | The selected node ids. Bind it to read or move the selection. Accepts an array, a JSON array or comma-separated ids. |
| Expanded Paths | String | (none) | The expanded node ids, bindable the same way. |
| Search Box | false, true | false | Shows a search box above the table. |
| Search Text | String | (none) | The text in the search box, bindable. |
| Icons | auto, on, off | auto | auto (default) shows an icon per node type, on always, off never. |
| Alarm Roll-up | collapsed, always | collapsed | collapsed (default) shows the worst alarm below a collapsed parent, always shows it on expanded parents too. |
| Resize Columns | true, false | true | Lets the operator drag column edges to resize them. |
| Hide Columns | false, true | false | Adds a Columns menu so the operator can hide columns. |
| CSV Export | false, true | false | Adds a CSV button that exports the table. |
| Empty Text | String | No items | Shown when there are no nodes. |
Binding
This component has no single value binding.
Works like Tree: selectedPaths, selectedPath, selectedNode and expandedPaths are published as live values, and the events are onSelect, onExpand and onActivate. The items property holds the nested nodes, each with an optional data object of fixed field values. The columns property lists the other columns: key, label, width, align, format and unit, plus either field (a fixed value from the node) or member (a live UDT member). A column with neither shows data[key], and otherwise the row's own tag value. Rows are not sortable, because a flat sort has no meaning in a hierarchy. Long lists show a Show more button.