TreeTable

TreeTable is used to display hierarchical data in tabular format.

Import #


import { TreeTableModule } from 'primeng/treetable';

Basic #

TreeTable requires a collection of TreeNode instances as a value components as children for the representation.

Name	Size	Type

Applications	200mb	Folder
Cloud	20mb	Folder
Desktop	150kb	Folder
Documents	75kb	Folder
Downloads	25mb	Folder


<p-treeTable [value]="files" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
    <ng-template pTemplate="header">
        <tr>
            <th>Name</th>
            <th>Size</th>
            <th>Type</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
        <tr [ttRow]="rowNode">
            <td>
                <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
                {{ rowData.name }}
            </td>
            <td>{{ rowData.size }}</td>
            <td>{{ rowData.type }}</td>
        </tr>
    </ng-template>
</p-treeTable>

Dynamic Columns #

Columns can be created programmatically.

Name	Size	Type

Applications	200mb	Folder
Cloud	20mb	Folder
Desktop	150kb	Folder
Documents	75kb	Folder
Downloads	25mb	Folder
Main	50mb	Folder
Other	5mb	Folder
Pictures	150kb	Folder
Videos	1500mb	Folder


<p-treeTable [value]="files" [columns]="cols" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{ col.header }}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
        <tr [ttRow]="rowNode">
            <td *ngFor="let col of columns; let i = index">
                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
                {{ rowData[col.field] }}
            </td>
        </tr>
    </ng-template>
</p-treeTable>

Template #

Custom content at caption, header, body and summary sections are supported via templating.

FileViewer

Name	Size	Type

Applications	200mb	Folder
Cloud	20mb	Folder
Desktop	150kb	Folder
Documents	75kb	Folder
Downloads	25mb	Folder
Main	50mb	Folder
Other	5mb	Folder
Pictures	150kb	Folder
Videos	1500mb	Folder


<p-treeTable [value]="files" [columns]="cols" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
    <ng-template pTemplate="caption"> FileViewer </ng-template>
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{ col.header }}
            </th>
            <th style="width: 10rem">
                <p-button icon="pi pi-cog"></p-button>
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
        <tr [ttRow]="rowNode">
            <td *ngFor="let col of columns; let i = index">
                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
                {{ rowData[col.field] }}
            </td>
            <td>
                <p-button icon="pi pi-search" styleClass="p-button-success" [style]="{ 'margin-right': '.5em' }"></p-button>
                <p-button icon="pi pi-pencil" styleClass="p-button-warning"></p-button>
            </td>
        </tr>
    </ng-template>
    <ng-template pTemplate="summary">
        <div style="text-align:left">
            <p-button icon="pi pi-refresh" label="Reload"></p-button>
        </div>
    </ng-template>
</p-treeTable>

Paginator #

Basic #

Name	Size	Type

Item 0	223kb	Type 0
Item 1	999kb	Type 1
Item 2	468kb	Type 2
Item 3	395kb	Type 3
Item 4	271kb	Type 4
Item 5	69kb	Type 5
Item 6	81kb	Type 6
Item 7	839kb	Type 7
Item 8	468kb	Type 8
Item 9	838kb	Type 9


<p-treeTable [value]="files" [columns]="cols" [paginator]="true" [rows]="10" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{ col.header }}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
        <tr [ttRow]="rowNode">
            <td *ngFor="let col of columns; let i = index">
                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
                {{ rowData[col.field] }}
            </td>
        </tr>
    </ng-template>
</p-treeTable>

Locale #

paginator localization information such as page numbers and rows per page options are defined with the paginatorLocale property which defaults to the user locale.

Name	Size	Type

Item 0	609kb	Type 0
Item 1	666kb	Type 1
Item 2	326kb	Type 2
Item 3	710kb	Type 3
Item 4	327kb	Type 4
Item 5	32kb	Type 5
Item 6	350kb	Type 6
Item 7	276kb	Type 7
Item 8	920kb	Type 8
Item 9	736kb	Type 9


