feat(Table): add pagination feature

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"
     >

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,22 +104,25 @@ export type TableSlots<T> = {
   expanded: (props: { row: Row<T> }) => any
   empty: (props?: {}) => any
   caption: (props?: {}) => any
+  pagination: (props?: {}) => any
 } & DynamicHeaderSlots<T> & DynamicCellSlots<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,13 +138,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 +177,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 +201,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
 }
@@ -247,5 +279,10 @@ 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>

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: {