diff --git a/api-generator/components/treetable.js b/api-generator/components/treetable.js
index 3c40403cf..337f37964 100644
--- a/api-generator/components/treetable.js
+++ b/api-generator/components/treetable.js
@@ -196,6 +196,24 @@ const TreeTableProps = [
type: "boolean",
default: "false",
description: "Whether to show grid lines between cells."
+ },
+ {
+ name: "scrollable",
+ type: "boolean",
+ default: "false",
+ description: "When specified, enables horizontal and/or vertical scrolling."
+ },
+ {
+ name: "scrollDirection",
+ type: "string",
+ default: "vertical",
+ description: 'Orientation of the scrolling, options are "vertical", "horizontal" and "both".'
+ },
+ {
+ name: "scrollHeight",
+ type: "string",
+ default: "null",
+ description: 'Height of the scroll viewport in fixed units or the "flex" keyword for a dynamic size.'
}
];
diff --git a/src/components/datatable/DataTable.d.ts b/src/components/datatable/DataTable.d.ts
index 3c7fd2e66..dd9a7bb84 100755
--- a/src/components/datatable/DataTable.d.ts
+++ b/src/components/datatable/DataTable.d.ts
@@ -53,6 +53,7 @@ interface DataTableProps {
rowClass?: any;
scrollable?: boolean;
scrollHeight?: string;
+ scrollDirection?: string;
frozenValue?: any[];
responsiveLayout?: string;
breakpoing?: string;
diff --git a/src/components/treetable/BodyCell.vue b/src/components/treetable/BodyCell.vue
new file mode 100644
index 000000000..ad276c6e0
--- /dev/null
+++ b/src/components/treetable/BodyCell.vue
@@ -0,0 +1,157 @@
+
+
+
+
+
+
+
diff --git a/src/components/treetable/FooterCell.vue b/src/components/treetable/FooterCell.vue
new file mode 100644
index 000000000..e9477aa6e
--- /dev/null
+++ b/src/components/treetable/FooterCell.vue
@@ -0,0 +1,74 @@
+
+
+
+
+
+
diff --git a/src/components/treetable/HeaderCell.vue b/src/components/treetable/HeaderCell.vue
new file mode 100644
index 000000000..b2a850f8a
--- /dev/null
+++ b/src/components/treetable/HeaderCell.vue
@@ -0,0 +1,170 @@
+
+
+
+
+
+
+
diff --git a/src/components/treetable/TreeTable.d.ts b/src/components/treetable/TreeTable.d.ts
index f7261a457..595d72a56 100755
--- a/src/components/treetable/TreeTable.d.ts
+++ b/src/components/treetable/TreeTable.d.ts
@@ -36,6 +36,9 @@ interface TreeTableProps {
columnResizeMode?: string;
indentation?: number;
showGridlines?: boolean;
+ scrollable?: boolean;
+ scrollHeight?: string;
+ scrollDirection?: string;
}
declare class TreeTable {
diff --git a/src/components/treetable/TreeTable.vue b/src/components/treetable/TreeTable.vue
index 3167efa1b..80be66ee4 100755
--- a/src/components/treetable/TreeTable.vue
+++ b/src/components/treetable/TreeTable.vue
@@ -22,14 +22,9 @@
-
-
-
+
@@ -55,10 +50,7 @@
TreeTable supports both horizontal and vertical scrolling with support for frozen columns. Scrollable TreeTable is enabled using scrollable property and scrollHeight to define the viewport height.
+
+<TreeTable :value="nodes" style="margin-bottom: 2rem" :scrollable="true" scrollHeight="400px">
+ <Column field="name" header="Name" :expander="true" style="min-width:200px"></Column>
+ <Column field="size" header="Size" style="min-width:200px"></Column>
+ <Column field="type" header="Type" style="min-width:200px"></Column>
+</TreeTable>
+
+
+
+ Scrollable treetable uses flex layout so there are a couple of rules to consider when adjusting the widths of columns.
+
+<Column field="vin" header="Vin" style="flex: 0 0 4rem"></Column>
+
+
+
+ In cases where viewport should adjust itself according to the table parent's height instead of a fixed viewport height, set scrollHeight option as flex. In example below, table is inside a Dialog where viewport size dynamically responds to the dialog size changes such as maximizing. + FlexScroll can also be used for cases where scrollable viewport should be responsive with respect to the window size for full page scroll.
+
+<Button label="Show" icon="pi pi-external-link" @click="openDialog" />
+<Dialog header="Flex Scroll" v-model:visible="dialogVisible" :style="{width: '50vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}">
+ <TreeTable :value="nodes" :scrollable="true" scrollHeight="flex">
+ <Column field="name" header="Name" :expander="true" style="min-width:200px"></Column>
+ <Column field="size" header="Size" style="min-width:200px"></Column>
+ <Column field="type" header="Type" style="min-width:200px"></Column>
+ </TreeTable>
+ <template #footer>
+ <Button label="Yes" icon="pi pi-check" @click="closeDialog" />
+ <Button label="No" icon="pi pi-times" @click="closeDialog" class="p-button-secondary"/>
+ </template>
+</Dialog>
+
+
+
+ For horizontal scrolling, it is required to set scrollDirection to "horizontal" and give fixed widths to columns.
+
+<TreeTable :value="nodes" :scrollable="true" scrollDirection="horizontal">
+ <Column field="name" header="Name" :expander="true" style="width:200px"></Column>
+ <Column field="size" header="Size" style="width:200px"></Column>
+ <Column field="type" header="Type" style="width:200px"></Column>
+</TreeTable>
+
+
+
+ Set scrollDirection to "both" and give fixed widths to columns to scroll both ways.
+
+<TreeTable :value="customers" :scrollable="true" scrollHeight="400px" scrollDirection="both">
+ <Column field="name" header="Name" :expander="true" style="width:200px"></Column>
+ <Column field="size" header="Size" style="width:200px"></Column>
+ <Column field="type" header="Type" style="width:200px"></Column>
+</TreeTable>
+
+
+
+ Certain columns can be frozen by using the frozen property of the column component. In addition alignFrozen is available to define whether the column should + be fixed on the left or right.
+ +
+<TreeTable :value="customers" :scrollable="true" scrollHeight="400px" scrollDirection="both">
+ <Column field="name" header="Name" :expander="true" style="width:200px" frozen></Column>
+ <Column field="size" header="Size" style="width:200px"></Column>
+ <Column field="type" header="Type" style="width:200px" frozen alignFrozen="right"></Column>
+</TreeTable>
+
Flex scroll feature makes the scrollable viewport section dynamic insteaf of a fixed value so that it can grow or shrink relative to the parent size of the table. + Click the button below to display a maximizable Dialog where data viewport adjusts itself according to the size changes.
+ + +Flex scroll feature makes the scrollable viewport section dynamic insteaf of a fixed value so that it can grow or shrink relative to the parent size of the table. + Click the button below to display a maximizable Dialog where data viewport adjusts itself according to the size changes.
+ + +