<p-treeTable paginatorLocale="fa-IR" [value]="files" [columns]="cols" [paginator]="true" [rows]="10" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{ col.header }}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
        <tr [ttRow]="rowNode">
            <td *ngFor="let col of columns; let i = index">
                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
                {{ rowData[col.field] }}
            </td>
        </tr>
    </ng-template>
</p-treeTable>

Template #

Paginator UI is customized using the paginatorleft and paginatorright property. Each element can also be customized further with your own UI to replace the default one, refer to the Paginator component for more information about the advanced customization options.

Name	Size	Type

Item 0	489kb	Type 0
Item 1	423kb	Type 1
Item 2	191kb	Type 2
Item 3	856kb	Type 3
Item 4	829kb	Type 4
Item 5	540kb	Type 5
Item 6	935kb	Type 6
Item 7	982kb	Type 7
Item 8	852kb	Type 8
Item 9	395kb	Type 9


<p-treeTable [value]="files" [columns]="cols" [paginator]="true" [rows]="10" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{ col.header }}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
        <tr [ttRow]="rowNode">
            <td *ngFor="let col of columns; let i = index">
                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
                {{ rowData[col.field] }}
            </td>
        </tr>
    </ng-template>
    <ng-template pTemplate="paginatorleft">
        <p-button icon="pi pi-refresh" styleClass="p-button-text"></p-button>
    </ng-template>
    <ng-template pTemplate="paginatorright">
        <p-button icon="pi pi-download" styleClass="p-button-text"></p-button>
    </ng-template>
</p-treeTable>

Sort #

Single Column #

Sorting on a column is enabled by adding the ttSortableColumn property.

Name	Size	Type

Applications	200mb	Folder
Cloud	20mb	Folder
Desktop	150kb	Folder
Documents	75kb	Folder
Downloads	25mb	Folder
Main	50mb	Folder
Other	5mb	Folder
Pictures	150kb	Folder
Videos	1500mb	Folder


<p-treeTable [value]="files" [columns]="cols" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" [ttSortableColumn]="col.field">
                {{ col.header }}
                <p-treeTableSortIcon [field]="col.field"></p-treeTableSortIcon>
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
        <tr [ttRow]="rowNode">
            <td *ngFor="let col of columns; let i = index">
                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
                {{ rowData[col.field] }}
            </td>
        </tr>
    </ng-template>
</p-treeTable>

Multiple Column #

Multiple columns can be sorted by defining sortMode as multiple. This mode requires metaKey (e.g. ⌘) to be pressed when clicking a header.

Name	Size	Type

Applications	200mb	Folder
Cloud	20mb	Folder
Desktop	150kb	Folder
Documents	75kb	Folder
Downloads	25mb	Folder
Main	50mb	Folder
Other	5mb	Folder
Pictures	150kb	Folder
Videos	1500mb	Folder


<p-treeTable [value]="files" [columns]="cols" sortMode="multiple" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" [ttSortableColumn]="col.field">
                {{ col.header }}
                <p-treeTableSortIcon [field]="col.field"></p-treeTableSortIcon>
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
        <tr [ttRow]="rowNode">
            <td *ngFor="let col of columns; let i = index">
                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
                {{ rowData[col.field] }}
            </td>
        </tr>
    </ng-template>
</p-treeTable>

Filter #

The filterMode specifies the filtering strategy, in lenient mode when the query matches a node, children of the node are not searched further as all descendants of the node are included. On the other hand, in strict mode when the query matches a node, filtering continues on all descendants. A general filled called filterGlobal is also provided to search all columns that support filtering.

Lenient

Strict

Name	Size	Type

Applications	200mb	Folder
Cloud	20mb	Folder
Desktop	150kb	Folder
Documents	75kb	Folder
Downloads	25mb	Folder
Main	50mb	Folder
Other	5mb	Folder
Pictures	150kb	Folder
Videos	1500mb	Folder


<p-selectButton [options]="filterModes" [(ngModel)]="filterMode" optionLabel="label" optionValue="value"></p-selectButton>

