Data

TreeTable

A table whose rows form a tree. Everything of the table — sorting, pages, filters, selection, column resize and reorder, frozen columns, scroll — works on the tree, plus lazy children and checkbox selection of whole branches.

Features14

API

Theming

Basic

Nodes with data and children. The first column gets the toggler; Tab reaches a row, ArrowRight / ArrowLeft open and close it.


Applications	300	Folder
Cloud	50	Folder
Desktop	12	Folder
Music	640	Folder

Templates

txTableCell gets the node data as let-file and the node itself as node. [(expandedKeys)] keeps the open rows; expandAll() / collapseAll() open or close all.


Applications	300 MB
Editor	220 MB
Player	80 MB
Cloud	50 MB
Desktop	12 MB
Music	640 MB

35 lines

<div class="row">  <button    txButton    type="button"    severity="secondary"    outlined    size="small"    label="Expand all"    (click)="table.expandAll()"  ></button>  <button    txButton    type="button"    severity="secondary"    outlined    size="small"    label="Collapse all"    (click)="table.collapseAll()"  ></button></div><tx-tree-table  #table  ariaLabel="Files"  [value]="files"  [columns]="columns"  [(expandedKeys)]="expanded">  <ng-template txTableCell="name" let-file let-node="node">    <span class="name">      <tx-icon [name]="node.children || node.leaf === false ? 'folder' : 'file'" />      {{ file.name }}    </span>  </ng-template>  <ng-template txTableCell="size" let-file>{{ file.size }} MB</ng-template></tx-tree-table>

Sort

Sorting orders siblings on every level and keeps children under their parent. sortMode="multiple" sorts by several columns with Ctrl / ⌘ + click.


Music	640	Folder
Applications	300	Folder
Editor	220	Folder
Player	80	Application
Cloud	50	Folder
backup-2025.zip	30	Archive
photos.zip	20	Archive
Desktop	12	Folder


Applications	300	Folder
Editor	220	Folder
Player	80	Application
Cloud	50	Folder
backup-2025.zip	30	Archive
photos.zip	20	Archive
Desktop	12	Folder
Music	640	Folder

17 lines

<div class="tables">  <tx-tree-table    ariaLabel="Files, single sort"    sortField="size"    sortOrder="desc"    [value]="files"    [columns]="columns"    [expandedKeys]="['apps', 'cloud']"  />  <tx-tree-table    ariaLabel="Files, multiple sort"    sortMode="multiple"    [value]="files"    [columns]="columns"    [expandedKeys]="['apps', 'cloud']"  /></div>

Pagination

paginator pages the root nodes; open children stay on the page of their parent.


Applications	300	Folder
Cloud	50	Folder

Filter

Column filters and the global search keep the parents of every match and open them. filterMode="strict" drops the children of a match that do not match themselves.

Strict


Applications	300	Folder
Cloud	50	Folder
Desktop	12	Folder
Music	640	Folder

21 lines

<div class="row">  <tx-icon-field>    <tx-input-icon icon="search" />    <input      txInput      type="search"      aria-label="Search files"      placeholder="Search files"      [(ngModel)]="query"    />    <tx-input-clear />  </tx-icon-field>  <tx-toggle-switch label="Strict" [(ngModel)]="strict" /></div><tx-tree-table  ariaLabel="Files"  [value]="files"  [columns]="columns"  [filterMode]="strict() ? 'strict' : 'lenient'"  [globalFilter]="query()"/>

Selection

selectionMode="single" or multiple selects rows by click, Space or Enter; Shift + click selects a range.


Applications	300	Folder
Editor	220	Folder
Player	80	Application
Cloud	50	Folder
Desktop	12	Folder
Music	640	Folder

Selected: —

9 lines

<tx-tree-table  ariaLabel="Files"  selectionMode="multiple"  [value]="files"  [columns]="columns"  [expandedKeys]="['apps']"  [(selection)]="selection"/><p class="hint">Selected: {{ names() }}</p>

Checkbox

selectionMode="checkbox" puts a checkbox next to the toggler and a select-all checkbox in the header. Checking a folder checks its branch; a partly checked folder shows a dash.


Applications	300	Folder
Editor	220	Folder
editor.app	180	Application
editor-docs.pdf	40	Document
Player	80	Application
Cloud	50	Folder
Desktop	12	Folder
Music	640	Folder

0 checked

9 lines

<tx-tree-table  ariaLabel="Files"  selectionMode="checkbox"  [value]="files"  [columns]="columns"  [expandedKeys]="['apps', 'editor']"  [(selection)]="selection"/><p class="hint">{{ count() }} checked</p>

Lazy

Rows with leaf: false and no children load on demand: nodeExpand fires and the toggler spins until the children arrive.


Projects	0	Folder
Reports	0	Folder
Shared	0	Folder

Server

lazy hands sorting and pages of the root nodes to the server through lazyLoad; loading blurs the rows meanwhile.

No results found

11 lines

<tx-tree-table  ariaLabel="Files from the server"  lazy  paginator  [rows]="2"  [value]="page()"  [columns]="columns"  [totalRecords]="total"  [loading]="loading()"  (lazyLoad)="load($event)"/>

Columns

resizableColumns, reorderableColumns and columnSettings work as in the table; the toggler moves with the first visible column.


Applications	300	Folder
Editor	220	Folder
Player	80	Application
Cloud	50	Folder
Desktop	12	Folder
Music	640	Folder

Scroll height

scrollHeight keeps the header in place while the rows scroll; frozen columns stay while the table scrolls sideways.


Applications	300	Folder
Editor	220	Folder
editor.app	180	Application
editor-docs.pdf	40	Document
Player	80	Application
Cloud	50	Folder
backup-2025.zip	30	Archive
photos.zip	20	Archive
Desktop	12	Folder
notes.txt	2	Text
plan.xlsx	10	Spreadsheet
Music	640	Folder
Album	640	Folder
track-01.mp3	8	Audio

7 lines

<tx-tree-table    ariaLabel="Files"    scrollHeight="240px"    [value]="files"    [columns]="columns"    [expandedKeys]="['apps', 'editor', 'cloud', 'desktop', 'music', 'album']"  />

Appearance

showGridlines, stripedRows, rowHover and size work as in the table.


Applications	300	Folder
Editor	220	Folder
Player	80	Application
Cloud	50	Folder
Desktop	12	Folder
Music	640	Folder


Applications	300	Folder
Editor	220	Folder
Player	80	Application
Cloud	50	Folder
Desktop	12	Folder
Music	640	Folder

17 lines

<div class="tables">  <tx-tree-table    ariaLabel="Striped files"    stripedRows    rowHover    [value]="files"    [columns]="columns"    [expandedKeys]="['apps']"  />  <tx-tree-table    ariaLabel="Small files table"    size="small"    [value]="files"    [columns]="columns"    [expandedKeys]="['apps']"  /></div>

Design tokens

dt takes the table tokens of one tree table — here a tinted header and taller rows.


Applications	300	Folder
Editor	220	Folder
Player	80	Application
Cloud	50	Folder
Desktop	12	Folder
Music	640	Folder

Pass through

pt adds classes and styles to the table parts and to treeToggle.


Applications	300	Folder
Editor	220	Folder
Player	80	Application
Cloud	50	Folder
Desktop	12	Folder
Music	640	Folder