VirtualTreeTable

ic.VirtualTreeTable is the virtualized counterpart of ic.TreeTable, designed for tree-table structures with thousands of nodes. It combines hierarchical folder/leaf rendering with per-column data cells, but only renders the rows currently visible in the viewport. The full tree stays in MATLAB, and nodes are fetched on demand as the user expands folders and scrolls.

It shares the same column definitions (ic.table.Column subclasses), sorting, filtering, inline editing, and context menu support as ic.TreeTable. For column types, tree construction, and general tree-table features, see the TreeTable documentation.

How it works

Unlike TreeTable (which sends the entire hierarchy to the frontend), VirtualTreeTable keeps the Items property on the MATLAB side and serves nodes on demand. When the component loads, it fetches root-level nodes. When the user expands a folder, it fetches that folder’s children. As the user scrolls, additional rows are pre-fetched to keep the experience smooth. Sorting and filtering also happen in MATLAB: when the user clicks a sortable header or applies a filter, MATLAB recomputes the view and the frontend re-fetches the visible rows.

Row heights are fixed per size level (sm: 24px, md: 28px, lg: 32px) for fast scroll calculations. Folder rows span the full width as collapsible headers, while leaf rows render per-column data cells.

Basic usage

% Build a large tree with per-node data
root = ic.tree.Node("Measurements");
for i = 1:100
    sensor = root.add(sprintf("Sensor %d", i));
    for j = 1:50
        sensor.add(sprintf("Reading %d", j), ...
            Data=struct("value", randn*10+25, ...
                        "unit", "C", ...
                        "timestamp", string(datetime("now"))));
    end
end

cols = [
    ic.table.TextColumn("name", Sortable=true, Filterable=true)
    ic.table.NumberColumn("value", Header="Value", ...
        Sortable=true, Decimals=2)
    ic.table.TextColumn("unit", Header="Unit", Width=60)
    ic.table.TextColumn("timestamp", Header="Time", Width=140)
];

vtt = ic.VirtualTreeTable();
vtt.Items = root;
vtt.Columns = cols;
vtt.Height = 400;

The tree above has 100 sensors with 50 readings each (5,000 leaf nodes), but the frontend only ever holds the visible slice. Leaf nodes carry their column data in the Data struct, with field names matching the column definitions.

Expander column

% By default, the first visible column is the expander.
% Set ExpanderColumn to move the tree indentation elsewhere.
vtt.ExpanderColumn = "name";

Sorting and filtering

Column headers with Sortable or Filterable work identically to TreeTable, but sorting and filtering happen in MATLAB rather than in the browser.

% Sorting and filtering happen in MATLAB.
% The frontend sends changes to MATLAB, which recomputes
% the view and the frontend re-fetches the visible rows.

addlistener(vtt, "SortChanged", @(~, evt) ...
    fprintf("Sort: %s %s\n", evt.Data.field, evt.Data.direction));

addlistener(vtt, "FilterChanged", @(~, evt) ...
    fprintf("Filter on %s\n", evt.Data.field));

Inline editing

Set Editable = true on columns that should support inline editing, and listen for the CellEdited event.

% Inline editing works the same as TreeTable.
% Set Editable=true on columns that should be editable.

cols = [
    ic.table.TextColumn("name", Editable=true)
    ic.table.NumberColumn("value", Editable=true, Decimals=2)
];
vtt = ic.VirtualTreeTable("Items", root, "Columns", cols);

addlistener(vtt, "CellEdited", @(~, evt) ...
    fprintf("Edited [%s, %s]\n", evt.Data.key, evt.Data.field));

Appearance

Size, ShowLine, Striped, Height, and Placeholder control the visual layout, same as TreeTable.

vtt = ic.VirtualTreeTable();
vtt.Items = root;
vtt.Columns = cols;

vtt.Size = "sm";        % "sm", "md" (default), "lg"
vtt.ShowLine = true;    % tree connector lines
vtt.Striped = true;     % alternating row backgrounds
vtt.Height = 500;       % pixels or CSS string
vtt.Placeholder = "Loading nodes...";

Methods

VirtualTreeTable exposes the same programmatic controls as TreeTable, plus refresh() to force a view recomputation and editCell() for programmatic cell updates.

% Expand/collapse
vtt.expandAll();
vtt.collapseAll();
vtt.expandNode(someSensor);

% Edit a cell programmatically
vtt.editCell(someReading, "value", 42.0);

% Force view recomputation
vtt.refresh();

% Selection and focus
vtt.clearSelection();
vtt.focus();