<p-treeTable #tt [value]="files" [columns]="cols" [filterMode]="filterMode" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
    <ng-template pTemplate="caption">
        <div class="flex justify-content-end align-items-center">
            <div class="p-input-icon-left">
                <i class="pi pi-search"></i>
                <input type="text" pInputText placeholder="Global Search" (input)="tt.filterGlobal($event.target.value, 'contains')" />
            </div>
        </div>
    </ng-template>
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of cols">
                {{ col.header }}
            </th>
        </tr>
        <tr>
            <th *ngFor="let col of cols">
                <input pInputText type="text" (input)="tt.filter($event.target.value, col.field, col.filterMatchMode)" />
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
        <tr [ttRow]="rowNode">
            <td *ngFor="let col of cols; let i = index">
                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
                {{ rowData[col.field] }}
            </td>
        </tr>
    </ng-template>
    <ng-template pTemplate="emptymessage">
        <tr>
            <td [attr.colspan]="cols.length">No data found.</td>
        </tr>
    </ng-template>
</p-treeTable>

Selection #

Single #

Single node selection is configured by setting selectionMode as single along with selection properties to manage the selection value binding.

By default, metaKey press (e.g. ⌘) is necessary to unselect a node however this can be configured with disabling the metaKeySelection property. In touch enabled devices this option has no effect and behavior is same as setting it to false

Metakey

Name	Size	Type

Applications	200mb	Folder
Cloud	20mb	Folder
Desktop	150kb	Folder
Documents	75kb	Folder
Downloads	25mb	Folder
Main	50mb	Folder
Other	5mb	Folder
Pictures	150kb	Folder
Videos	1500mb	Folder


<p-treeTable [value]="files" [columns]="cols" selectionMode="single" [(selection)]="selectedNode" dataKey="name" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{ col.header }}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
        <tr [ttRow]="rowNode" [ttSelectableRow]="rowNode">
            <td *ngFor="let col of columns; let i = index">
                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
                {{ rowData[col.field] }}
            </td>
        </tr>
    </ng-template>
</p-treeTable>

Multiple #

More than one node is selectable by setting selectionMode to multiple. By default in multiple selection mode, metaKey press (e.g. ⌘) is necessary to add to existing selections however this can be configured with disabling the metaKeySelection property. Note that in touch enabled devices, TreeTable always ignores metaKey. In multiple selection mode, value binding should be a key-value pair where key is the node key and value is a boolean to indicate selection.

Metakey

Name	Size	Type

Applications	200mb	Folder
Cloud	20mb	Folder
Desktop	150kb	Folder
Documents	75kb	Folder
Downloads	25mb	Folder
Main	50mb	Folder
Other	5mb	Folder
Pictures	150kb	Folder
Videos	1500mb	Folder


<p-inputSwitch [(ngModel)]="metaKeySelection"></p-inputSwitch>
<p-treeTable [value]="files" [columns]="cols" selectionMode="multiple" [(selection)]="selectedNodes" dataKey="name" [metaKeySelection]="metaKeySelection" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{ col.header }}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
        <tr [ttRow]="rowNode" [ttSelectableRow]="rowNode">
            <td *ngFor="let col of columns; let i = index">
                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
                {{ rowData[col.field] }}
            </td>
        </tr>
    </ng-template>
</p-treeTable>

Checkbox #

Selection of multiple nodes via checkboxes is enabled by configuring selectionMode as checkbox.

In checkbox selection mode, value binding should be a key-value pair where key is the node key and value is an object that has checked and partialChecked properties to represent the checked state of a node.

Toggle All

Name	Size	Type


<p-treeTable [value]="files" [columns]="cols" selectionMode="checkbox" [(selection)]="selectedNodes" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
    <ng-template pTemplate="caption">
        <div class="flex">
            <p-treeTableHeaderCheckbox></p-treeTableHeaderCheckbox>
            <span class="ml-2">Toggle All</span>
        </div>
    </ng-template>
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{ col.header }}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
        <tr [ttRow]="rowNode" [ttSelectableRow]="rowNode">
            <td *ngFor="let col of columns; let i = index">
                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
                <p-treeTableCheckbox [value]="rowNode" *ngIf="i === 0"></p-treeTableCheckbox>
                {{ rowData[col.field] }}
            </td>
        </tr>
    </ng-template>
