diff --git a/apps/showcase/doc/paginator/pt/PTImage.vue b/apps/showcase/doc/paginator/pt/PTImage.vue
deleted file mode 100644
index a90a94114..000000000
--- a/apps/showcase/doc/paginator/pt/PTImage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>{{ $attrs.description }}</p>
-    </DocSectionText>
-    <div class="card">
-        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/paginator.png" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/paginator/pt/PTViewer.vue b/apps/showcase/doc/paginator/pt/PTViewer.vue
new file mode 100644
index 000000000..1b180f2f7
--- /dev/null
+++ b/apps/showcase/doc/paginator/pt/PTViewer.vue
@@ -0,0 +1,25 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <div class="w-full">
+            <Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]"></Paginator>
+        </div>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('Paginator'),
+                    key: 'Paginator'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/paginator/pt/index.vue b/apps/showcase/doc/paginator/pt/index.vue
index 56843f7b6..ec0b3e997 100644
--- a/apps/showcase/doc/paginator/pt/index.vue
+++ b/apps/showcase/doc/paginator/pt/index.vue
@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.paginator',
diff --git a/apps/showcase/doc/tree/pt/PTImage.vue b/apps/showcase/doc/tree/pt/PTImage.vue
deleted file mode 100644
index 01bb690fc..000000000
--- a/apps/showcase/doc/tree/pt/PTImage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>{{ $attrs.description }}</p>
-    </DocSectionText>
-    <div class="card">
-        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/tree.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/tree/pt/PTViewer.vue b/apps/showcase/doc/tree/pt/PTViewer.vue
new file mode 100644
index 000000000..99350b041
--- /dev/null
+++ b/apps/showcase/doc/tree/pt/PTViewer.vue
@@ -0,0 +1,29 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <Tree v-model:selectionKeys="selectedKey" filter :value="nodes" selectionMode="checkbox" class="w-full md:w-[30rem]"></Tree>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedKey: null,
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('Tree'),
+                    key: 'Tree'
+                }
+            ]
+        };
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+};
+</script>
diff --git a/apps/showcase/doc/tree/pt/index.vue b/apps/showcase/doc/tree/pt/index.vue
index 8cfe506fa..373af9ec5 100644
--- a/apps/showcase/doc/tree/pt/index.vue
+++ b/apps/showcase/doc/tree/pt/index.vue
@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.tree',
diff --git a/apps/showcase/doc/treetable/pt/PTImage.vue b/apps/showcase/doc/treetable/pt/PTImage.vue
deleted file mode 100644
index 9ac50d6b4..000000000
--- a/apps/showcase/doc/treetable/pt/PTImage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>{{ $attrs.description }}</p>
-    </DocSectionText>
-    <div class="card">
-        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/treetable/pt/PTViewer.vue b/apps/showcase/doc/treetable/pt/PTViewer.vue
new file mode 100644
index 000000000..ca54cedd0
--- /dev/null
+++ b/apps/showcase/doc/treetable/pt/PTViewer.vue
@@ -0,0 +1,36 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <TreeTable :value="nodes" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
+        </TreeTable>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('TreeTable'),
+                    key: 'TreeTable'
+                },
+                {
+                    data: getPTOptions('Column'),
+                    key: 'Column'
+                }
+            ]
+        };
+    },
+    mounted() {
+        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    }
+};
+</script>
diff --git a/apps/showcase/doc/treetable/pt/index.vue b/apps/showcase/doc/treetable/pt/index.vue
index 2e6cdc1e7..9abc90a85 100644
--- a/apps/showcase/doc/treetable/pt/index.vue
+++ b/apps/showcase/doc/treetable/pt/index.vue
@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.treetable',