diff --git a/src/app/showcase/doc/treetable/basicdoc.ts b/src/app/showcase/doc/treetable/basicdoc.ts
index 3c81eafe7ec..5064119b525 100644
--- a/src/app/showcase/doc/treetable/basicdoc.ts
+++ b/src/app/showcase/doc/treetable/basicdoc.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
import { TreeNode } from 'primeng/api';
import { Code } from '../../domain/code';
import { NodeService } from '../../service/nodeservice';
@@ -9,35 +9,37 @@ import { NodeService } from '../../service/nodeservice';
TreeTable requires a collection of TreeNode instances as a value components as children for the representation.
-
-
-
- Name
- Size
- Type
-
-
-
-
-
-
- {{ rowData.size }}
- {{ rowData.type }}
-
-
-
+
+
+
+
+ Name
+ Size
+ Type
+
+
+
+
+
+
+ {{ rowData.size }}
+ {{ rowData.type }}
+
+
+
+
-
-
-
- Brand
- Sale Rate
-
-
- Sales
- Profits
-
-
- Last Year
- This Year
- Last Year
- This Year
-
-
-
-
-
-
- {{ rowData.lastYearSale }}
- {{ rowData.thisYearSale }}
- {{ rowData.lastYearProfit }}
- {{ rowData.thisYearProfit }}
-
-
-
-
- Totals
- $3,283,772
- $2,126,925
-
-
-
+
+
+
+
+ Brand
+ Sale Rate
+
+
+ Sales
+ Profits
+
+
+ Last Year
+ This Year
+ Last Year
+ This Year
+
+
+
+
+
+
+ {{ rowData.lastYearSale }}
+ {{ rowData.thisYearSale }}
+ {{ rowData.lastYearProfit }}
+ {{ rowData.thisYearProfit }}
+
+
+
+
+ Totals
+ $3,283,772
+ $2,126,925
+
+
+
+
Setting columnResizeMode as expand changes the table width as well.
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+
+
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.
+
@@ -32,18 +33,20 @@ interface Column {
+
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.
-
-
-
-
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+
+
Column visibility based on a condition can be implemented with dynamic columns, in this sample a MultiSelect is used to manage the visible columns.
-
-
-
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+
+
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.
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+
+
+ Expansion state is controlled with expandedKeys property. The expandedKeys should be an object whose keys refer to the node key and values represent the expanded state e.g. {'0-0': true} .
+
+
+
+
+
+
+
+ Name
+ Size
+ Type
+
+
+
+
+
+
+ {{ rowData.size }}
+ {{ rowData.type }}
+
+
+
+
+
+
+
+ Name
+ Size
+ Type
+
+
+
+
+
+
+ {{ rowData.size }}
+ {{ rowData.type }}
+
+
+ `,
+
+ html: `
+
+
+
+
+ Name
+ Size
+ Type
+
+
+
+
+
+
+ {{ rowData.size }}
+ {{ rowData.type }}
+
+
+
+
Columns can be created programmatically.
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/showcase/doc/treetable/editdoc.ts b/src/app/showcase/doc/treetable/editdoc.ts
index 0d3118213f1..66bf4608747 100644
--- a/src/app/showcase/doc/treetable/editdoc.ts
+++ b/src/app/showcase/doc/treetable/editdoc.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
import { TreeNode } from 'primeng/api';
import { Code } from '../../domain/code';
import { NodeService } from '../../service/nodeservice';
@@ -15,40 +15,43 @@ interface Column {
Incell editing is enabled by defining input elements with treeTableCellEditor .
@@ -52,15 +53,17 @@ interface Column {
- No data found.
+ No data found.
+
Adding p-treetable-gridlines class displays grid lines.
-
-
-
- Name
- Size
- Type
-
-
-
-
-
-
- {{ rowData.size }}
- {{ rowData.type }}
-
-
-
+
+
+
+
+ Name
+ Size
+ Type
+
+
+
+
+
+
+ {{ rowData.size }}
+ {{ rowData.type }}
+
+
+
+
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+
+
paginator localization information such as page numbers and rows per page options are defined with the paginatorLocale property which defaults to the user locale.
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Order of the columns can be changed using drag and drop when reorderableColumns is present.
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+
+
+
A column can be fixed during horizontal scrolling by enabling the frozenColumns property.
-
-
-
-
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
- {{ rowData[col.field] }}
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+ {{ rowData[col.field] }}
+
+
+
+
+
+
+
+
+
+
+
Horizontal scrolling is enabled when the total width of columns exceeds table width.
-
-
-
-
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+
+
Adding scrollable property along with a scrollHeight for the data viewport enables vertical scrolling with fixed headers.
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+
+
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.
-
-
-
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+
+
Metakey
+
@@ -40,11 +41,13 @@ interface Column {
+
Metakey
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+
+
-
-
- Name
- Size
- Type
-
-
-
-
-
-
- {{ rowData.size }}
- {{ rowData.type }}
-
-
-
+
+
+
+
+ Name
+ Size
+ Type
+
+
+
+
+
+
+ {{ rowData.size }}
+ {{ rowData.type }}
+
+
+
+
Multiple columns can be sorted by defining sortMode as multiple . This mode requires metaKey (e.g. ⌘ ) to be pressed when clicking a header.
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+
+
Sorting on a column is enabled by adding the ttSortableColumn property.
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+
+
Custom content at caption , header , body and summary sections are supported via templating.
-
- File Viewer
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ File Viewer
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
File Viewer