</p-treeTable>

Events #

TreeTable provides onNodeSelect and onNodeUnselect events to listen selection events.

Name	Size	Type

Applications	200mb	Folder
Cloud	20mb	Folder
Desktop	150kb	Folder
Documents	75kb	Folder
Downloads	25mb	Folder
Main	50mb	Folder
Other	5mb	Folder
Pictures	150kb	Folder
Videos	1500mb	Folder


<p-treeTable [value]="files" [columns]="cols" selectionMode="single" [(selection)]="selectedNode" dataKey="name" (onNodeSelect)="nodeSelect($event)" (onNodeUnselect)="nodeUnselect($event)" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{ col.header }}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
        <tr [ttRow]="rowNode" [ttSelectableRow]="rowNode">
            <td *ngFor="let col of columns; let i = index">
                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
                {{ rowData[col.field] }}
            </td>
        </tr>
    </ng-template>
</p-treeTable>

Column Group #

Brand	Sale Rate
	Sales		Profits
	Last Year	This Year	Last Year	This Year

Bliss	51%	40%	$54,406.00	$43,342
Fate	83%	96%	$423,132	$312,122
Ruby	38%	5%	$12,321	$8,500
Sky	49%	22%	$745,232	$650,323
Comfort	17%	79%	$643,242	500,332
Merit	52%	65%	$421,132	$150,005
Violet	82%	12%	$131,211	$100,214
Dulce	44%	45%	$66,442	$53,322
Solace	90%	56%	$765,442	$296,232
Essence	75%	54%	$21,212	$12,533


<p-treeTable [value]="sales" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
    <ng-template pTemplate="header">
        <tr>
            <th rowspan="3">Brand</th>
            <th colspan="4">Sale Rate</th>
        </tr>
        <tr>
            <th colspan="2">Sales</th>
            <th colspan="2">Profits</th>
        </tr>
        <tr>
            <th>Last Year</th>
            <th>This Year</th>
            <th>Last Year</th>
            <th>This Year</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
        <tr>
            <td>
                <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
                {{ rowData.brand }}
            </td>
            <td>{{ rowData.lastYearSale }}</td>
            <td>{{ rowData.thisYearSale }}</td>
            <td>{{ rowData.lastYearProfit }}</td>
            <td>{{ rowData.thisYearProfit }}</td>
        </tr>
    </ng-template>
    <ng-template pTemplate="footer">
        <tr>
            <td colspan="3">Totals</td>
            <td>$3,283,772</td>
            <td>$2,126,925</td>
        </tr>
    </ng-template>
</p-treeTable>

Lazy Load #

Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks everytime paging, sorting and filtering occurs. Sample below imitates lazy loading data from a remote datasource using an in-memory list and timeouts to mimic network connection.

Enabling the lazy property and assigning the logical number of rows to totalRecords by doing a projection query are the key elements of the implementation so that paginator displays the UI assuming there are actually records of totalRecords size although in reality they are not present on page, only the records that are displayed on the current page exist.

In addition, only the root elements should be loaded, children can be loaded on demand using onNodeExpand callback.

Name	Size	Type

Item 0	294kb	Type 0
Item 1	430kb	Type 1
Item 2	564kb	Type 2
Item 3	60kb	Type 3
Item 4	262kb	Type 4
Item 5	74kb	Type 5
Item 6	298kb	Type 6
Item 7	989kb	Type 7
Item 8	128kb	Type 8
Item 9	301kb	Type 9


<p-treeTable [value]="files" [columns]="cols" [paginator]="true" [rows]="10" [lazy]="true" (onLazyLoad)="loadNodes($event)" [totalRecords]="1000" [loading]="loading" (onNodeExpand)="onNodeExpand($event)" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{ col.header }}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
        <tr [ttRow]="rowNode">
            <td *ngFor="let col of columns; let i = index">
                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
                {{ rowData[col.field] }}
            </td>
        </tr>
    </ng-template>
