feat(Table): add pagination feature

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)
 }
@@ -317,13 +323,15 @@ 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"
     >
       <template #expanded="{ row }">
         <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)]">

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>
 }
@@ -97,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>
@@ -109,7 +117,8 @@ import {
   getFilteredRowModel,
   getSortedRowModel,
   getExpandedRowModel,
-  useVueTable
+  useVueTable,
+  getPaginationRowModel
 } from '@tanstack/vue-table'
 import { upperFirst } from 'scule'
 import { useLocale } from '../composables/useLocale'
@@ -128,13 +137,23 @@ 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: {} })
 const columnPinningState = defineModel<ColumnPinningState>('columnPinning', { default: {} })
 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,6 +200,9 @@ const tableApi = useVueTable({
     },
     get sorting() {
       return sortingState.value
+    },
+    get pagination() {
+      return paginationStateOverride.value
     }
   }
 })