From 3ec26db163702a7cb2d18d44f9c80d0aa1b402d0 Mon Sep 17 00:00:00 2001
From: SonTT19 <tran.thanh.son.acc@gmail.com>
Date: Wed, 20 Dec 2023 15:10:43 +0700
Subject: [PATCH] fix(VDataTable): fix send props to VPagination

---
 .../VDataTable/VDataTableFooter.tsx           | 77 ++++++++++---------
 1 file changed, 41 insertions(+), 36 deletions(-)

diff --git a/packages/vuetify/src/components/VDataTable/VDataTableFooter.tsx b/packages/vuetify/src/components/VDataTable/VDataTableFooter.tsx
index 07eb2758021..28eefa8cba0 100644
--- a/packages/vuetify/src/components/VDataTable/VDataTableFooter.tsx
+++ b/packages/vuetify/src/components/VDataTable/VDataTableFooter.tsx
@@ -97,46 +97,51 @@ export const VDataTableFooter = genericComponent<{ prepend: never }>()({
       })
     ))
 
-    useRender(() => (
-      <div class="v-data-table-footer">
-        { slots.prepend?.() }
-
-        <div class="v-data-table-footer__items-per-page">
-          <span>{ t(props.itemsPerPageText) }</span>
-
-          <VSelect
-            items={ itemsPerPageOptions.value }
-            modelValue={ itemsPerPage.value }
-            onUpdate:modelValue={ v => setItemsPerPage(Number(v)) }
-            density="compact"
-            variant="outlined"
-            hide-details
-          />
-        </div>
+    useRender(() => {
+      const paginationProps = VPagination.filterProps(props)
+
+      return (
+        <div class="v-data-table-footer">
+          { slots.prepend?.() }
+
+          <div class="v-data-table-footer__items-per-page">
+            <span>{ t(props.itemsPerPageText) }</span>
+
+            <VSelect
+              items={ itemsPerPageOptions.value }
+              modelValue={ itemsPerPage.value }
+              onUpdate:modelValue={ v => setItemsPerPage(Number(v)) }
+              density="compact"
+              variant="outlined"
+              hide-details
+            />
+          </div>
 
-        <div class="v-data-table-footer__info">
-          <div>
-            { t(props.pageText, !itemsLength.value ? 0 : startIndex.value + 1, stopIndex.value, itemsLength.value) }
+          <div class="v-data-table-footer__info">
+            <div>
+              { t(props.pageText, !itemsLength.value ? 0 : startIndex.value + 1, stopIndex.value, itemsLength.value) }
+            </div>
           </div>
-        </div>
 
-        <div class="v-data-table-footer__pagination">
-          <VPagination
-            v-model={ page.value }
-            density="comfortable"
-            first-aria-label={ props.firstPageLabel }
-            last-aria-label={ props.lastPageLabel }
-            length={ pageCount.value }
-            next-aria-label={ props.nextPageLabel }
-            previous-aria-label={ props.prevPageLabel }
-            rounded
-            show-first-last-page
-            total-visible={ props.showCurrentPage ? 1 : 0 }
-            variant="plain"
-          ></VPagination>
+          <div class="v-data-table-footer__pagination">
+            <VPagination
+              v-model={ page.value }
+              density="comfortable"
+              first-aria-label={ props.firstPageLabel }
+              last-aria-label={ props.lastPageLabel }
+              length={ pageCount.value }
+              next-aria-label={ props.nextPageLabel }
+              previous-aria-label={ props.prevPageLabel }
+              rounded
+              show-first-last-page
+              total-visible={ props.showCurrentPage ? 1 : 0 }
+              variant="plain"
+              { ...paginationProps }
+            ></VPagination>
+          </div>
         </div>
-      </div>
-    ))
+      )
+    })
 
     return {}
   },