</p-treeTable>

Edit #

Incell editing is enabled by defining input elements with treeTableCellEditor.

Name	Size	Type

Applications	200mb	Folder
Cloud	20mb	Folder
Desktop	150kb	Folder
Documents	75kb	Folder
Downloads	25mb	Folder
Main	50mb	Folder
Other	5mb	Folder
Pictures	150kb	Folder
Videos	1500mb	Folder


<p-treeTable [value]="files" [columns]="cols" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{ col.header }}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
        <tr [ttRow]="rowNode">
            <td *ngFor="let col of columns; let i = index" ttEditableColumn [ttEditableColumnDisabled]="i == 0" [ngClass]="{ 'p-toggler-column': i === 0 }">
                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
                <p-treeTableCellEditor>
                    <ng-template pTemplate="input">
                        <input pInputText type="text" [(ngModel)]="rowData[col.field]" />
                    </ng-template>
                    <ng-template pTemplate="output">{{ rowData[col.field] }}</ng-template>
                </p-treeTableCellEditor>
            </td>
        </tr>
    </ng-template>
</p-treeTable>

Scroll #

Vertical #

Adding scrollable property along with a scrollHeight for the data viewport enables vertical scrolling with fixed headers.

Name	Size	Type

Applications	200mb	Folder
Cloud	20mb	Folder
Desktop	150kb	Folder
Documents	75kb	Folder
Downloads	25mb	Folder
Main	50mb	Folder
Other	5mb	Folder
Pictures	150kb	Folder
Videos	1500mb	Folder


<p-treeTable [value]="files" [columns]="cols" [scrollable]="true" scrollHeight="200px" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{ col.header }}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
        <tr [ttRow]="rowNode">
            <td *ngFor="let col of columns; let i = index">
                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
                {{ rowData[col.field] }}
            </td>
        </tr>
    </ng-template>
</p-treeTable>

Horizontal #

Horizontal scrolling is enabled when the total width of columns exceeds table width.

Name	Size	Type

Applications	200mb	Folder
Cloud	20mb	Folder
Desktop	150kb	Folder
Documents	75kb	Folder
Downloads	25mb	Folder
Main	50mb	Folder
Other	5mb	Folder
Pictures	150kb	Folder
Videos	1500mb	Folder


<p-treeTable [value]="files" [columns]="cols" [scrollable]="true" scrollHeight="200px" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
    <ng-template pTemplate="colgroup" let-columns>
        <colgroup>
            <col *ngFor="let col of columns" style="width:500px" />
        </colgroup>
    </ng-template>
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{ col.header }}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
        <tr [ttRow]="rowNode">
            <td *ngFor="let col of columns; let i = index">
                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
                {{ rowData[col.field] }}
            </td>
        </tr>
    </ng-template>
</p-treeTable>

Frozen Columns #

A column can be fixed during horizontal scrolling by enabling the frozenColumns property.

Name

Applications
Cloud
Desktop
Documents
Downloads
Main
Other
Pictures
Videos

Size	Type	Size	Type	Size	Type

200mb	Folder	200mb	Folder	200mb	Folder
20mb	Folder	20mb	Folder	20mb	Folder
150kb	Folder	150kb	Folder	150kb	Folder
75kb	Folder	75kb	Folder	75kb	Folder
25mb	Folder	25mb	Folder	25mb	Folder
50mb	Folder	50mb	Folder	50mb	Folder
5mb	Folder	5mb	Folder	5mb	Folder
150kb	Folder	150kb	Folder	150kb	Folder
1500mb	Folder	1500mb	Folder	1500mb	Folder


<p-treeTable [value]="files" [columns]="scrollableCols" [frozenColumns]="frozenCols" [scrollable]="true" scrollHeight="250px" frozenWidth="200px" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
    <ng-template pTemplate="colgroup" let-columns>
        <colgroup>
            <col *ngFor="let col of columns" style="width:250px" />
        </colgroup>
    </ng-template>
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{ col.header }}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData="rowData" let-columns="columns">
        <tr [ttRow]="rowNode" style="height: 57px">
            <td *ngFor="let col of columns; let i = index">
                {{ rowData[col.field] }}
            </td>
        </tr>
    </ng-template>
    <ng-template pTemplate="frozenbody" let-rowNode let-rowData="rowData">
        <tr [ttRow]="rowNode" style="height: 57px">
            <td>
                <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
                {{ rowData.name }}
            </td>
        </tr>
    </ng-template>
