diff --git a/doc/datatable/pt/PTDoc.vue b/doc/datatable/pt/PTDoc.vue
new file mode 100644
index 000000000..3442c7bb2
--- /dev/null
+++ b/doc/datatable/pt/PTDoc.vue
@@ -0,0 +1,128 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <div class="card">
+        <DataTable
+            :value="products"
+            sortMode="multiple"
+            :pt="{
+                table: { style: { minWidth: '50rem' } },
+                sortBadge: { class: 'bg-primary' }
+            }"
+        >
+            <Column field="code" header="Code" sortable style="width: 25%"></Column>
+            <Column field="name" header="Name" sortable style="width: 25%"></Column>
+            <Column field="category" header="Category" sortable style="width: 25%"></Column>
+            <Column field="quantity" header="Quantity" sortable style="width: 25%"></Column>
+        </DataTable>
+    </div>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            code: {
+                basic: `
+<DataTable
+    :value="products"
+    sortMode="multiple"
+    :pt="{
+        table: { style: { minWidth: '50rem' } },
+        sortBadge: { class: 'bg-primary' }
+    }"
+>
+    <Column field="code" header="Code" sortable style="width: 25%"></Column>
+    <Column field="name" header="Name" sortable style="width: 25%"></Column>
+    <Column field="category" header="Category" sortable style="width: 25%"></Column>
+    <Column field="quantity" header="Quantity" sortable style="width: 25%"></Column>
+</DataTable>`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable
+            :value="products"
+            sortMode="multiple"
+            :pt="{
+                table: { style: { minWidth: '50rem' } },
+                sortBadge: { class: 'bg-primary' }
+            }"
+        >
+            <Column field="code" header="Code" sortable style="width: 25%"></Column>
+            <Column field="name" header="Name" sortable style="width: 25%"></Column>
+            <Column field="category" header="Category" sortable style="width: 25%"></Column>
+            <Column field="quantity" header="Quantity" sortable style="width: 25%"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null
+        };
+    },
+    mounted() {
+        ProductService.getProductsMini().then((data) => (this.products = data));
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable
+            :value="products"
+            sortMode="multiple"
+            :pt="{
+                table: { style: { minWidth: '50rem' } },
+                sortBadge: { class: 'bg-primary' }
+            }"
+        >
+            <Column field="code" header="Code" sortable style="width: 25%"></Column>
+            <Column field="name" header="Name" sortable style="width: 25%"></Column>
+            <Column field="category" header="Category" sortable style="width: 25%"></Column>
+            <Column field="quantity" header="Quantity" sortable style="width: 25%"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProductsMini().then((data) => (products.value = data));
+});
+
+const products = ref();
+
+<\/script>`,
+                data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+            }
+        };
+    },
+    mounted() {
+        ProductService.getProductsMini().then((data) => (this.products = data));
+    }
+};
+</script>
diff --git a/doc/datatable/pt/PTImage.vue b/doc/datatable/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/datatable/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<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/doc/datatable/pt/index.vue b/doc/datatable/pt/index.vue
new file mode 100644
index 000000000..86de8efc6
--- /dev/null
+++ b/doc/datatable/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>DataTable Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.datatable',
+                    label: 'DataTable PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('DataTable')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/pages/datatable/index.vue b/pages/datatable/index.vue
index afc960fa4..3b450d371 100755
--- a/pages/datatable/index.vue
+++ b/pages/datatable/index.vue
@@ -1,30 +1,36 @@
 <template>
-    <DocComponent title="Vue Table Component" header="DataTable" description="DataTable displays data in tabular format." :componentDocs="docs" :apiDocs="['DataTable', 'Column', 'ColumnGroup', 'Row']" />
+    <DocComponent title="Vue Table Component" header="DataTable" description="DataTable displays data in tabular format." :componentDocs="docs" :apiDocs="['DataTable', 'Column', 'ColumnGroup', 'Row']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
 import AccessibilityDoc from '@/doc/datatable/AccessibilityDoc';
 import BasicDoc from '@/doc/datatable/BasicDoc';
-import ExpandModeDoc from '@/doc/datatable/colresize/ExpandModeDoc';
-import FitModeDoc from '@/doc/datatable/colresize/FitModeDoc';
 import ColumnGroupDoc from '@/doc/datatable/ColumnGroupDoc';
 import ColumnToggleDoc from '@/doc/datatable/ColumnToggleDoc';
 import ConditionalStyleDoc from '@/doc/datatable/ConditionalStyleDoc';
 import ContextMenuDoc from '@/doc/datatable/ContextMenuDoc';
 import DynamicColumnsDoc from '@/doc/datatable/DynamicColumnsDoc';
-import CellEditDoc from '@/doc/datatable/edit/CellEditDoc';
-import FilterSortEditDoc from '@/doc/datatable/edit/FilterSortEditDoc';
-import RowEditDoc from '@/doc/datatable/edit/RowEditDoc';
 import ExportDoc from '@/doc/datatable/ExportDoc';
-import AdvancedFilterDoc from '@/doc/datatable/filter/AdvancedFilterDoc';
-import BasicFilterDoc from '@/doc/datatable/filter/BasicFilterDoc';
 import GridLinesDoc from '@/doc/datatable/GridLinesDoc';
 import ImportDoc from '@/doc/datatable/ImportDoc';
 import LazyLoadDoc from '@/doc/datatable/LazyLoadDoc';
-import PaginatorBasicDoc from '@/doc/datatable/paginator/PaginatorBasicDoc';
-import PaginatorTemplateDoc from '@/doc/datatable/paginator/PaginatorTemplateDoc';
 import ReorderDoc from '@/doc/datatable/ReorderDoc';
 import RowExpansionDoc from '@/doc/datatable/RowExpansionDoc';
+import SizeDoc from '@/doc/datatable/SizeDoc';
+import StatefulDoc from '@/doc/datatable/StatefulDoc';
+import StripedRowsDoc from '@/doc/datatable/StripedRowsDoc';
+import StyleDoc from '@/doc/datatable/StyleDoc';
+import TemplateDoc from '@/doc/datatable/TemplateDoc';
+import ExpandModeDoc from '@/doc/datatable/colresize/ExpandModeDoc';
+import FitModeDoc from '@/doc/datatable/colresize/FitModeDoc';
+import CellEditDoc from '@/doc/datatable/edit/CellEditDoc';
+import FilterSortEditDoc from '@/doc/datatable/edit/FilterSortEditDoc';
+import RowEditDoc from '@/doc/datatable/edit/RowEditDoc';
+import AdvancedFilterDoc from '@/doc/datatable/filter/AdvancedFilterDoc';
+import BasicFilterDoc from '@/doc/datatable/filter/BasicFilterDoc';
+import PaginatorBasicDoc from '@/doc/datatable/paginator/PaginatorBasicDoc';
+import PaginatorTemplateDoc from '@/doc/datatable/paginator/PaginatorTemplateDoc';
+import PTComponent from '@/doc/datatable/pt/index.vue';
 import ExpandableRowGroupDoc from '@/doc/datatable/rowgroup/ExpandableRowGroupDoc';
 import RowSpanRowGroupDoc from '@/doc/datatable/rowgroup/RowSpanRowGroupDoc';
 import SubHeaderRowGroupDoc from '@/doc/datatable/rowgroup/SubHeaderRowGroupDoc';
@@ -40,15 +46,10 @@ import FrozenColumnsDoc from '@/doc/datatable/scroll/FrozenColumnsDoc';
 import FrozenRowsDoc from '@/doc/datatable/scroll/FrozenRowsDoc';
 import HorizontalScrollDoc from '@/doc/datatable/scroll/HorizontalScrollDoc';
 import VerticalScrollDoc from '@/doc/datatable/scroll/VerticalScrollDoc';
-import SizeDoc from '@/doc/datatable/SizeDoc';
 import MultipleColumnsDoc from '@/doc/datatable/sort/MultipleColumnsDoc';
 import PresortDoc from '@/doc/datatable/sort/PresortDoc';
 import RemovableSortDoc from '@/doc/datatable/sort/RemovableSortDoc';
 import SingleColumnDoc from '@/doc/datatable/sort/SingleColumnDoc';
-import StatefulDoc from '@/doc/datatable/StatefulDoc';
-import StripedRowsDoc from '@/doc/datatable/StripedRowsDoc';
-import StyleDoc from '@/doc/datatable/StyleDoc';
-import TemplateDoc from '@/doc/datatable/TemplateDoc';
 import LazyVirtualScrollDoc from '@/doc/datatable/virtualscroll/LazyVirtualScrollDoc';
 import PreloadVirtualScrollDoc from '@/doc/datatable/virtualscroll/PreloadVirtualScrollDoc';
 
@@ -356,7 +357,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };