diff --git a/apps/showcase/doc/datatable/pagination/PaginationHeadlessDoc.vue b/apps/showcase/doc/datatable/pagination/PaginationHeadlessDoc.vue
new file mode 100644
index 000000000..c815efe72
--- /dev/null
+++ b/apps/showcase/doc/datatable/pagination/PaginationHeadlessDoc.vue
@@ -0,0 +1,155 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Headless mode on Pagination is enabled by adding using <i>paginatorcontainer</i>.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable :value="customers" paginator :rows="5" tableStyle="min-width: 50rem">
+                <Column field="name" header="Name" style="width: 25%"></Column>
+                <Column field="country.name" header="Country" style="width: 25%"></Column>
+                <Column field="company" header="Company" style="width: 25%"></Column>
+                <Column field="representative.name" header="Representative" style="width: 25%"></Column>
+                <template #paginatorcontainer="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
+                    <div class="flex items-center gap-4 border border-primary bg-transparent rounded-full w-full py-1 px-2 justify-between">
+                        <Button icon="pi pi-chevron-left" rounded text @click="prevPageCallback" :disabled="page === 0" />
+                        <div class="text-color font-medium">
+                            <span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
+                            <span class="block sm:hidden">Page {{ page + 1 }} of {{ pageCount }}</span>
+                        </div>
+                        <Button icon="pi pi-chevron-right" rounded text @click="nextPageCallback" :disabled="page === pageCount - 1" />
+                    </div>
+                </template>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['CustomerService']" />
+</template>
+
+<script>
+import { CustomerService } from '@/service/CustomerService';
+
+export default {
+    data() {
+        return {
+            customers: null,
+            code: {
+                basic: `
+<DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem">
+    <Column field="name" header="Name" style="width: 25%"></Column>
+    <Column field="country.name" header="Country" style="width: 25%"></Column>
+    <Column field="company" header="Company" style="width: 25%"></Column>
+    <Column field="representative.name" header="Representative" style="width: 25%"></Column>
+    <template #paginatorcontainer="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
+        <div class="flex items-center gap-4 border border-primary bg-transparent rounded-full w-full py-1 px-2 justify-between">
+            <Button icon="pi pi-chevron-left" rounded text @click="prevPageCallback" :disabled="page === 0" />
+            <div class="text-color font-medium">
+                <span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
+                <span class="block sm:hidden">Page {{ page + 1 }} of {{ pageCount }}</span>
+            </div>
+            <Button icon="pi pi-chevron-right" rounded text @click="nextPageCallback" :disabled="page === pageCount - 1" />
+        </div>
+    </template>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" style="width: 25%"></Column>
+            <Column field="country.name" header="Country" style="width: 25%"></Column>
+            <Column field="company" header="Company" style="width: 25%"></Column>
+            <Column field="representative.name" header="Representative" style="width: 25%"></Column>
+            <template #paginatorcontainer="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
+                <div class="flex items-center gap-4 border border-primary bg-transparent rounded-full w-full py-1 px-2 justify-between">
+                    <Button icon="pi pi-chevron-left" rounded text @click="prevPageCallback" :disabled="page === 0" />
+                    <div class="text-color font-medium">
+                        <span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
+                        <span class="block sm:hidden">Page {{ page + 1 }} of {{ pageCount }}</span>
+                    </div>
+                    <Button icon="pi pi-chevron-right" rounded text @click="nextPageCallback" :disabled="page === pageCount - 1" />
+                </div>
+            </template>
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { CustomerService } from '@/service/CustomerService';
+
+export default {
+    data() {
+        return {
+            customers: null
+        };
+    },
+    mounted() {
+        CustomerService.getCustomersMedium().then((data) => (this.customers = data));
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" style="width: 25%"></Column>
+            <Column field="country.name" header="Country" style="width: 25%"></Column>
+            <Column field="company" header="Company" style="width: 25%"></Column>
+            <Column field="representative.name" header="Representative" style="width: 25%"></Column>
+            <template #paginatorcontainer="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
+                <div class="flex items-center gap-4 border border-primary bg-transparent rounded-full w-full py-1 px-2 justify-between">
+                    <Button icon="pi pi-chevron-left" rounded text @click="prevPageCallback" :disabled="page === 0" />
+                    <div class="text-color font-medium">
+                        <span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
+                        <span class="block sm:hidden">Page {{ page + 1 }} of {{ pageCount }}</span>
+                    </div>
+                    <Button icon="pi pi-chevron-right" rounded text @click="nextPageCallback" :disabled="page === pageCount - 1" />
+                </div>
+            </template>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { CustomerService } from '@/service/CustomerService';
+
+onMounted(() => {
+    CustomerService.getCustomersMedium().then((data) => (customers.value = data));
+});
+
+const customers = ref();
+
+<\/script>
+`,
+                data: `
+                {
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...
+`
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            CustomerService.getCustomersMedium().then((data) => (this.customers = data));
+        }
+    }
+};
+</script>
diff --git a/apps/showcase/pages/datatable/index.vue b/apps/showcase/pages/datatable/index.vue
index ff4f75433..571b55922 100755
--- a/apps/showcase/pages/datatable/index.vue
+++ b/apps/showcase/pages/datatable/index.vue
@@ -35,6 +35,7 @@ import RowEditDoc from '@/doc/datatable/edit/RowEditDoc.vue';
 import AdvancedFilterDoc from '@/doc/datatable/filter/AdvancedFilterDoc.vue';
 import BasicFilterDoc from '@/doc/datatable/filter/BasicFilterDoc.vue';
 import PaginationBasicDoc from '@/doc/datatable/pagination/PaginationBasicDoc.vue';
+import PaginationHeadlessDoc from '@/doc/datatable/pagination/PaginationHeadlessDoc.vue';
 import PaginationTemplateDoc from '@/doc/datatable/pagination/PaginationTemplateDoc.vue';
 import PTComponent from '@/doc/datatable/pt/index.vue';
 import ExpandableRowGroupDoc from '@/doc/datatable/rowgroup/ExpandableRowGroupDoc.vue';
@@ -113,6 +114,11 @@ export default {
                             id: 'paginator_template',
                             label: 'Template',
                             component: PaginationTemplateDoc
+                        },
+                        {
+                            id: 'paginator_headless',
+                            label: 'Headless',
+                            component: PaginationHeadlessDoc
                         }
                     ]
                 },