</p-treeTable>

Column Resize #

Fit Mode #

Columns can be resized with drag and drop when resizableColumns is enabled. Default resize mode is fit that does not change the overall table width.

Name	Size	Type
Applications	200mb	Folder
Cloud	20mb	Folder
Desktop	150kb	Folder
Documents	75kb	Folder
Downloads	25mb	Folder
Main	50mb	Folder
Other	5mb	Folder
Pictures	150kb	Folder
Videos	1500mb	Folder


<p-treeTable [value]="files" [columns]="cols" [resizableColumns]="true" [tableStyle]="{'min-width': '50rem'}">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" ttResizableColumn>
                {{ col.header }}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
        <tr [ttRow]="rowNode">
            <td *ngFor="let col of columns; let i = index">
                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
                {{ rowData[col.field] }}
            </td>
        </tr>
    </ng-template>
</p-treeTable>

Expand Mode #

Setting columnResizeMode as expand changes the table width as well.

Name	Size	Type
Applications	200mb	Folder
Cloud	20mb	Folder
Desktop	150kb	Folder
Documents	75kb	Folder
Downloads	25mb	Folder
Main	50mb	Folder
Other	5mb	Folder
Pictures	150kb	Folder
Videos	1500mb	Folder


<p-treeTable [value]="files" [columns]="cols" [resizableColumns]="true" columnResizeMode="expand">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" ttResizableColumn>
                {{ col.header }}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
        <tr [ttRow]="rowNode">
            <td *ngFor="let col of columns; let i = index">
                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
                {{ rowData[col.field] }}
            </td>
        </tr>
    </ng-template>
</p-treeTable>

Scrollable #

To utilize the column resize modes with a scrollable TreeTable, a colgroup template must be defined. The default value of scrollHeight is "flex," it can also be set as a string value.

Name	Size	Type

Applications	200mb	Folder
Cloud	20mb	Folder
Desktop	150kb	Folder
Documents	75kb	Folder
Downloads	25mb	Folder
Main	50mb	Folder
Other	5mb	Folder
Pictures	150kb	Folder
Videos	1500mb	Folder


<p-treeTable [value]="files" [columns]="cols" [resizableColumns]="true" [scrollable]="true" scrollHeight="200px">
    <ng-template pTemplate="colgroup" let-columns>
        <colgroup>
            <col *ngFor="let col of columns">
        </colgroup>
    </ng-template>
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" ttResizableColumn>
                {{ col.header }}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
        <tr [ttRow]="rowNode">
            <td *ngFor="let col of columns; let i = index">
                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
                {{ rowData[col.field] }}
            </td>
        </tr>
    </ng-template>
</p-treeTable>

Reorder #

Order of the columns can be changed using drag and drop when reorderableColumns is present.

Name	Size	Type

Applications	200mb	Folder
Cloud	20mb	Folder
Desktop	150kb	Folder
Documents	75kb	Folder
Downloads	25mb	Folder
Main	50mb	Folder
Other	5mb	Folder
Pictures	150kb	Folder
Videos	1500mb	Folder


<p-treeTable [value]="files" [columns]="cols" [reorderableColumns]="true" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" ttReorderableColumn>
                {{ col.header }}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
        <tr [ttRow]="rowNode">
            <td *ngFor="let col of columns; let i = index">
                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
                {{ rowData[col.field] }}
            </td>
        </tr>
    </ng-template>
</p-treeTable>

Column Toggle #

Column visibility based on a condition can be implemented with dynamic columns, in this sample a MultiSelect is used to manage the visible columns.

Name

Size

Type

Name	Size	Type

