From a351d288b0475270844f047628661c61f67e54a0 Mon Sep 17 00:00:00 2001
From: blouflashdb <45914736+blouflashdb@users.noreply.github.com>
Date: Fri, 15 Nov 2024 20:03:41 +0100
Subject: [PATCH 1/5] feat(Table): add pagination

---
 src/runtime/components/Table.vue | 44 +++++++++++++++++++++++++++++---
 1 file changed, 41 insertions(+), 3 deletions(-)

diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index 67ba35efc1..ccc93466d8 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -19,9 +19,11 @@ import type {
   ExpandedOptions,
   SortingOptions,
   RowSelectionOptions,
+  PaginationOptions,
   Updater,
   CellContext,
-  HeaderContext
+  HeaderContext,
+  PaginationState
 } from '@tanstack/vue-table'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/table'
@@ -86,6 +88,11 @@ export interface TableProps<T> {
    * @link [Guide](https://tanstack.com/table/v8/docs/guide/row-selection)
    */
   rowSelectionOptions?: Omit<RowSelectionOptions<T>, 'onRowSelectionChange'>
+  /**
+   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/pagination#table-options)
+   * @link [Guide](https://tanstack.com/table/v8/docs/guide/pagination)
+   */
+  paginationOptions?: Omit<PaginationOptions, 'onPaginationChange'>
   class?: any
   ui?: Partial<typeof table.slots>
 }
@@ -102,17 +109,19 @@ export type TableSlots<T> = {
 </script>
 
 <script setup lang="ts" generic="T extends TableData">
-import { computed } from 'vue'
+import { computed, ref, watch } from 'vue'
 import {
   FlexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getSortedRowModel,
   getExpandedRowModel,
-  useVueTable
+  useVueTable,
+  getPaginationRowModel
 } from '@tanstack/vue-table'
 import { upperFirst } from 'scule'
 import { useLocale } from '../composables/useLocale'
+import UPagination from './Pagination.vue'
 
 const props = defineProps<TableProps<T>>()
 defineSlots<TableSlots<T>>()
@@ -128,6 +137,15 @@ const ui = computed(() => table({
   loadingAnimation: props.loadingAnimation
 }))
 
+// workaround to disable pagination when no pagination options are provided because passing
+// getPaginationRowModel to useVueTable will automatically enable pagination
+const paginationStateOverride = computed(() => !paginationState.value && !props.paginationOptions
+  ? {
+      pageSize: data.value.length,
+      pageIndex: 0
+    }
+  : paginationState.value)
+
 const globalFilterState = defineModel<string>('globalFilter', { default: undefined })
 const columnFiltersState = defineModel<ColumnFiltersState>('columnFilters', { default: [] })
 const columnVisibilityState = defineModel<VisibilityState>('columnVisibility', { default: {} })
@@ -135,6 +153,7 @@ const columnPinningState = defineModel<ColumnPinningState>('columnPinning', { de
 const rowSelectionState = defineModel<RowSelectionState>('rowSelection', { default: {} })
 const sortingState = defineModel<SortingState>('sorting', { default: [] })
 const expandedState = defineModel<ExpandedState>('expanded', { default: {} })
+const paginationState = defineModel<PaginationState>('pagination', { default: undefined })
 
 const tableApi = useVueTable({
   data,
@@ -157,6 +176,9 @@ const tableApi = useVueTable({
   ...(props.expandedOptions || {}),
   getExpandedRowModel: getExpandedRowModel(),
   onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expandedState),
+  getPaginationRowModel: getPaginationRowModel(),
+  ...(props.paginationOptions || {}),
+  onPaginationChange: updaterOrValue => valueUpdater(updaterOrValue, paginationState),
   state: {
     get globalFilter() {
       return globalFilterState.value
@@ -178,10 +200,19 @@ const tableApi = useVueTable({
     },
     get sorting() {
       return sortingState.value
+    },
+    get pagination() {
+      return paginationStateOverride.value
     }
   }
 })
 
+const page = ref(1)
+
+watch(page, () => {
+  tableApi.setPageIndex(page.value - 1)
+})
+
 function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
   ref.value = typeof updaterOrValue === 'function' ? updaterOrValue(ref.value) : updaterOrValue
 }
@@ -246,6 +277,13 @@ defineExpose({
           </td>
         </tr>
       </tbody>
+      <tfoot v-if="tableApi.getPageCount() > 1">
+        <tr>
+          <td :colspan="columns?.length">
+            <UPagination v-model:page="page" :items-per-page="1" :total="tableApi.getPageCount()" />
+          </td>
+        </tr>
+      </tfoot>
     </table>
   </div>
 </template>

From 94bdbb94bfe196bc3f6ec5d71f90b78360de8f2c Mon Sep 17 00:00:00 2001
From: blouflashdb <45914736+blouflashdb@users.noreply.github.com>
Date: Fri, 15 Nov 2024 20:19:41 +0100
Subject: [PATCH 2/5] chore(Table): add example usage for clientside pagination

---
 playground/app/pages/components/table.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/playground/app/pages/components/table.vue b/playground/app/pages/components/table.vue
index cc3b866dd0..b41dc0ed44 100644
--- a/playground/app/pages/components/table.vue
+++ b/playground/app/pages/components/table.vue
@@ -317,6 +317,7 @@ onMounted(() => {
       :columns="columns"
       :column-pinning="columnPinning"
       :loading="loading"
+      :pagination="{ pageSize: 10, pageIndex: 0 }"
       sticky
       class="border border-[var(--ui-border-accented)] rounded-[var(--ui-radius)] flex-1"
     >

From 019005249751928538cad635f9afab554e8671ab Mon Sep 17 00:00:00 2001
From: blouflashdb <45914736+blouflashdb@users.noreply.github.com>
Date: Fri, 15 Nov 2024 21:05:49 +0100
Subject: [PATCH 3/5] feat(Table): improve html and styling of pagination

---
 src/runtime/components/Table.vue | 10 +++-------
 src/theme/table.ts               |  3 ++-
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index ccc93466d8..f34fa0f04a 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -277,13 +277,9 @@ defineExpose({
           </td>
         </tr>
       </tbody>
-      <tfoot v-if="tableApi.getPageCount() > 1">
-        <tr>
-          <td :colspan="columns?.length">
-            <UPagination v-model:page="page" :items-per-page="1" :total="tableApi.getPageCount()" />
-          </td>
-        </tr>
-      </tfoot>
     </table>
+    <div :class="ui.pagination({ class: [props.ui?.pagination] })">
+      <UPagination v-if="tableApi.getPageCount() > 1" v-model:page="page" :items-per-page="1" :total="tableApi.getPageCount()" />
+    </div>
   </div>
 </template>
diff --git a/src/theme/table.ts b/src/theme/table.ts
index 6d5208d9ce..061ffea30b 100644
--- a/src/theme/table.ts
+++ b/src/theme/table.ts
@@ -10,7 +10,8 @@ export default (options: Required<ModuleOptions>) => ({
     tr: 'data-[selected=true]:bg-[var(--ui-bg-elevated)]/50',
     th: 'px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0',
     td: 'p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0',
-    empty: 'py-6 text-center text-sm text-[var(--ui-text-muted)]'
+    empty: 'py-6 text-center text-sm text-[var(--ui-text-muted)]',
+    pagination: 'flex justify-center items-center py-4'
   },
   variants: {
     pinned: {

From 296db30fb7b1e35b194f2c89d64b63560c735678 Mon Sep 17 00:00:00 2001
From: blouflashdb <45914736+blouflashdb@users.noreply.github.com>
Date: Fri, 15 Nov 2024 21:12:04 +0100
Subject: [PATCH 4/5] feat(Table): add pagination slot

---
 src/runtime/components/Table.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index f34fa0f04a..822b6663d4 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -104,6 +104,7 @@ export type TableSlots<T> = {
   expanded: (props: { row: Row<T> }) => any
   empty: (props?: {}) => any
   caption: (props?: {}) => any
+  pagination: (props?: {}) => any
 } & DynamicHeaderSlots<T> & DynamicCellSlots<T>
 
 </script>
@@ -278,8 +279,10 @@ defineExpose({
         </tr>
       </tbody>
     </table>
-    <div :class="ui.pagination({ class: [props.ui?.pagination] })">
-      <UPagination v-if="tableApi.getPageCount() > 1" v-model:page="page" :items-per-page="1" :total="tableApi.getPageCount()" />
-    </div>
+    <slot name="pagination">
+      <div :class="ui.pagination({ class: [props.ui?.pagination] })">
+        <UPagination v-if="tableApi.getPageCount() > 1" v-model:page="page" :items-per-page="1" :total="tableApi.getPageCount()" />
+      </div>
+    </slot>
   </div>
 </template>

From 4b4d629d6c9f8072bda53208b23c299741fca67f Mon Sep 17 00:00:00 2001
From: blouflashdb <45914736+blouflashdb@users.noreply.github.com>
Date: Thu, 28 Nov 2024 20:56:52 +0100
Subject: [PATCH 5/5] feat(Table): remove Pagination component from Table
 template

---
 playground/app/pages/components/table.vue |  7 +++++++
 src/runtime/components/Table.vue          | 14 +-------------
 src/theme/table.ts                        |  3 +--
 3 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/playground/app/pages/components/table.vue b/playground/app/pages/components/table.vue
index b41dc0ed44..16aee0ae92 100644
--- a/playground/app/pages/components/table.vue
+++ b/playground/app/pages/components/table.vue
@@ -264,6 +264,12 @@ const columnPinning = ref({
   right: ['actions']
 })
 
+const page = ref(1)
+
+watch(page, () => {
+  tableApi.setPageIndex(page.value - 1)
+})
+
 function randomize() {
   data.value = [...data.value].sort(() => Math.random() - 0.5)
 }
@@ -325,6 +331,7 @@ onMounted(() => {
         <pre>{{ row.original }}</pre>
       </template>
     </UTable>
+    <UPagination v-if="table?.tableApi?.getPageCount() > 1" v-model:page="page" :items-per-page="1" :total="table?.tableApi?.getPageCount()" />
 
     <div class="flex items-center justify-between gap-3">
       <div class="text-sm text-[var(--ui-text-muted)]">
diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index 822b6663d4..97b52fedd2 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -110,7 +110,7 @@ export type TableSlots<T> = {
 </script>
 
 <script setup lang="ts" generic="T extends TableData">
-import { computed, ref, watch } from 'vue'
+import { computed } from 'vue'
 import {
   FlexRender,
   getCoreRowModel,
@@ -122,7 +122,6 @@ import {
 } from '@tanstack/vue-table'
 import { upperFirst } from 'scule'
 import { useLocale } from '../composables/useLocale'
-import UPagination from './Pagination.vue'
 
 const props = defineProps<TableProps<T>>()
 defineSlots<TableSlots<T>>()
@@ -208,12 +207,6 @@ const tableApi = useVueTable({
   }
 })
 
-const page = ref(1)
-
-watch(page, () => {
-  tableApi.setPageIndex(page.value - 1)
-})
-
 function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
   ref.value = typeof updaterOrValue === 'function' ? updaterOrValue(ref.value) : updaterOrValue
 }
@@ -279,10 +272,5 @@ defineExpose({
         </tr>
       </tbody>
     </table>
-    <slot name="pagination">
-      <div :class="ui.pagination({ class: [props.ui?.pagination] })">
-        <UPagination v-if="tableApi.getPageCount() > 1" v-model:page="page" :items-per-page="1" :total="tableApi.getPageCount()" />
-      </div>
-    </slot>
   </div>
 </template>
diff --git a/src/theme/table.ts b/src/theme/table.ts
index 061ffea30b..6d5208d9ce 100644
--- a/src/theme/table.ts
+++ b/src/theme/table.ts
@@ -10,8 +10,7 @@ export default (options: Required<ModuleOptions>) => ({
     tr: 'data-[selected=true]:bg-[var(--ui-bg-elevated)]/50',
     th: 'px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0',
     td: 'p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0',
-    empty: 'py-6 text-center text-sm text-[var(--ui-text-muted)]',
-    pagination: 'flex justify-center items-center py-4'
+    empty: 'py-6 text-center text-sm text-[var(--ui-text-muted)]'
   },
   variants: {
     pinned: {