TreeTable

ic.TreeTable combines a hierarchical tree structure with tabular columns, so folder nodes act as collapsible group headers and leaf nodes display per-column data cells. It extends ic.TreeBase (shared tree node management, selection, expand/collapse) and reuses the same ic.table.Column subclasses as ic.Table for column definitions, including support for sorting, filtering, inline editing, and column resizing.

Building the tree

TreeTable uses the same ic.tree.Node hierarchy as ic.Tree, with one addition: leaf nodes carry a Data struct whose fields map to column fields. Folder nodes do not need data, they render as full-width collapsible rows. See the Tree documentation for the basics of building nodes with .add() and the incremental methods.

Columns are defined with the same typed subclasses used in ic.Table (TextColumn, NumberColumn, BooleanColumn, etc.).

% Tree nodes carry data in the .Data struct.
% Each field in Data maps to a column.

src = ic.tree.Node("src");
src.add("App.svelte", Icon="file-code", ...
    Data=struct("size", 2.4, "modified", "2025-03-12"));
src.add("main.ts", Icon="file-code", ...
    Data=struct("size", 0.8, "modified", "2025-03-10"));
comps = src.add("components");
comps.add("Header.svelte", Icon="file-code", ...
    Data=struct("size", 1.5, "modified", "2025-03-15"));

tests = ic.tree.Node("tests");
tests.add("App.test.ts", Icon="file-check", ...
    Data=struct("size", 0.9, "modified", "2025-03-16"));

% Define columns (same ic.table.Column types as Table)
cols = [
    ic.table.TextColumn("name", Sortable=true, Filterable=true)
    ic.table.NumberColumn("size", Header="Size (KB)", ...
        Sortable=true, Decimals=1, Suffix=" KB", Width=90)
    ic.table.TextColumn("modified", Header="Modified", ...
        Sortable=true, Width=110)
];

tt = ic.TreeTable();
tt.Items = [src, tests];
tt.Columns = cols;

Expander column

ExpanderColumn controls which column displays the tree indentation and node name. By default it is the first visible column. Switch it below to see the tree structure move into a different column.

Size, appearance, and height

Size scales the row height and font: sm, md (default), and lg. ShowLine toggles tree connector lines between nodes. Striped alternates row backgrounds for readability. Height sets the scrollable area in pixels or as a CSS string.

Selection

Selectable enables click-to-select on leaf rows. MaxSelectedItems limits how many leaves can be selected at once. The Selection property on the MATLAB side returns resolved ic.tree.Node handles for the selected leaves.

Sorting and filtering

Columns with Sortable = true show a sort indicator in the header. Clicking cycles through ascending, descending, and no sort. Columns with Filterable = true show a filter icon. Sorting and filtering are applied recursively at every level of the tree, so children within each folder are sorted independently. Click the “Name” or “Size” column headers in the demo below to try it.

Events

TreeTable fires ValueChanged when the selection changes, CellClicked when a leaf cell is clicked (with the node key and column field), SortChanged when the user sorts a column, and FilterChanged when a column filter is applied. CellEdited fires after an inline edit is committed.

Expand and collapse

expandAll(), collapseAll(), expandNode(node), and collapseNode(node) control folder state programmatically. clearSelection() deselects all leaves.

Custom styling

Every component exposes a .css property for instance-level CSS overrides from MATLAB.

tt = ic.TreeTable("Items", items, "Columns", cols);

% Slate header with uppercase labels
tt.css.style(".ic-tbl__header", ...
    "background", "#f1f5f9", ...
    "box_shadow", "inset 0 -2px 0 #3b82f6");
tt.css.style(".ic-tbl__hcell", ...
    "color", "#64748b", ...
    "text_transform", "uppercase", ...
    "letter_spacing", "0.04em", ...
    "font_size", "0.7rem");

% Blue folder rows
tt.css.style(".ic-tt__row--folder", ...
    "background", "#eff6ff");
tt.css.style(".ic-tt__row--folder:hover", ...
    "background", "#dbeafe");
tt.css.style(".ic-tt__expand", ...
    "color", "#3b82f6");
tt.css.style(".ic-tt__label--folder", ...
    "color", "#1e40af");

% Subtle blue guide lines
tt.css.style(".ic-tt__guide--pipe::before", ...
    "background", "#bfdbfe");
tt.css.style(".ic-tt__guide--branch::before", ...
    "background", "#bfdbfe");
tt.css.style(".ic-tt__guide--branch::after", ...
    "background", "#bfdbfe");

% Selected row accent
tt.css.style(".ic-tt__row--selected", ...
    "background", "#dbeafe");
tt.css.style(".ic-tt__content--selected", ...
    "color", "#1e40af");