Applications	200mb	Folder
Cloud	20mb	Folder
Desktop	150kb	Folder
Documents	75kb	Folder
Downloads	25mb	Folder
Main	50mb	Folder
Other	5mb	Folder
Pictures	150kb	Folder
Videos	1500mb	Folder


<p-treeTable [value]="files" [columns]="selectedColumns" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
    <ng-template pTemplate="caption">
        <div style="text-align:left">
            <p-multiSelect [options]="cols" [(ngModel)]="selectedColumns" optionLabel="header" selectedItemsLabel="{0} columns selected" [style]="{ width: '20em' }" defaultLabel="Choose Columns" display="chip"></p-multiSelect>
        </div>
    </ng-template>
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{ col.header }}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
        <tr [ttRow]="rowNode">
            <td *ngFor="let col of columns; let i = index">
                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
                {{ rowData[col.field] }}
            </td>
        </tr>
    </ng-template>
</p-treeTable>

Conditional Style #

Particular rows and cells can be styled based on conditions. The ngClass receives a row data as a parameter to return a style class for a row whereas cells are customized using the body template.

Name	Size	Type

Applications	200mb	Folder
Cloud	20mb	Folder
Desktop	150kb	Folder
Documents	75kb	Folder
Downloads	25mb	Folder
Main	50mb	Folder
Other	5mb	Folder
Pictures	150kb	Folder
Videos	1500mb	Folder


<p-treeTable [value]="files" [columns]="cols" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{ col.header }}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
        <tr [ttRow]="rowNode" [ngClass]="{ 'p-highlight': rowData.size.endsWith('kb') }">
            <td *ngFor="let col of columns; let i = index" [ngClass]="{ 'font-bold': col.field === 'size' && rowData.size.endsWith('kb') }">
                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
                {{ rowData[col.field] }}
            </td>
        </tr>
    </ng-template>
</p-treeTable>

Context Menu #

TreeTable has exclusive integration with ContextMenu using the contextMenu event to open a menu on right click alont with contextMenuSelection properties to control the selection via the menu.

Name	Size	Type

Applications	200mb	Folder
Cloud	20mb	Folder
Desktop	150kb	Folder
Documents	75kb	Folder
Downloads	25mb	Folder
Main	50mb	Folder
Other	5mb	Folder
Pictures	150kb	Folder
Videos	1500mb	Folder


<p-toast [style]="{ marginTop: '80px' }"></p-toast>

<p-treeTable [value]="files" [columns]="cols" dataKey="name" [(contextMenuSelection)]="selectedNode" [contextMenu]="cm" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{ col.header }}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
        <tr [ttRow]="rowNode" [ttContextMenuRow]="rowNode">
            <td *ngFor="let col of columns; let i = index">
                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
                {{ rowData[col.field] }}
            </td>
        </tr>
    </ng-template>
</p-treeTable>

<p-contextMenu #cm [model]="items"></p-contextMenu>

Style #

Following is the list of structural style classes, for theming classes visit theming page.

Name	Element
p-treetable	Container element.
p-treetable-caption	Caption element.
p-treetable-summary	Section section.
p-sortable-column	Sortable column header.
p-treetable-scrollable-header	Container of header in a scrollable table.
p-treetable-scrollable-body	Container of body in a scrollable table.
p-treetable-scrollable-footer	Container of footer in a scrollable table.
p-treetable-loading	Loader mask.
p-treetable-loading-content	Loader content.
p-treetable-wrapper	Loader content.
p-treetable-scrollable-wrapper	Loader content.
p-treetable-resizer-helper	Vertical resize indicator bar.
p-treetable-reorder-indicator-top	Top indicator of column reordering.
p-treetable-reorder-indicator-top	Bottom indicator of column reordering.

Accessibility #

Screen Reader

Default role of the table is table. Header, body and footer elements use rowgroup, rows use row role, header cells have columnheader and body cells use cell roles. Sortable headers utilizer aria-sort attribute either set to "ascending" or "descending".

Row elements manage aria-expanded for state and aria-level attribute to define the hierachy by ttRow directive. Table rows and table cells should be specified by users using the aria-posinset, aria-setsize, aria-label, and aria-describedby attributes, as they are determined through templating.

When selection is enabled, ttSelectableRow directive sets aria-selected to true on a row. In checkbox mode, the built-in checkbox component use checkbox role with aria-checked state attribute.

Editable cells use custom templating so you need to manage aria roles and attributes manually if required.

Paginator is a standalone component used inside the TreeTable, refer to the paginator for more information about the accessibility features.

Sortable Headers Keyboard Support

Key	Function
tab	Moves through the headers.
enter	Sorts the column.
space	Sorts the column.

Keyboard Support

Key	Function
tab	Moves focus to the first selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the next focusable element in the page tab sequence.
shift + tab	Moves focus to the last selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the previous focusable element in the page tab sequence.
enter	Selects the focused treenode.
space	Selects the focused treenode.
down arrow	Moves focus to the next treenode.
up arrow	Moves focus to the previous treenode.
right arrow	If node is closed, opens the node otherwise moves focus to the first child node.
left arrow	If node is open, closes the node otherwise moves focus to the parent node.

TreeTable API

API defines helper props, events and others for the PrimeNG TreeTable module.

TreeTable #

TreeTable is used to display hierarchical data in tabular format.

Properties #

Defines the input properties of the component.

name	type	default	description
columns	any[]	null	An array of objects to represent dynamic columns.
style	Object	null	Inline style of the component.
styleClass	string	null	Style class of the component.
tableStyle	Object	null	Inline style of the table.
tableStyleClass	string	null	Style class of the table.
autoLayout	boolean	false	Whether the cell widths scale according to their content or not.
lazy	boolean	false	Defines if data is loaded and interacted with in lazy manner.
lazyLoadOnInit	boolean	true	Whether to call lazy loading on initialization.
paginator	boolean	false	When specified as true, enables the pagination.
rows	number	null	Number of rows to display per page.
first	number	0	Index of the first row to be displayed.
pageLinks	number	5	Number of page links to display in paginator.
rowsPerPageOptions	any[]	null	Array of integer/object values to display inside rows per page dropdown of paginator
alwaysShowPaginator	boolean	true	Whether to show it even there is only one page.
paginatorPosition	"both" \| "top" \| "bottom"	bottom	Position of the paginator.
paginatorStyleClass	string	null	Custom style class for paginator
paginatorDropdownAppendTo	any	null	Target element to attach the paginator dropdown overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
currentPageReportTemplate	string	{currentPage} of {totalPages}	Template of the current page report element. Available placeholders are {currentPage},{totalPages},{rows},{first},{last} and {totalRecords}
showCurrentPageReport	boolean	false	Whether to display current page report.
showJumpToPageDropdown	boolean	false	Whether to display a dropdown to navigate to any page.
showFirstLastIcon	boolean	true	When enabled, icons are displayed on paginator to go first and last page.
showPageLinks	boolean	true	Whether to show page links.
defaultSortOrder	number	1	Sort order to use when an unsorted column gets sorted by user interaction.
sortMode	"multiple" \| "single"	single	Defines whether sorting works on single column or on multiple columns.
resetPageOnSort	boolean	true	When true, resets paginator to first page after sorting.
customSort	boolean	false	Whether to use the default sorting or a custom one using sortFunction.
selectionMode	string	null	Specifies the selection mode, valid values are "single" and "multiple".
contextMenuSelection	any	null	Selected row with a context menu.
contextMenuSelectionMode	string	separate	Mode of the contet menu selection.
dataKey	string	null	A property to uniquely identify a record in data.
metaKeySelection	boolean	true	Defines whether metaKey is should be considered for the selection. On touch enabled devices, metaKeySelection is turned off automatically.
compareSelectionBy	string	deepEquals	Algorithm to define if a row is selected, valid values are "equals" that compares by reference and "deepEquals" that compares all fields.
rowHover	boolean	false	Adds hover effect to rows without the need for selectionMode.
loading	boolean	false	Displays a loader to indicate data load is in progress.
loadingIcon	string	null	The icon to show while indicating data load is in progress.
showLoader	boolean